下拉菜单实现方式一

实现一个最简单的下拉菜单

由于例子比较简单，所以用文本编辑器写了，nodepad++是个不错的选择，有颜色标注还有智能提示，很好用。

先写一个html标签基本结构

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>

<head>
<style></style>
<script src="jquery-1.7.2.js" type="text/javascript" ></script>
<script></script>
</head>
<body>

</body>
</html>

 

接下来写一个列表

<body>
<ul class="menu">
    <li><a href="#">一级菜单</a>
        <ul>
            <li><a href="#">二级菜单A</a></li>
            <li><a href="#">二级菜单B</a></li>
        </ul>
    </li>
</ul>
</body>

 

 

然后接下来写css清除一些无用的东西

*{margin:0; padding:0;border:0}
li{list-style-type:none}

加上一些边框之类

.menu li{ border:1px solid #cccccc; width:180px; height:30px; line-height:30px; background-color:#f8f8f8 }

然后让二级菜单隐藏掉

.menu li ul{ position:absolute; left:-999em}

 

再写一个二级菜单显示的样式

.menu li.on ul{  left:auto}

 

这样用js来控制on就可以实现下拉菜单了

$(function(){
    $(".menu li").mouseover(function(){
        $(this).addClass("on");
    })
    $(".menu li").mouseout(function(){
        $(this).removeClass("on");
    })
})

 

posted @ 2014-09-23 23:44  飞翔吧菜鸟  阅读(137)  评论(0)  编辑  收藏  举报