prefacio
Esta serie se implementa con un control deslizante de la barra de navegación, como efecto de la figura
Miro a otros sitios, por el contrario todavía se siente como el sencillo y elegante, y por lo tanto, presione ligeramente hacia abajo.
capa de diseño
En primer lugar, he creado una nueva navigator1.html, primero con div diseño, de la siguiente manera
<!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>
Después de la preparación del código anterior, los efectos siguiente
La cifra ha sido muy marcada, ya que vemos la respuesta. Las secciones anteriores de que ya hemos hablado de la posición.
Agregar la navegación
El siguiente es el contenido entero 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>
bar Añadido navegación de arriba, y la eliminación de la capa de color, el efecto como en la figura.
epílogo
Esta sección de código para lograr estilo mucho, pero que será difícil, difícil persona no, usar jQuery para alcanzar la siguiente sección sigue la diapositiva del ratón
