使用bootstrap制作网站导航
除了制作选项卡和下拉菜单,bootstrap还能编写出美观的网站导航栏
一、仿知乎导航栏
<body>
<nav class="navbar navbar-default navbar-fixed-top"> <!-- navbar-default 指导航栏的默认样式 navbar-fixed-top 指导航栏在顶部固定定位 --> <div class=container> <!-- 将contianer放在 nav标签内可以保证导航栏在 左右方向上覆盖住整个窗口 --> <div class="navbar-header"> <a href="#" class="navbar-brand"><img src="img/zhihulogo.png" /></a> <!-- logo应该放在类名为 navbar-header 的div元素里 --> </div> <form class="navbar-form navbar-left"> <!-- navbar-left 指元素向左浮动 --> <div class="input-group"> <input type="text" class="form-control" style="320px" placeholder="search your xxx"/> <span class="input-group-addon"><a href="#"><span class="glyphicon glyphicon-search"></span></a></span> </div> </form> <ul class="nav navbar-nav navbar-left"> <li><a href="#">首页</a></li> <li><a href="#">话题</a></li> <li><a href="#">发现</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span>注册知乎</a></li> <li><a href="#">登录</a></li> </ul> <button class="btn btn-primary navbar-btn navbar-right">提问</button> </div> </nav> </body>
<style>
body{margin-top: 50px;}
.myBtnStyle .dropdown-menu span{
margin:5px;
}
.myBtnStyle .dropdown-menu {
animation: 0.5s linear fadeIn;
}
@keyframes fadeIn {
0%{opacity:0;transform: translateY(-20);}
100%{opacity: 1;transform: translateY(0);}
}
tab-content {
border:1px solid #999; border-top: none;border-radius: 0 0 5px 5px;
}
.container {
width: 960px
}
.navbar-default{
background: linear-gradient(to bottom,#086ed5, #055db5) !important;
}
.navbar-header{
margin-top: -3px;
}
.navbar-nav a {
color:snow !important;
}
</style>
样式如图所示
二、响应式导航
方便移动端,在窗口缩小的时候,可以将导航栏中的内容隐藏,点击导航栏中按钮后展开
<body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse"> //窗口缩小后显示的按钮也放在navbar-header中,和logo元素 navbar-brand 类同级; <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> //用三个icon-bar做出的按钮,三道杠,每个span各代表一条杠 </button> <a href="#" class="navbar-brand">logo</a> </div> <div class="collapse navbar-collapse" id="myCollapse"> //将需要隐藏的内容放入collapse,设置一个id,和上面的data-target关联 <ul class="nav navbar-nav"> <li><a href="#a">第一个</a></li> <li><a href="#b">第二个</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">第三个 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#c">child1</a></li> <li><a href="#d">child2</a></li> </ul> </li> </ul> </div> </div> </nav> </body>
如图:
三、滚动监听导航
对于比较长的网页,可以做出导航栏内元素和网页内容位置相对应的效果
<style> body{padding-top: 50px;} //因为导航栏固定定位,所以给内容一个paddingTop让导航栏不挡住网页内容 body{position: relative;height: 2000px;} //body需要相对定位 .pos{margin-bottom: 500px;padding-top: 50px;} //填充内容 无实际意义 </style> </head> <body data-spy="scroll" data-target="#myNavbar" data-offset="200"> //用data-spy="scroll" 来设置滚动监听, data-offset是用来调整元素对应的相应位置,对该数值尝试做出调整就可以体会到其作用 <nav id="myNavbar" class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">logo</a> </div> <div id="myCollapse" class="navbar-collapse"> //此处复制了上面部分的代码,collapse这里可以忽略 - -! <ul class="nav navbar-nav"> <li><a href="#a">first</a></li> //href 和 需要对应的位置的元素id 要对应 <li><a href="#b">second</a></li> <li><a href="#c">third</a></li> </ul> </div> </div> </nav> <div id="a" class="pos">aaaa</div> <div id="b" class="pos">bbbb</div> <div id="c" class="pos">cccc</div> </body>