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

来源：互联网发布：codeblock mac 编辑：程序博客网时间：2024/05/03 00:52

简单的下拉菜单
一、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();    });});

这里写图片描述

阅读全文

0 0