制作大小可调整的导航菜单
简介
最近出现了一些这样的网站，当用户往下滚动时，顶部的导航菜单会变小或消失，往上滚动时，导航菜单又会变大或出现。这样可以腾出更多的区域显示主要内容，同时也不影响导航菜单的操作。甚至可能会因为导航菜单的变大变小、忽隐忽现引起用户的注意，提示他们是否需要点击导航菜单，进而提高用户体验。今天我们就来制作这样的导航菜单。
浏览器兼容
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE7+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
我们会用到 CSS2 的 display: fiexd 和 CSS3 的 transition 等属性，所以不兼容 IE6，而 IE7 – IE9 无动画效果。
使用方法
1、引入文件
<script src="js/jquery.min.js"></script>
2、HTML
<div class="header large"> <div class="inner"> <h1><a href="//www.dowebok.com/"><img src="images/logo.png" alt="logo"></a></h1> <ul class="nav"> <li><a class="cur" href="//www.dowebok.com/" title="首页">首页</a></li> <li><a href="//www.dowebok.com/code" title="代码">代码</a></li> <li><a href="//www.dowebok.com/material" title="素材">素材</a></li> <li><a href="//www.dowebok.com/template" title="模板">模板</a></li> </ul> </div> </div>
默认是 large 样式，当用户往下滚动一段距离时，把 large 换成 small。
3、css
* {
margin: 0;
padding: 0;
}
.header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #323436;
}
.inner {
width: 1000px;
margin: 0 auto;
overflow: hidden;
zoom: 1;
}
.header h1 {
float: left;
}
.header h1 img {
display: block;
border: 0;
}
.nav {
float: right;
list-style-type: none;
font-family: "Microsoft Yahei";
}
.nav li {
float: left;
margin-left: 5px;
}
.nav a {
float: left;
color: #cecece;
text-decoration: none;
}
.nav a: hover {
background-color: #555;
}
.large .inner {
padding: 20px 0;
}
.large h1 img {
height: 64px;
}
.large .nav {
padding-top: 10px;
}
.large .nav a {
height: 44px;
padding: 0 20px;
line-height: 44px;
font-size: 18px;
}
.small .inner {
padding: 10px 0;
}
.small h1 img {
height: 34px;
}
.small .nav {
padding-top: 3px;
}
.small .nav a {
height: 28px;
padding: 0 10px;
line-height: 28px;
font-size: 14px;
}
.header, .header .inner, .header a, .header img, .header li {
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
large 和 small 分别是变大和变小的样式，最后还有一个动画过度。
4、JavaScript
$(function(){
$(window).on('scroll', function(){
if($(window).scrollTop() > 100){
$('.header').removeClass('large').addClass('small');
} else {
$('.header').removeClass('small').addClass('large');
}
});
});
