本帖最后由 李维强-15级 于 2017-4-4 02:44 编辑
写这个样式，是我逛天猫的时候，华为专区 https://www.vmall.com/huawei，看到的导航栏布局，然后F12看人家是怎么布局，怎么控制的，然后研究了一阵才写出这个来，主要是为了练习，因为导航哪里都可以用，吃透一个导航样式布局，管用很久。
效果如下：
下面是页面代码
[HTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode <div class="nav-main">
<div class="layout">
<nav class="naver">
<ul id="naver-list">
<li id="huawei1" class="" >
<a href="http://www.baidu.com"><span>联想专区</span></a>
</li>
<li id="huawei2" class="" >
<a href="http://www.baidu.com" ><span>华为专区111</span></a>
</li>
<li id="huawei3" class="" >
<a href="http://www.baidu.com"><span>小米专区</span></a>
</li>
<li id="huawei4" class="" >
<a href="http://www.baidu.com"><span>OPPO专区</span></a>
</li>
</ul>
<div class="list-category">
@*这个里面填内容*@
</div>
</nav>
</div>
</div>
<script type="text/javascript">
$("#naver-list a").hover(function () {
$(this).addClass("hover");
var IdValue = $(this).parent().eq(0).attr("id");
var listCatagWidth = $("div #" + IdValue).width();
$("div .list-category").css("width", listCatagWidth);
$("div .list-category").css("left", $(this).parent().eq(0).position().left);
$("div .list-category").css("display", "block");
}, function () {
$(this).removeClass("hover");
$("div .list-category").css("display", "none");
});
</script>
下面是CSS
[CSS] syntaxhighlighter_viewsource syntaxhighlighter_copycode body {
margin:0;
font: 12px/1.5 Arial,Helvetica,sans-serif;
}
html {
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0
}
a{
cursor: pointer;
}
.nav-main{
background-color: #ca151e;
min-width: 1200px;
height: 40px;
font-family: 微软雅黑;
padding:0;
margin: 0;
width:100%;
}
.layout{
position:relative;
display: table;
margin: 0 auto;
width: 1200px;
padding:0;
}
.layout::before, .layout::after {
content: "";
display: table;
}
.naver{
position: absolute;
top: 0;
left: 240px;
width: 960px;
font-family: 微软雅黑;
}
.naver ul{
list-style: none;
margin: 0;
padding: 0;
}
.naver li{
float:left;
}
.naver a{
display: inline-block;
*display: inline;
*zoom: 1;
height: 40px;
line-height: 39px;
font-size: 14px;
color: #FFF;
padding: 0 30px;
white-space: nowrap;
text-align: center;
text-decoration: none;
}
.naver a span {
cursor: pointer;
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
z-index: 410;
}
.naver li .hover{
background-color: #a21118;
}
.layout .list-category{
position: absolute;
top:40px;
left:240px;
/*width:110px; 先要设置 才在没有hover的时候看得到效果*/
height:250px;
background-color:rgb(215, 197, 197);
display:none;
}
很多时候就是调试CSS，达到目的，CSS本身自带软动画
jq里面的.position()和.offset()的区别 ，前者相对于夫级元素，后者相对于窗口
搞清楚，margin，border，padding分别是元素的哪3层。。。
| 
发表于 2017-4-4 01:55:19
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
楼主