zoukankan      html  css  js  c++  java
  • 简易菜单的制作

    为大家提供一种简易的菜单的制作方法,代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="">
        <title></title>
    </head>
    <style>
        body{margin: 0;padding: 0}
        ul li{list-style-type:none;margin: 0px;padding: 0;text-align: right;}
        ul{;padding: 0;background:#eeeeee; 90px;}
        .mm{background:#252525;text-align: center;}
        a{color: #ffffff}
        .mm ul li a{color: blue}
    </style>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".mm>a").click(function(){
                var ulNode = $(this).next("ul");
                //if(ulNode.css("display")=="none"){
                //    ulNode.css("display","block")
                //}else{
                //    ulNode.css("display","none")
                //}
                //ulNode.toggle(0)
                ulNode.slideToggle()
            })
            $(".dmm").hover(function() {
                $(this).children("ul").slideDown();
            },function(){
                $(this).children("ul").slideUp();
            })
        })
    
    </script>
    <body>
        <ul>
            <li class="mm">
                <a href="#">菜单1</a>
                <ul>
                    <li><a href="http://turbo12138.iteye.com/blog/profile">子菜单1</a></li>
                    <li><a href="http://turbo12138.iteye.com/blog/profile">子菜单2</a></li>
                </ul>
            </li>
            <li class="mm">
                <a href="#">菜单2</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                </ul>
            </li>
            <li class="mm">
                <a href="#">菜单3</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                </ul>
            </li>
        </ul>
        <br>
        <br>
        <!--<ul>-->
            <!--<li class="dmm">-->
                <!--<a href="#">菜单1</a>-->
                <!--<ul>-->
                    <!--<li><a href="#">子菜单1</a></li>-->
                    <!--<li><a href="#">子菜单2</a></li>-->
                <!--</ul>-->
            <!--</li>-->
            <!--<li class="dmm">-->
                <!--<a href="#">菜单2</a>-->
                <!--<ul>-->
                    <!--<li><a href="#">子菜单1</a></li>-->
                    <!--<li><a href="#">子菜单2</a></li>-->
                <!--</ul>-->
            <!--</li>-->
            <!--<li class="dmm">-->
                <!--<a href="#">菜单3</a>-->
                <!--<ul>-->
                    <!--<li><a href="#">子菜单1</a></li>-->
                    <!--<li><a href="#">子菜单2</a></li>-->
                <!--</ul>-->
            <!--</li>-->
        <!--</ul>-->
    
    
    </body>
    </html>
  • 相关阅读:
    一套测试题
    静态成员与友元
    grids2742
    [转]CentOS添加第三方yum源
    Linux软件包管理
    类的基本概念
    2012百度实习生笔试题(c++方向)
    anyview 数据结构习题集 第1章答案
    Linux常用命令
    anyview 数据结构习题集 第2章答案
  • 原文地址:https://www.cnblogs.com/turbo12138/p/5720819.html
Copyright © 2011-2022 走看看