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

用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