X-man

导航

形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现） 




HTML/CSS方法实现下拉菜单
来源：慕课网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}/*清除所有默认格式*/
 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
/*一级菜单背景色，宽度，高度，上下边距为零左右居中*/
 ul{ list-style:none;}/×清除ul固定格式（小点）×/
 ul li{ line-height:40px; text-align:center;float:left;}
/×行距，文字居中，浮动横向显示×/
 a{ text-decoration:none; color:#000; display:block; width:90px;}
/×a{ color:#000; text-decoration:none; padding-top:4px; display:block; width:97px; height:22px ;text-align:center;  background-color:#ececec;  margin-left:2px;   list-style-type:none; }字体颜色，下划线，模型内部到顶部距离，显示，宽度，高度，文字居中，背景颜色，模型外部到左侧距离×/
a:hover{ color:#FFF; background-color:#666;}
/×鼠标掠过是，a标签链接颜色，背景颜色×/
ul li ul li{ float:none;margin-top:2px; background-color:#eee; } 
/×清除浮动影响，上外边界间距，背景颜色×/
 ul li ul{width:90px;display:none;}
/×二级菜单，默认不显示×/
 ul li:hover ul{ display:block;}
/×鼠标掠过时，显示以块状元素显示ul二级菜单×/

</style>
</head>

<body>
<div id="menu">
<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="#">视频学习</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> 
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
 ul{ list-style:none;}
 ul li{ line-height:40px; text-align:center; float:left;}
 a{ text-decoration:none; color:#000; display:block; width:90px;}
 a:hover{ color:#FFF; background-color:red;}
 ul li ul li{ float:none;margin-top:2px; background-color:#eee; } 
 ul li ul{width:90px; display:none;}
ul li:hover ul{display:block;}
</style>
</head>

<body>
<div id="menu">
<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="#">视频学习</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> 
</body>
</html>
View Code

 

JS方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
/*body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}*/
#nav{ width:600px;font-size:15px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}
a{ text-decoration:none; color:#000; display:block;}
a:hover{ color:#F00; background-color:#666;}
ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}
ul li ul{display:none;}
</style>
 <script type="text/javascript">
        function ShowSub(li) {
            var subMenu =li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }

        function HideSub(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }

    </script>
</head>

<body>
<div id="nav">
<ul>
  <li><a href="#">首页</a></li>
  <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)"><a href="#">课程大厅</a>
     <ul>
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">Html/CSS</a></li>
     </ul>  
  </li>
  <li onmouseover="ShowSub(this)" onmouseout="HideSub(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>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
/*body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}*/
#nav{ width:600px;font-size:15px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}
a{ text-decoration:none; color:#000; display:block;}
a:hover{ color:#F00; background-color:#666;}
ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}
ul li ul{display:none;}
</style>
 <script type="text/javascript">
        function ShowSub(li) {
            var subMenu =li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }

        function HideSub(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }

    </script>
</head>

<body>
<div id="nav">
<ul>
  <li><a href="#">首页</a></li>
  <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)"><a href="#">课程大厅</a>
     <ul>
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">Html/CSS</a></li>
     </ul>  
  </li>
  <li onmouseover="ShowSub(this)" onmouseout="HideSub(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>
</body>
</html>
View Code

 

jQuery方法实现

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
 ul{ list-style:none;}
 ul li{ float:left;  line-height:40px; text-align:center; position:relative;}
 a{ text-decoration:none; color:#000; display:block; width:90px;}
 a:hover{ color:#FFF; background-color:#666;}
 ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; } 
 ul li ul{  width:90px; position:absolute; left:0px; top:40px; display:none;}
</style>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

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

</head>

<body>
<div id="menu">
 <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="#">视频学习</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> 
          </body>
</html>

 

 

浏览器兼容性（css hover实现）+ 多级菜单

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

    <head>
        <title></title>
        <style type="text/css">
            .top-nav {
                font-size: 12px;
                font-weight: bold;
                list-style: none;
            }
            .top-nav li {
                float: left;
                list-style: none;
                margin-right: 1px;
            }
            .top-nav li a {
                line-height: 20px;
                text-decoration: none;
                background: #DDDDDD;
                color: #666666;
                display: block;
                width: 80px;
                text-align: center;
            }
            .top-nav li a:hover {
                background: #900;
                color: #FFF;
            }
            .top-nav ul {
                list-style: none;
                display: none;
                width: 80px;
                padding: 0;
                position: relative;
            }
            .top-nav li ul li ul {
                position: absolute;
                top: 0;
                left: 80px;
            }
            /* 使用CSS设置鼠标移动到一级菜单时，二级菜单显示，三级菜单隐藏 */
            
            .top-nav li:hover ul {
                display: block;
            }
            .top-nav li:hover ul li ul {
                display: none;
            }
            /* 使用CSS设置鼠标移动到二级菜单时，三级菜单显示 */
            
            .top-nav li ul li:hover ul {
                display: block;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                //判断是否为IE浏览器
                var isIE = !!window.ActiveXObjet;
                var isE6 = isIE && !window.XMLHttpRequest;
                if (isIE6) {
                    var Lis = document.getElementsByTagName("li");
                    for (var i = 0; i < Lis.length; i++) {
                        Lis[i].onmouseover = function() {
                            var u = this.getElementsByTagName("ul")[0];
                            //如果包含子菜单，就将子菜单显示
                            if (u != undefined) {
                                u.style.display = "block";
                            }
                        }
                        Lis[i].onmouseout = function() {
                            var u = this.getElementsByTagName("ul")[0];
                            //如果包含子菜单，就将子菜单隐藏
                            if (u != undefined) {
                                u.style.display = "none";
                            }
                        }
                    }
                }
            }
        </script>
    </head>

    <body>
        <ul class="top-nav">
            <li><a href="#">慕课网首页</a>
                <ul>
                    <li><a href="#">前端课程 +</a>
                        <ul>
                            <li><a href="#">javascript</a></li>
                            <li><a href="#">css</a></li>
                            <li><a href="#">jquery</a></li>
                        </ul>
                    </li>
                    <li><a href="#">手机开发</a>
                        <ul>
                            <li><a href="#">ios开发</a></li>
                            <li><a href="#">android开发</a></li>
                            <li><a href="#">WP开发</a></li>
                        </ul>
                    </li>
                    <li><a href="#">后台编程</a></li>
                </ul>
            </li>
            <li><a href="#">课程大厅</a> </li>
            <li><a href="#">学习中心 +</a>
                <ul>
                    <li><a href="#">前端课程 +</a>
                        <ul>
                            <li><a href="#">javascript</a></li>
                            <li><a href="#">css</a></li>
                            <li><a href="#">jquery</a></li>
                        </ul>
                    </li>
                    <li><a href="#">手机开发</a>
                        <ul>
                            <li><a href="#">ios开发</a></li>
                            <li><a href="#">android开发</a></li>
                            <li><a href="#">WP开发</a></li>
                        </ul>
                    </li>
                    <li><a href="#">后台编程</a></li>
                </ul>
            </li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </body>

</html>
View Code

 

浏览器兼容性（js实现）+ 多级菜单

 

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

    <head>
        <title></title>
        <style type="text/css">
            .top-nav {
                font-size: 12px;
                font-weight: bold;
                list-style: none;
            }
            .top-nav li {
                float: left;
                list-style: none;
                margin-right: 1px;
            }
            .top-nav li a {
                line-height: 20px;
                text-decoration: none;
                background: #DDDDDD;
                color: #666666;
                display: block;
                width: 80px;
                text-align: center;
            }
            .top-nav li a:hover {
                background: #900;
                color: #FFF;
            }
            .top-nav ul {
                list-style: none;
                display: none;
                width: 80px;
                padding: 0;
                position: relative;
            }
            .top-nav li ul li ul {
                position: absolute;
                top: 0;
                left: 80px;
            }
            /* 使用CSS设置鼠标移动到一级菜单时，二级菜单显示，三级菜单隐藏 */
        </style>

        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("li").has("ul").mouseover(function(){
                    $(this).children("ul").css("display","block");
                }).mouseout(function(){
                    $(this).children("ul").css("display","none");
                })
            })
        </script>
    </head>

    <body>
        <ul class="top-nav">
            <li><a href="#">慕课网首页</a>
                <ul>
                    <li><a href="#">前端课程 +</a>
                        <ul>
                            <li><a href="#">javascript</a></li>
                            <li><a href="#">css</a></li>
                            <li><a href="#">jquery</a></li>
                        </ul>
                    </li>
                    <li><a href="#">手机开发</a>
                        <ul>
                            <li><a href="#">ios开发</a></li>
                            <li><a href="#">android开发</a></li>
                            <li><a href="#">WP开发</a></li>
                        </ul>
                    </li>
                    <li><a href="#">后台编程</a></li>
                </ul>
            </li>
            <li><a href="#">课程大厅</a> </li>
            <li><a href="#">学习中心 +</a>
                <ul>
                    <li><a href="#">前端课程 +</a>
                        <ul>
                            <li><a href="#">javascript</a></li>
                            <li><a href="#">css</a></li>
                            <li><a href="#">jquery</a></li>
                        </ul>
                    </li>
                    <li><a href="#">手机开发</a>
                        <ul>
                            <li><a href="#">ios开发</a></li>
                            <li><a href="#">android开发</a></li>
                            <li><a href="#">WP开发</a></li>
                        </ul>
                    </li>
                    <li><a href="#">后台编程</a></li>
                </ul>
            </li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </body>

</html>
View Code

 

posted on 2015-07-26 16:21  雨钝风轻  阅读(587)  评论(0)  编辑  收藏  举报