一个炫酷的一个炫酷的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>