形形色色的下拉菜单一

基于对慕课网课程的笔记

普通菜单

菜单布局

<div id="nav">
<ul>
  <li><a href="#">首页</a></li>
  <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">课程大厅</a>
     <ul>
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">Html/CSS</a></li>
     </ul>  
  </li>
  <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">学习中心</a>
      <ul>
         <li><a href="#">视频学习</a></li>
         <li><a href="#">实例练习</a></li>
         <li><a href="#">问与答</a></li>
     </ul>  
  
  </li>
  <li><a href="#">经典案例</a></li>
  <li><a href="#">关于我们</a></li>
  
</ul>

</div>

JS实现

使用 li.getElementsByTagName("ul")[0]; 找到li子布局下的 ul标签  通过style.display 动态修改属性

<script type="text/javascript">

        function displaySubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "block";

        }

        function hideSubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "none";

        }

    </script>

JQ实现

 $(this).children("ul").show();  找到子标签 并使用 show() hide() 进行菜单的隐藏

<script src="jquery/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
  $(function(){
	 $(".navmenu").mouseover(function(){
		 $(this).children("ul").show();
		 
		 
		 })
	 $(".navmenu").mouseout(function(){
		 
		 $(this).children("ul").hide();
		 
		 })
	  
	  })
  
</script>

 变化菜单的实现

即鼠标指向时 进行文字的变化

布局

<div id="top">
        <ul class="top-nav">
            <li><a href="#">首页<span>Home</span></a></li>
            <li><a href="#">课程大厅<span>Course</span></a></li>
            <li><a href="#">学习中心<span>Learn</span></a></li>
            <li><a href="#">关于我们<span>About</span></a></li>
        </ul>

通过css控制a标签的变化 :当鼠标指向时 改变 margin-top:-20px 将元素向上移动