简易菜单的制作

最新推荐文章于 2024-07-30 10:56:44 发布

weixin_30673611

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量98

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/turbo12138/p/5720819.html

版权

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

<!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;width: 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>

转载于:https://www.cnblogs.com/turbo12138/p/5720819.html

weixin_30673611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易菜单的制作

为大家提供一种简易的菜单的制作方法，代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href=""> <title>&l...
复制链接

扫一扫