下拉菜单的制作

一 css+html制作下拉菜单

a 首先应该制作好静态页面。

b 使用css控制下拉菜单的位置、是否隐藏

制作代码如下：

先在前端乱煮菜单下加入一个简单的二级菜单。

 1 <div class="nav_horizontal">
 2     <ul>
 3         <li><a href="">首页</a></li>
 4             <li><a href="">前端乱煮</a>
 5                <ul>
 6                   <li><a href="#">html/css</a></li>
 7                   <li><a href="#">JavaScript</a></li>
 8                   <li><a href="#">jQuery</a></li>
 9                </ul>
10             </li>
11         <li><a href="">阳光小厨</a></li>
12         <li><a href="">光影天地</a></li>
13     </ul>
14 </div>
15 <!--nav_horizontal end-->

利用css对一级菜单设置样式

 1 .nav_horizontal ul{
 2     width:100%;
 3     height: 60px;
 4     list-style:none;
 5 }
 6 
 7 .nav_horizontal ul li{
 8     line-height:60px;
 9     float:left;
10     text-align:center;
11         position:relative;
12 
13 }
14 
15 .nav_horizontal a{
16     display:block;
17     padding:0px 30px;
18     height:60px;
19 }
20 
21 .nav_horizontal a:hover{
22        color:#fff
23        text-decoration:none;
24        background:#000;  
25 }

使用css对二级菜单设置样式

.nav_horizontal ul li ul{
    position:absolute;
    left:0px;
    top:60px;
    display:none;
}

.nav_horizontal ul li ul li{
    float:none;
    background:#262626;
    width:160px;
}

.nav_horizontal ul li ul li a{
    width:100px;
}

.nav_horizontal ul li:hover ul{
    display:block;
}

注意：

上述制作二级菜单的一些小技巧：

（1）使菜单内容水平居中，使用text-align:center;竖直居中：line-height:60px(其中60px与父元素的高度相同)

（2）使一级菜单的内容宽度自适应，设置a标签的padding为：0 30px(不规定宽度)

（3）使二级菜单位置固定在合适位置，将它的父级元素的位置设置为relative，将二级菜单的ul标签设置为absolute，再用left和top属性来固定菜单的位置。

（4）当鼠标移到一级菜单合适位置再显示二级菜单，在二级菜单的ul标签里设置display属性为none，然后设置li hover ul{display:block}当鼠标移到它的父级标签时，将二级菜单显示出来。

2 js实现下拉菜单

主要用到了两个事件，onmouseover和onmouseout，当鼠标经过时，显示菜单，当鼠标离开时，隐藏菜单。

 <div class="nav_horizontal">
     <ul>
         <li><a href="">首页</a></li>
             <li onmouseover="show(this)" onmouseout(this)><a href="">前端乱煮</a>
                <ul>
                   <li><a href="#">html/css</a></li>
                   <li><a href="#">JavaScript</a></li>
                   <li><a href="#">jQuery</a></li>
                </ul>
             </li>
         <li><a href="">阳光小厨</a></li>
         <li><a href="">光影天地</a></li>
     </ul>
  </div>
<!--nav_horizontal end-->

使用script标签写入js语言，定义两个函数，分别为show（）和hide（）

1 <script>
2     function show(li){
3         var p = getElementsByTagName("ul")[0];
4         p.style.display="block";}
5 
6    function hide(li){
7         var p = getElementsByTagName("ul")[0];
8         p.style.display="none";}
9 </script>

 3 使用jQuery实现下拉菜单

（1）首先应该引入jQuery，有两种方法可以用来引入

第一种：从网上下载jQuery库，然后通过标签引入如：<scirpt type="text/javascript" scr="jquery/jquery-1.7.1-min.js"></script>

第二种：直接使用在线服务器上的jquery库文件，如google服务器上的，如：<scirpt type="text/javascript" scr="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>()

（2）当jQuery库引入之后，就可以开始编写jquery代码了，因为jquery本质上也是javascript语言，所以jquery代码还是应该放在script标签中。

 1 <script>
 2    $(function(
 3        $("navmeun").mouseover(function(
 4            $(this).children("ul").show();))
 5 ))
 6 
 7    $(function(
 8        $("navmeun").mouseout(function(
 9            $(this).children("ul").hide();))
10 ))
11 
12 </script>

 

转载于:https://www.cnblogs.com/zhangtaiqingqing/p/5353465.html