一个炫酷的Bootstrap导航菜单
锺离阿苏
本文向大家介绍一个炫酷的Bootstrap导航菜单，包括了一个炫酷的Bootstrap导航菜单的使用技巧和注意事项，需要的朋友参考一下
本文实例为大家分享了Bootstrap导航菜单的具体代码，供大家参考，具体内容如下
效果图：
点击菜单的箭头有点小问题，后面改，不是很影响。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/beyond.css" /> <title>beyond网站模板练习</title> </head> <body> <!-- 导航 --> <div class="page-sidebar"> <ul class="nav panel-group sidebar-menu" id="nav_parent"> <li class="panel"> <a href="#"> <i class="menu-icon glyphicon glyphicon-home"></i> <span class="menu-text"> Dashboard </span> </a> </li> <li class="panel"> <a class="panel-heading collapsed" href="#collapse1" data-toggle="collapse" data-parent="#nav_parent"> <i class="menu-icon glyphicon glyphicon-fire"></i> <span class="menu-text">Elements</span> <i class="glyphicon glyphicon-chevron-right menu-expand"></i> </a> <ul class="nav submenu collapse" id="collapse1"> <li> <a href="#"><span class="menu-text">Basic Elements</span></a> </li> <li> <a class="panel-heading collapsed" href="#collapse2" data-toggle="collapse"> <span class="menu-text">Icons</span> <i class="glyphicon glyphicon-chevron-right menu-expand"></i> </a> <ul class="nav submenu collapse" id="collapse2"> <li> <a href="#"> <i class="menu-icon glyphicon glyphicon-stats"></i> <span class="menu-text">Font Awesome</span> </a> </li> <li> <a href="#"> <i class="menu-icon glyphicon glyphicon-stats"></i> <span class="menu-text">Glyph Icons</span> </a> </li> </ul> </li> <li> <a href="#"> <span class="menu-text">Tabs & Accordions</span> </a> </li> <li> <a href="#"> <span class="menu-text">Alerts & Tooltips</span> </a> </li> <li> <a href="#"> <span class="menu-text">Modals & Wells</span> </a> </li> </ul> </li> <li class="panel"> <a class="panel-heading collapsed" href="#collapse5" data-toggle="collapse" data-parent="#nav_parent"> <i class="menu-icon glyphicon glyphicon-link"></i> <span class="menu-text">More Pages</span> <i class="glyphicon glyphicon-chevron-right menu-expand"></i> </a> <ul class="nav submenu collapse" id="collapse5"> <li> <a href="#"><span class="menu-text">Error 404</span></a> </li> <li> <a href="#"><span class="menu-text"> Grid</span></a> </li> <li> <a class="panel-heading collapsed" href="#collapse6" data-toggle="collapse"> <span class="menu-text">Multi Level Menu</span> <i class="glyphicon glyphicon-chevron-right menu-expand"></i> </a> <ul class="nav submenu collapse" id="collapse6"> <li> <a href="#"> <i class="menu-icon glyphicon glyphicon-stats"></i> <span class="menu-text">Level 3</span> </a> </li> <li> <a class="panel-heading collapsed" href="#collapse7" data-toggle="collapse"> <i class="menu-icon glyphicon glyphicon-stats"></i> <span class="menu-text">Level 4</span> <i class="glyphicon glyphicon-chevron-right menu-expand"></i> </a> <ul class="nav submenu collapse" id="collapse7"> <li> <a href="#"> <i class="menu-icon glyphicon glyphicon-stats"></i> <span class="menu-text">Some Item</span> </a> </li> <li> <a href="#"> <i class="menu-icon glyphicon glyphicon-stats"></i> <span class="menu-text">Another Item</span> </a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <script type="text/javascript" src="jquery/jquery.min.js"></script> <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> <script type="text/javascript"> $(function(){ //点击菜单箭头变化 $(".page-sidebar .sidebar-menu a").each(function(){ $(this).click(function(){ var Oele = $(this).children('.menu-expand'); if($(Oele)){ if($(Oele).hasClass('glyphicon-chevron-right')){ $(Oele).removeClass('glyphicon-chevron-right').addClass('glyphicon-chevron-down'); }else{ $(Oele).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-right'); } } //选中增加active if(! $(this).hasClass('panel-heading')){ $(".page-sidebar .sidebar-menu a").removeClass('active'); $(this).addClass('active'); } }); }); }) </script> </body> </html>
CSS代码：
.page-sidebar{
position: absolute;
top: 0;
bottom: 0;
width: 224px;
display: block;
}
.page-sidebar .sidebar-menu {
margin: 0;
padding: 0;
margin-left: 5px;
}
.page-sidebar:before{
content: "";
position: fixed;
display: block;
width: 219px;
bottom: 0;
top: 0;
left: 5px;
background-color: #fff;
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
z-index: 1;
}
.page-sidebar .sidebar-menu a{
color: #737373;
z-index: 123;
padding: 0 16px 0 7px;
margin: 0;
height: 38px;
line-height: 36px;
-webkit-text-shadow: none!important;
text-shadow: none!important;
font-size: 13px;
}
.page-sidebar .submenu{
margin: 0;
padding: 0;
position: relative;
float: none;
background-color: #fbfbfb;
border: 0;
box-shadow: inset 0 4px 4px -2px rgba(0,0,0,.15),inset 0 -4px 4px -2px rgba(0,0,0,.15);
border-radius: 0;
z-index: 123;
}
.page-sidebar .sidebar-menu>li>a {
border-top: 1px solid #f3f3f3;
}
/* 菜单前面的小图标*/
.page-sidebar .sidebar-menu a .menu-icon {
display: inline-block;
vertical-align: middle;
min-width: 30px;
text-align: center;
font-size: 14px;
font-weight: normal;
font-style: normal;
margin-top: -3px;
}
/* 向右的箭头*/
.page-sidebar .sidebar-menu a .menu-expand{
display: inline-block;
position: absolute;
font-size: 10px;
line-height: 10px;
height: 10px;
width: 10px;
right: 12px;
top: 15px;
margin: 0;
text-align: center;
padding: 0;
-webkit-text-shadow: none;
text-shadow: none;
color: #666;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
font-style: normal;
font-weight: normal;
}
.panel-group .panel{
margin: 0;
margin-top:0 !important;
border: none;
}
/* 第一层级缩进 */
.page-sidebar .sidebar-menu .submenu>li>a {
padding-left: 40px;
}
/* 第二层级缩进 */
.page-sidebar .sidebar-menu .submenu>li .submenu>li>a {
padding-left: 50px;
}
.page-sidebar .sidebar-menu a:hover {
color: #262626;
}
/* 选中增加蓝色border */
.page-sidebar .sidebar-menu .active:before {
display: block;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -4px;
width: 4px;
max-width: 4px;
overflow: hidden;
background-color: #2dc3e8;
}
.page-sidebar .sidebar-menu li a:not(.panel-heading):hover:before {
display: block;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -4px;
width: 4px;
max-width: 4px;
overflow: hidden;
background-color: #fb6e52;
}
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap Table使用教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
类似资料：
-
本文向大家介绍jquery和css3实现的炫酷时尚的菜单导航，包括了jquery和css3实现的炫酷时尚的菜单导航的使用技巧和注意事项，需要的朋友参考一下 今天为大家带来的是jquery和css3实现的不错的导航菜单。点击列表图表后，内容页面向内移动显示菜单项。当单击关闭菜单按钮时，菜单项隐藏，内容页恢复原位。看下图 源码下载 我们看下实现代码： html代码： css代码： js代码：
-
本文向大家介绍下一代Bootstrap的5个特点 超酷炫！，包括了下一代Bootstrap的5个特点 超酷炫！的使用技巧和注意事项，需要的朋友参考一下 Bootstrap 4的初始版已经发布很久，还是希望大家都可以认识到，这是对这个流行的（可能是最流行的）响应式CSS框架一次重大的彻底整修。该项目创始人，Mark Otto说这次的发布“几乎涉及每一行代码”，这并不是在开玩笑。 1.更轻巧的文件
-
本文向大家介绍twitter-bootstrap 导航栏中的子菜单，包括了twitter-bootstrap 导航栏中的子菜单的使用技巧和注意事项，需要的朋友参考一下 示例
-
本文向大家介绍第一次接触神奇的Bootstrap菜单和导航，包括了第一次接触神奇的Bootstrap菜单和导航的使用技巧和注意事项，需要的朋友参考一下 本篇将主要介绍Bootstrap的菜单、导航。 本篇开始将引入javascript相关文件，如下： <!-- 放置在body标签结尾处，使页面加载速度更快 --> <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --> <
-
本文向大家介绍非常酷炫的Bootstrap图片轮播动画，包括了非常酷炫的Bootstrap图片轮播动画的使用技巧和注意事项，需要的朋友参考一下 对于网站开发者来说，对展示内容增加一个滑动或者是轮播效果的是非常常见的需求。收费和免费的轮播插件多的是不胜枚举。其中很 多提供很多有用的配置选项和动态效果。 很多时候，如果你的项目需要的是一个轻量级的轮播，不需要很多的功能。同时你的项目是采用Bootstr
-
问题内容： 在Bootstrap 4中进行多级下拉的最简单方法是什么？我设法在SO上找到的所有示例过于混乱，或者没有包含在导航中。 我试过只是将一个下拉列表放到一个下拉列表中，但这似乎不起作用。有人可以帮我吗？ 这是我的代码的基本轮廓： 问题答案： 我使用以下CSS和JavaScript。它使用一个额外的类。我用Bootstrap 4 beta测试了它。 它支持多级子菜单。