导航菜单

2018-06-24 01:27:40来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、纵向菜单



<nav id="nav1"> <ul> <li><a href="#">index</a></li> <li><a href="#">index22</a></li> <li><a href="#">index33</a></li> <li><a href="#">index44</a></li> </ul> </nav> <style> *{margin: 0;padding: 0;} nav{margin: 150px;border: 1px solid darkcyan;width:130px;text-align: center; box-shadow: 10px 10px 10px darkblue; background: khaki;} li{list-style: none;padding: 8px ;font-size: 20px;} li+li{border-top: 1px solid red;} a{text-decoration: none;color: #000;display: block;padding: 3px 10px;}//display: block用于扩展填充父元素将可点击区域扩到整个行 a:hover{color: #069;} </style>

效果图:

 

 二、横向菜单

<nav id="nav1">
    
    <ul>
        <li><a href="#">index</a></li>
         
        <li><a href="#">index22</a></li>
         
        <li><a href="#">index33</a></li>
    
        <li><a href="#">index44</a></li>
        
    </ul>
    
    
</nav>

<style>
    *{margin: 0;padding: 0;}
    nav{margin:  150px;width:380px;background: khaki;}
    ul{overflow: hidden}//包围浮动的li元素
    
        li{list-style: none;padding: 8px ;font-size: 20px;float: left;}
        li+li{border-left: 1px solid red;}
        a{text-decoration: none;color: #000;padding: 0px  10px;display: block;}
        a:hover{color: #069;}
    
</style>

效果图:

三、下拉菜单

<nav id="nav1">
    
    <ul>
        <li><a href="#">Index</a></li>
         
        <li><a href="#">Index22</a></li>
         
        <li><a href="#">Index33</a>
            
            <ul>
                
                <li><a href="#">jq</a></li>
                
                <li><a href="#">web</a>
                    <ul>
                        <li><a href="#">html</a></li>
                        <li><a href="#">js</a></li>
                        <li><a href="#">css</a></li>
                    </ul>
                </li>
            
                
                <li><a href="#">java</a></li>
            </ul>
        </li>
    
        <li><a href="#">Index44</a></li>
        
    </ul>
    
    
</nav>

<style>
    *{margin: 0;padding: 0;}
    #nav1{margin:  150px;font-size: 20px;}
    #nav1 a{
        padding:.2em 1em;text-decoration: none;display: block;color: darkcyan;background-color: #eee}
    #nav1 ul{float: left;}
    #nav1 ul li{float: left;list-style: none;position: relative;}
    #nav1 li a{display: block;border-right: solid;background-clip: padding-box;}
    #nav1 li:last-child a{border-right: none;}
    #nav1 li ul {display: none;}
    

    #nav1 li ul{width: 9em;}
    
    #nav1 li li a{border-right: none;border-top: solid;}
    
    #nav1 li  ul{display: block;position: absolute;left: 0;top: 100%;}
    #nav1 li li{float: none;}
    
    #nav1 li li ul{display: none;}
    #nav1 li ul{display: none;position: absolute;left: 0;top: 100%;}
    #nav1 li:hover>ul{display: block;}
    
    #nav1 li li ul{position: absolute;left: 100%;top: 0;}
</style>

效果图:

 纵向的下拉菜单

 

给最外层容器nav添加额外的一个类,vertical成为<nav id="nav1" class="vertical">。。。。<nav>

然后添加如下的css规则:

   前面的代码一样省略了····额外代码如下:

   #nav1.vertical{width: 8em;} #nav1.vertical ul,#nav1.vertical li{
float: none;} #nav1.vertical li ul{left: 100%;top:0} #nav1.vertical li a{border-right: none;border-top: solid;}

效果图:

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css雪碧技术的用法。

下一篇:html5中cookie介绍,封装以及添加,获取,删除