竖导航下拉菜单、多级下拉菜单

简单的下拉菜单
一、HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>menu</title>
        <link rel="stylesheet" type="text/css" href="menu.css" />
        <script src="../jquery.js" type="text/javascript"></script>
        <script src="menu.js" type="text/javascript"></script>
    </head>
    <body>
    <span>more</span>
    <ul>
        <li><a href="#">军事</a></li>
        <li><a href="#">游戏</a></li>
        <li><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>
    </body>
</html>

二、CSS

/* 
* @Author: Marte
* @Date:   2017-05-24 09:04:34
* @Last Modified by:   Marte
* @Last Modified time: 2017-05-24 10:59:20
*/
*{
    margin: 0;
    padding: 0;
}
img{
    border:0;
}
ol, ul ,li{list-style: none;} 
body{
    margin: 50px;
}
a{
    text-decoration: none;
    color: red;
}
ul{
    border: 3px solid #abcdef;
    width: 200px;
    display: none;
}
span{
    cursor: pointer;
}

三、js

/* 
* @Author: Marte
* @Date:   2017-05-24 09:05:10
* @Last Modified by:   Marte
* @Last Modified time: 2017-05-24 09:53:28
*/

$(document).ready(function(){
    var opt = $('span');
    var oContent = $('ul');
    opt.click(function(){
        // oContent.show();
        oContent.slideToggle();
    });
});

这里写图片描述

竖导航菜单
一、HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="menu.css" />
        <script src="../jquery.js" type="text/javascript"></script>
        <script src="menu.js" type="text/javascript"></script>
        <script src="jquery.easing.1.3.js" type="text/javascript"></script>
    </head>
    <body style="background:#302b23">
    <h3 id="one">kiwis</h3>
    <ul style="display:none">
        <li><a href="#">1111</a></li>
        <li><a href="#">1111</a></li>
        <li><a href="#">1111</a></li>
        <li><a href="#">1111</a></li>
    </ul>
    <h3 id="one">Oranges</h3>
    <ul style="display:none">
        <li><a href="#">2222</a></li>
        <li><a href="#">2222</a></li>
        <li><a href="#">2222</a></li>
        <li><a href="#">2222</a></li>
    </ul>
    <h3 id="one">Grapes</h3>
    <ul style="display:none">
        <li><a href="#">3333</a></li>
        <li><a href="#">3333</a></li>
        <li><a href="#">3333</a></li>
        <li><a href="#">3333</a></li>
    </ul>
    </body>
</html>

二、CSS

/* 
* @Author: Marte
* @Date:   2017-05-24 10:21:02
* @Last Modified by:   Marte
* @Last Modified time: 2017-05-24 14:10:53
*/
*{
    margin: 0;
    padding: 0;
}
img{
    border:0;
}
ol, ul ,li{list-style: none;} 
body{
    margin: 50px;
    color: #cccccc;
    position: absolute;
    padding-left:450px;
}
a{
    text-decoration: none;
    color: blue;
}
a:hover{
    text-decoration: underline;
}
h3{
    cursor: pointer;
}

ul li{
    display: block;
    background-color: #373128;
    border: 1px solid #40392C;
    color: #CCCCCC;
    margin: 5px 0;
    padding: 4px 18px;
}
#one{
    display:block;
    width: 200px;
    padding:10px 20px 0;
    margin-top: 10px;
    height: 34px;
    font-family: Arial, Helvetica, sans-serif;
    background: url(../2/green.png);
    outline: none;
}

三、js

/* 
* @Author: Marte
* @Date:   2017-05-24 10:21:10
* @Last Modified by:   Marte
* @Last Modified time: 2017-05-24 14:15:37
*/

$(document).ready(function(){
    $.easing.def = 'easeOutElastic'
    var opt = $('h3');
    opt.click(function(){
    $(this).next('ul').slideToggle().siblings('ul').slideUp();
    });
});

这里写图片描述
3. 多级下拉菜单
一、HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="menu.css" />
        <script src="../jquery.js" type="text/javascript"></script>
        <script src="menu.js" type="text/javascript"></script>
    </head>
    <body>
    <ul>
        <li class="menuLevel1 menu">
          <span>一级菜单</span>
           <ul class="hide">
               <li class="menuLevel2 menu">
                   <span>二级菜单</span>
                     <ul class="hide">
                         <li class="menuLevel3 menu">
                             <span>三级菜单</span>
                               <ul class="hide">
                                   <li class="menuLevel4 menu">
                                       <span>四级菜单</span>
                                        <ul class="hide">
                                            <li class="menuLevel5 menu">
                                                <span>五级菜单</span>
                                            </li>
                                        </ul>
                                   </li>
                               </ul>
                         </li>
                     </ul>
               </li>
           </ul>
        </li>
    </ul>




    </body>
</html>

二、CSS

/* 
* @Author: Marte
* @Date:   2017-05-24 14:16:01
* @Last Modified by:   Marte
* @Last Modified time: 2017-05-24 15:23:45
*/
*{
    margin: 0;
    padding: 0;
}
img{
    border:0;
}
ol, ul ,li{list-style: none;} 
body{
    margin: 50px;
    position: relative;
}
.hide{
    display: block;
}
.menu{
    cursor: pointer;

}

三、js

/* 
* @Author: Marte
* @Date:   2017-05-24 14:16:10
* @Last Modified by:   Marte
* @Last Modified time: 2017-05-24 15:19:20
*/

$(document).ready(function(){
    var menu = $('.menu');
    menu.hover(function(){
        $(this).children('ul').show();
        },function(){
        $(this).children('ul').hide();
    });
});

这里写图片描述

竖导航下拉菜单、多级下拉菜单

猜你喜欢