1、网页导航条特效代码：基于CSS和jQuery实现的导航条特效，其目的是使网站访客更便捷地访问网站，同时实现网页内容的自动排版。其代码内容如下：
CSS代码：
<style>
/* 导航条特效 */
ul.navbar {
list-style-type:none;
padding:0;
margin:0;
position:relative;
}
ul.navbar li {
float:right;
}
ul.navbar li a {
display:block;
width:120px;
text-align:center;
background:#191919;
color:#fff;
font-size:20px;
padding:10px;
text-decoration:none;
border-right: 1px solid #e2e2e2;
box-shadow: 0 -3px #191919 inset;
transition: all 0.2s linear;
position:relative;
}
ul.navbar li a:hover {
background:#464646;
color:#e2e2e2;
border-right: 1px solid #e2e2e2;
box-shadow: 0 2px #464646 inset;
}
</style>
jQuery代码：
<script>
$(window).on(\"load resize scroll\", function() {
var window_width = $(window).width();
if (window_width< 800) {
$(\".navbar li a\")
.css(\"width\", window_width - 10 +\"px\")
.mouseenter(function() {
$(this).css({
\"box-shadow\": \"0 2px #191919 inset\",
\"transition\": \"all linear 0.2s\"
});
})
.mouseleave(function() {
$(this).css({
\"box-shadow\": \"0 0 #191919 inset\",
\"transition\": \"all linear 0.2s\"
});
});
};
});
二、网页导航条特效代码用法
1.网页导航条特效代码用途：
网页导航条特效代码可以实现在浏览网页时导航条自动隐藏和显示功能，在用户滚动屏幕的时候，可以自动让导航条往下隐藏，而在用户向上滚动屏幕的时候，可以实现导航条自动显示，且伴随着动画效果，是用户体验良好的一种设计方案，能给用户带来不一样的浏览体验。
2.网页导航条特效代码：
该特效由CSS样式和JavaScript脚本技术构成，具体代码如下：
CSS样式：
```
nav{
display:block;
position：fixed;
top:0;
left:0;
right:0;
background-color：#f5f5;
}
```
JavaScript脚本：
```
window.onload = function(){
\tvar nav = document.getElementById( av);
\tvar lastScrollTop = 0;
\twindow.addEventListener(scroll,function(){
\t\tvar st = window.pageYOffset || document.documentElement.scrollTop;
\t\tif(st >lastScrollTop){ // 页面向下滚动，导航隐藏
\t\t\tnav.style.transform = \"translateY(-100%)\";
\t\t}else{ // 页面向上滚动，导航显示
\t\t\tnav.style.transform = \"translateY(0)\";
\t\t}
\t\tlastScrollTop = st;
\t})
}
```
另外，也可以使用jQuery实现，具体jQuery代码如下：
```
$(window).scroll(function() {
if ($(window).scrollTop() >0) {
$( av).fadeOut();
} else {
$( av).fadeIn();
}
});
```
3.网页导航条特效实施步骤：
（1） 在网页中添加导航条，并使用CSS进行其样式定义，如定义它的位置等；
（2）根据上述步骤所定义的CSS和JavaScript或jQuery代码，在该网页中引入，以便能使网页导航条获得自动隐藏和显示功能；
（3）测试网页，检查所定义的代码及其结果，确保网页通过浏览或者滚动的时候的导航条的固定显示和隐藏的功能实现正常，从而使得网页的设计有效实现。
4.设计思路：
由于网页导航条特效代码需要实现在用户滚动或浏览页面的时候自动隐藏和显示，因此，首先需要使用CSS样式定义导航条的位置，使得它总是保持在浏览器窗口的上部；之后，通过JavaScript或jQuery代码实现当用户滚动页面的时候，自动让导航条往下隐藏；在用户向上滚动页面的时候，让导航条可以自动显示，且伴随着动画效果，为用户提供不一样的浏览体验。
