形形色色的下拉菜单（课后总结）

用HTML和CSS实现下拉菜单

html 部分的代码如下：

<div id="nav">     <ul>         <li ><a href="#">首页</a></li>         <li><a href="#">学习中心</a>            <ul>                <li><a href="#">JavaScript</a></li>                <li><a href="#">JQuery</a></li>            </ul>        </li>        <li><a href="#">课程大厅</a>            <ul>                <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> 

需要注意的是css部分是如何实现在经过第一层的ul li 时，实现二级菜单的出现和消失。思路是：

1、 首先将二级菜单的display属性设置为none 让它消失。

ul li ul{            position:absolute;            /*绝对定位是相对于浏览器的左上角进行定位的*/            left:0px;            top:40px;            display: none;        }

2、 设置悬浮hover的属性在第一层的 <li> 标签里面，但是最后效果的应用是在第二层的 <ul> 标签。

 ul li:hover ul{            display:block;        }

---

用JavaScript实现下拉菜单

html部分的代码和上面的差不多，但是添加了onmouseover和onmouseout事件。

<div id="nav">     <ul>         <li ><a href="#">首页</a></li>         <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">学习中心</a>            <ul>                <li><a href="#">JavaScript</a></li>                <li><a href="#">JQuery</a></li>            </ul>        </li>        <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">课程大厅</a>            <ul>                <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> 

还需要添加一段javascript代码来实现

 <script type="text/javascript">        function showsubmenu(li){   //li是函数要获取进来的参数，这里传进来的参数是this。this代表了当前的li标签            var submenu = li.getElementsByTagName("ul")[0];   // 因为是使用的li的方法，所以获取的是二级菜单的ul,获取得到的是数组            submenu.style.display = "block";   //通过javascript来该表样式中的display属性        }        function hidesubmenu(li) {            var submenu = li.getElementsByTagName("ul")[0];            submenu.style.display = "none";        }    </script>

---

用jQuery实现下拉菜单

在用jquery之前首先要引用jquery的库文件。在这里，我已经下载好了本地的文件，所以只要直接引用就可以了。

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>

另外还可以通过引用google 或者百度的CDN来引入库文件，这样还可以缩短页面加载的时间。
举个例子：比如jQuery官网的cdn

<script  src="https://code.jquery.com/jquery-3.2.1.min.js"  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="  crossorigin="anonymous"></script>

或者google的CDN地址

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript"></script>

同样，HTML部分的代码还是没有特别大的区别，只是在原来的基础上，给第一层的<li> 标签添加了一个class=”navmenu” 属性，为了获取元素。

<div id="nav">    <ul>        <li ><a href="#">首页</a></li>        <li  class="navmenu" ><a href="#">学习中心</a>            <ul>                <li><a href="#">JavaScript</a></li>                <li><a href="#">JQuery</a></li>            </ul>        </li>        <li class="navmenu" ><a href="#">课程大厅</a>            <ul>                <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>

之后的jQuery代码就是：

<script type="text/javascript">        $(function(){            $(".navmenu").mouseover(function(){                //在jquery中鼠标的时间是mouseover 和mouseout                //而在HTML DOM中是onmouseover 和onmouseout                $(this).children("ul").show();  //this代表的是当前的li标签，所以要获取二级菜单需要用到children方法，获取标签为ul的孩子标签。在调用show（）方法来实现。            });        });        $(document).ready(function(){            $(".navmenu").mouseout(function(){                $(this).children("ul").hide();            });        });    </script>

注意：
在jquery中鼠标的时间是mouseover 和mouseout，而在HTML DOM中是onmouseover 和onmouseout。

慕课系列课程的代码：Lin-QuQu_github