午夜岛国毛片在线看,久草热免费视频天天在线

首頁免費課形形色色的下拉菜單筆記

形形色色的下拉菜單

                
                zongran
            Web前端工程師

                    查看講師更多課程 
                    zongran講師的其他課程
                
商城分類導航效果
初級·63734
免費課程
                                
                難度初級
            
                時長 3小時21分
            
                學習人數
            
綜合評分9.57
                            145人評價
                        查看評價
                                9.8
                                內容實用
                            
                                9.4
                                簡潔易懂
                            
                                9.5
                                邏輯清晰

最熱最新

弦上漣漪

window.ActiveXobject僅支持IE瀏覽器，其他瀏覽器返回false。
指瀏覽器是ie且不支持window.XMLHttpRequest，則說明是ie6以下的低版本。
下面使用jQuery來實現
使用has（）判斷li標簽下是否有ul標簽，有且鼠標滑過li標簽是執行函數function代碼——將ul標簽的display屬性改為none。
jQuery可連續執行，如在之后執行函數mouseout。
下面將對ie的判斷：
（1）使用上文的window.ActiveXobject方法；
（2）jQuery 的1.x使用方法：
（3）jQuery的1.9使用方法？？？？？（不確定jQuery版本）

查看全部

0 采集收起來源：IE瀏覽器兼容
2018-08-23

慕虎3836831

function?showsub(li){
????var?subMenu=?li.getElementsByTagName("ul")[0];
????subMenu.style.display?=?"block";
}

查看全部

0 采集收起來源：編程練習

2018-08-06

elpsycongroo

代碼如圖所示

查看全部

0 采集收起來源：編程練習
2018-07-24
IT_SEVEN

二級菜單（下拉式菜單）
1、一級菜單的<ul><li>相對定位：ul li { position:relative; }?
2、二級菜單的<ul>絕對定位：ul li ul { position:absolute; top:40px; left:40px; }
**注意：絕對定位position:absolute; 要配合使用top和left
3、用 display:none; 隱藏二級菜單（ul），用 display:block顯示二級菜單；
4、<a> 標簽是行內元素，在<a> 中設置 display:block; 修改為塊級元素

查看全部

0 采集收起來源：HTML/CSS方法實現下拉菜單
2018-07-22
餅干小火鍋

IE6下不兼容li:hover
用body {behavior:url(csshover.htc);}
且已經下載到本機網頁文件夾下

查看全部

0 采集收起來源：jQuery實現動畫菜單
2018-07-19
慕粉1472135113

<!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.ActiveXObject;
? ? ? ? var isIE6=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];
//如果包含子菜單，就將子菜單顯示
? ? ? ? u.style.display="block";
? ? ? ??
? ? ? ??

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? Lis[i].onmouseout = function () {
? ? ? ? ? ? ? ? ? ? var u = this.getElementsByTagName("ul")[0];
//如果包含子菜單，就將子菜單隱藏
? ? ? ? u.style.display="none";
? ? ? ??
? ? ? ??
? ? ? ??

? ? ? ? ? ? ? ? ? ? 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>

查看全部

0 采集收起來源：編程練習
2018-07-18
慕粉1472135113

<!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;
? ? ? ? ? ? border-bottom: 8px solid #DC4E1B;
? ? ? ? ? ? overflow: auto;
? ? ? ? }
? ? ? ? .top-nav li
? ? ? ? {
? ? ? ? ? ? float: left;
? ? ? ? ? ? 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 span{
? ? ? ? ? ? display:none;
? ? ? ? ? ? background: #DC4E1B;
? ? ? ? ? ? color:white;
? ? ? ? }?
? ? ? ??
? ? ? ? /*鼠標移動到鏈接上面時將英文菜單顯示*/
? ? ? ? .top-nav li a:hover span{
? ? ? ? ? ? display:block;
? ? ? ? }?
? ? ? ??
? ? ? ? /*鼠標移動到鏈接上面時將中文菜單位置上移*/
? ? ? ?.top-nav li a:hover {
? ? ? ? ? ? margin-top:-20px;
? ? ? ? } ?

?
? ? </style>
</head>
<body>
? ? <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>
</body>
</html>

查看全部

0 采集收起來源：編程練習
2018-07-14
慕沐4186304 23:12

html

查看全部

0 采集收起來源：編程練習
2018-06-28
閏閏的媽媽 23:10

一級菜單的<ul><li>相對定位：ul li{ position:relative;}
二級菜單的<ul>絕對定位：ul li ul{ position:absolute; top:40px; left:40px;}
注意絕對定位position:absolute; 要配合使用top和left
用display:none隱藏二級菜單（ul），用display:block顯示二級菜單；

<a> 標簽不是塊級元素 ?在<a> 中設置 display:block;修改為塊級元素啦

導航欄<li>標簽橫向自適應解決辦法。<li>標簽不設置固定寬度，padding:0 10px;(0是針對上下，10px針對于左右間隔）

查看全部

0 采集收起來源：HTML/CSS方法實現下拉菜單
2018-06-11
elpsycongroo

代碼如圖所示

查看全部

1 采集收起來源：編程練習
2018-06-08
elpsycongroo

代碼如圖所示

查看全部

0 采集收起來源：編程練習
2018-06-08
elpsycongroo

代碼如圖所示

查看全部

0 采集收起來源：編程練習
2018-06-07
慕神2489136

html+css下拉菜單

查看全部

0 采集收起來源：編程練習
2018-03-12
李飛魚 17:51

css實現下拉菜單 ul li:hover li{} 原來還可以這么用，666

查看全部

0 采集收起來源：HTML/CSS方法實現下拉菜單
2018-03-06
qq_Leonardo_2

Jquery庫引用方法

查看全部

0 采集收起來源：jQuery方法實現下拉菜單顯示和隱藏
2018-03-04