根据子导航高度而改变的导航

Posted 千里皓月

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了根据子导航高度而改变的导航相关的知识,希望对你有一定的参考价值。

今天看到一个比较有趣的效果,非常简单,就是子导航的高度不是固定的,当鼠标移上去以后导航的高度会随着子导航的内容改变而发生变化,不多说了,我做了个demo,如下

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据子导航高度而改变的导航</title>
<style>
*{margin: 0;padding: 0;list-style: none;text-decoration: none; font-size: 12px;font-family: "yahei"}
body{background: url(‘img/bg.jpg‘) no-repeat;}
#header{height: 74px;}
.logo{float: left; width: 150px;height: 74px;margin-left: 20px;}
.logo img{width: 100%;height: 74px;}
.nav{float: right;margin-right: 20px;}
.nav li{float: left; position: relative;}
.nav a{display: inline-block; line-height: 74px;padding: 0 12px;color: #999;font-weight: bold;transition:all 0.5s;}
.nav a:hover{color: #fff;}
.child{width: 140px; position: absolute;left: 0;top: 60px;display: none;}
.child a{line-height: 20px;display: inline-block; float: left; width: 100%;height: 20px;}
.bg{width: 100%;height: 74px;background: #000; border-bottom: 1px solid #000;opacity: 0.8;z-index: -1;position: absolute;top: 0;left: 0;}
</style>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
    $(.nav li).hover(function(){
        $(this).children(a).eq(0).css({color:#fff});
        $(.bg).stop().animate({
            height:74+$(this).children(.child).height()
        });
        $(this).children(div).stop(false,true).slideDown();
        
    },function(){
        $(this).children(a).eq(0).css({color:#999})
        $(.bg).stop().animate({
            height:74
        });
        $(this).children(div).stop(false,true).slideUp();
        
    });
});
</script>
</head>
<body>
<div id="header">
    <div class="logo">
        <a href="#"><img src="img/0.jpg" alt=""></a>
    </div>
    <div class="nav">
        <ul>
            <li>
                <a href="#">男人范着装</a>
                <div class="child">
                    <a href="#">男人装 home</a>
                    <a href="#">男人装 selection</a>
                    <a href="#">男人装 uniform</a>
                    <a href="#">男人装 bsg</a>
                </div>
            </li>
            <li>
                <a href="#">优型工艺</a>
                <div class="child">
                    <a href="#">优型五大维度</a>
                    <a href="#">衬衫</a>
                    <a href="#">西服</a>
                </div>
            </li>
            <li>
                <a href="#">活出男人味</a>
                <div class="child">
                    <a href="#">男人范大片</a>
                    <a href="#">男人范杂志</a>
                </div>
            </li>
            <li>
                <a href="#">男人范俱乐部</a>
                <div class="child">
                    <a href="#">vip</a>
                    <a href="#">最新活动</a>
                    <a href="#">问卷调查</a>
                    <a href="#">问卷调查</a>
                    <a href="#">问卷调查</a>

                </div>
            </li>
            <li>
                <a href="#">招商加盟</a>
                <div class="child">
                    <a href="#">加盟支持</a>
                    <a href="#">加盟流程</a>
                </div>
            </li>
        </ul>
    </div>
    <div class="bg"></div>
</div>
</body>
</html>

 

以上是关于根据子导航高度而改变的导航的主要内容,如果未能解决你的问题,请参考以下文章

带有活动和子片段的导航抽屉

导航抽屉backstack,如何让actionbar标题在点击后随片段改变

颤振改变底部导航栏高度

隐藏子屏幕/片段的android底部导航视图

如何使向上按钮返回而不是打开导航抽屉

BootStrap有用代码片段(持续总结)