Foreword
This series is implemented with a navigation bar slider, FIG effect as
I look at other sites, by contrast still feel like the simple and elegant, and thus push lightly down.
Layout layer
First, I created a new navigator1.html, first with div layout, as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑动条导航栏</title>
<style type="text/css">
body{margin: 0; }
ul, li{margin: 0; padding: 0;}
a{text-decoration: none;}
.banner{
width: 100%;
height: 70px;
background-color: yellow;
}
.nav-box{
width: 50%;
float: right;
position: relative;
top: 40px;
background-color: darkgray;
}
.nav-box ul{
list-style: none;
}
.nav-box ul li{
float: left;
font-size: 14px;
font-family: "微软雅黑";
height: 30px;
line-height: 30px;
padding: 0 12px;
background-color: #F5F5F5;
}
</style>
</head>
<body>
<div class="banner" >
<div class="nav-box">
<ul>
<li class="cur"><a href="#">首页</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">商务合作</a></li>
<li><a href="#">下载专区</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</div>
</body>
</html>
After preparation of the above code, the following effects
The figure has been highly marked, already we see the answer. The previous sections of which have already talked about the position.
Add navigation
The following is the entire contents navigator1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑动条导航栏</title>
<style type="text/css">
body{margin: 0; }
ul, li{margin: 0; padding: 0;}
a{text-decoration: none;}
.banner{
width: 100%;
height: 70px;
/* background-color: yellow;*/
}
.nav-box{
width: 50%;
float: right;
position: relative;
top: 40px;
/*background-color: darkgray;*/
}
.nav-box ul{
list-style: none;
}
.nav-box ul li{
float: left;
font-size: 14px;
font-family: "微软雅黑";
height: 30px;
line-height: 30px;
padding: 0 12px;
/*background-color: #F5F5F5;*/
}
.nav-box .nav-line {
background: none repeat scroll 0 0 #35C4FD;
bottom: 0;
font-size: 0;
height: 2px;
left: 0;
line-height: 2px;
position: absolute;
width: 52px;
}
</style>
</head>
<body>
<div class="banner" >
<div class="nav-box">
<ul>
<li class="cur"><a href="#">首页</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">商务合作</a></li>
<li><a href="#">下载专区</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<div class="nav-line" ></div>
</div>
</div>
</body>
</html>
Added navigation bar above, and removing the color layer, the effect as in FIG.
Epilogue
This section of code to achieve style much, but who will be difficult, difficult person would not, use jQuery to achieve the following section follow the mouse slide
