形行色色的下拉菜單（HTML/CSS JS方法 jQuery方法實現）

時間  2019-11-12
標籤 行色 下拉菜單 html css 方法 jquery 實現 欄目 HTML 简体版
原文   原文鏈接 



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方法javascript

<!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方法實現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 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實現）+ 多級菜單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>
        <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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程