平安夜分享2款下拉菜单（CSS版本和JQuery版本）

2011-12-24 17:28 随风浪迹天涯阅读(962) 评论(3) 编辑收藏举报

昨天有一个同事，叫我帮忙，说他需要一个下拉菜单，叫我帮他整个出来。我说没问题啊，中午花了点时间，然后就给它弄了一个CSS样式的（这个这个是我以前弄好的，一直收藏着，就拿出来改了改给他了）。

可是，昨天下班的时候，他说他还想看一看jquery实现的下拉菜单，呵呵，我说你老兄可真够贪心的，不过既然人家都说了，我昨天晚上就整了一个jquery的下拉菜单。其实，2个版本都很简单。

希望对各位看官有帮助。

HTML coed：

2个都运用下面的这个HTML代码作为演示实例：

<div id="div" class="menu">
        <ul>
            <li><a class="aa" href="">首页</a>
                <ul>
                    <li><a href="#" title="">注册</a></li>
                    <li><a href="" title="">登录</a></li>
                    <li><a href="" title="">注销</a></li>
                    <li><a href="" title="">行业新闻</a></li>
                </ul>
            </li>
            <li><a class="aa" href="">商务中心</a>
                <ul>
                    <li><a href="" title="">客户首单</a></li>
                    <li><a href="" title="">新建任务单</a></li>
                    <li><a href="" title="">客户单跟踪</a></li>
                    <li><a href="" title="">历史往来记录</a></li>
                    <li><a href="" title="">业务签收</a></li>
                </ul>
            </li>
            <li><a class="aa" href="">配送中心</a>
                <ul>
                    <li><a href="" title="">新建配送单</a></li>
                    <li><a href="" title="">车辆检查</a></li>
                    <li><a href="" title="">业务跟踪</a></li>
                </ul>
            </li>
            <li><a class="aa" href="">运输中心</a>
                <ul>
                    <li><a href="" title="">新建派车单</a></li>
                    <li><a href="" title="">车辆跟踪</a></li>
                </ul>
            </li>
            <li><a class="aa" href="">系统维护</a>
                <ul>
                    <li><a href="" title="">城市数据</a></li>
                    <li><a href="" title="">集团公司信息</a></li>
                    <li><a href="" title="">部门信息</a></li>
                    <li><a href="" title="">员工信息</a></li>
                    <li><a href="" title="">仓库数据</a></li>
                </ul>
            </li>
            <li><a class="aa" href="">我的任务</a>
                <ul>
                    <li><a href="" title="Example one">我提交的任务</a></li>
                    <li><a href="" title="">我收到的任务</a></li>
                    <li><a href="" title="">被退回的任务</a></li>
                </ul>
            </li>
            <li><a class="aa" href="">技术支持</a>
                <ul>
                    <li><a href="" title="">技术架构</a></li>
                    <li><a href="" title="">应用说明</a></li>
                    <li><a href="" title="">关于我们</a></li>
                </ul>
            </li>
        </ul>
        <div class="clear">
        </div>
    </div>

　　1.JQuery版本的下来菜单

<style type="text/css">
      *{ font-size:12px;}
      a{ color:White; text-decoration:none;}
      ul{margin:0;padding:0;}
      ul li{list-style:none;}
      #div{width:960px;height:28px;}
      #div ul li{float:left;height:28px;display:inline;line-height:28px;position:relative; margin-left:10px; left:-10px; cursor:pointer;}   
      #div ul li ul{position:absolute;z-index:99;display:none;top:30px;width:90px;}
      #div ul li ul li{display:block;width:68px;height:26px;background-color:red;}
      #div ul li a.aa{color:red;text-decoration:none; border:1px solid balck;width:120px; padding:10px; background-color:#b3ab79;}
    </style>

　　上面的对一些的基本的CSS一些修饰，一看就懂。其实，上面我觉得最重要的是 #div ul li这里的是需要设置position为相对位置或者是绝对定位，比如我这里用的是：position:relative。

可能有些人有郁闷为什么需要这个呢？其实，这个主要是为了让第二个ul里面的子菜单能定位到它所需要的位置。就像上面的实例里用top和left来进行位置的定位。

我在园子里的一篇文章，如果不懂的可以看看：position知识

$(function () {
            $("#div ul li").hover(function () {
                $(this).css("background", "#dfc184").children("ul").slideDown();
            }, function () {
                $(this).css("background", "#fff").children("ul").slideUp();
            })
            $("#div ul li ul li").hover(function () {
                $(this).css("backgroundColor", "#b3ab79");
            }, function () {
                $(this).css("backgroundColor", "red");
            })
        })

　　上面的是核心的jquery代码，其实很好理解，需要理解的也就是 hover这个事件。如果需要进一步了解jquery事件的，可以看我的另一片文章：《JQuery 动画效果集锦》。

hover事件说到底，就是在2个事件进行来回的切换。就OK了，这样就实现了，但把鼠标移动到子菜单的时候，变底色的效果了。

很简单吧。

2.CSS 下拉子菜单

这个，好像我发表过了，不管了，我就在发一次了，把代码贴上，如果有不懂的看管，可以给我留言，我们在讨论。

<style type="text/css">
        .menu{font-family: 宋体, Arial, Helvetica, sans-serif; width: 750px; margin: 0; margin: 5px 0 50px 0;} 
        .menu ul{padding: 0; margin: 0; list-style-type: none;}
        .menu ul li{float: left; position: relative;} 
        .menu ul li a, .menu ul li a:visited{display: block; text-align: center; text-decoration: none; width: 104px; height: 30px; color: #000; border: 1px solid #fff; border-width: 1px 1px 0 0; background: #c9c9a7; line-height: 30px; font-size: 11px;} 
        .menu ul li ul{display: none;} 
        .menu ul li:hover a{color: #fff; background: #b3ab79;}
        .menu ul li:hover ul{display: block; position: absolute; top: 31px; left: 0; width: 105px;}
        .menu ul li:hover ul li a{display: block; background: #faeec7; color: #000;} 
        .menu ul li:hover ul li a:hover{background: #dfc184; color: #000;}
    </style>

　上面需要理解的是 CSS中的伪类，如果不懂伪类的可以看看我给你们找的资料，很好理解。

伪类参考资料：

1.CSS 伪类

2.WEB标准学习路程之"CSS"：10.伪类选择符

我不怎么知道发布发布我的压缩文件。。。知道的望说一句。

努力加载评论中...

刷新页面返回顶部

浪迹天涯

平安夜分享2款下拉菜单（CSS版本和JQuery版本）

About