html二级菜单点击淡入淡出,Web前端开发实战1：二级下拉式菜单之CSS实现
二級下拉式菜單在各大學校站點。電商類站點。新聞類站點等大型？站點非經常見，那么它的實現原理是什么呢？
學習了Web前端開發的知識后，我們是能夠實現這種功能的。復雜的都是從基礎效果上加入做出來的。原理和流程
還是一樣的，今天開始做一些簡單的二級下拉式菜單。
橫向一級菜單我們見到的非常多。例如以下圖所看到的是：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
二級下拉菜單圖：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
二級下拉菜單是在橫向一級菜單的基礎上加入下拉效果實現的。制作思路：
第一步：靜態網頁的制作
標簽
- ...
標簽鏈接
float浮動
display:block屬性
postion屬性規定元素的定位
第二步：動態特效的實現
下拉菜單的顯示與隱藏
今天我們使用CSS樣式表實現，那么制作流程是：
1一級菜單設置：設置CSS樣式,使一級菜單橫向顯示,位于一行中。
2二級菜單設置：給”課程大廳”菜單,加入二級菜單(JavScript/JQuery/Ajax三項)，并帶鏈接；同一時候給“學習中心”菜
單，加入二級菜單(視頻學習/案例學習/交流平臺三項)。也帶鏈接。
3隱藏二級菜單： 設置CSS樣式,讓二級菜單隱藏。
4顯示二級菜單：設置CSS樣式,讓二級菜單顯示。
5瀏覽器兼容性問題解決以及代碼優化，至少測試五個瀏覽器。我測試的是IE7,8,9。2345瀏覽器，谷歌瀏覽器以
及火狐瀏覽器。
HTML代碼部分：
下拉菜單- 站點首頁
- 課程大廳
- JavaScript
- jQuery
- Ajax
- 學習中心
- 視頻學習
- 案例學習
- 交流平臺
- 經典案例
- 關于我們
CSS樣式表style.css文件代碼：
/*CSS全局設置*/
*{
margin:0;
padding:0;
}
.nav{
background-color:#EEEEEE;
height:40px;
width:450px;
margin:0 auto;
}
/*橫向一級菜單樣式設置*/
ul{
list-style:none;
}
ul li{
float:left;
line-height:40px;
text-align:center;
position:relative;
}
a{
text-decoration:none;
color:#000000;
display:block;/*將a行內元素轉變成塊級元素*/
width:90px;
height:40px;
}
a:hover{
background-color:#666666;
color:#FFFFFF;
}
/*二級下拉菜單樣式設置*/
ul li ul li{
float:none;
background-color:#EEEEEE;
}
ul li ul{
position:absolute;
top:40px;
left:0px;
display:none;/*默認狀態下或鼠標離開時隱藏*/
width:90px;
}
/*為了兼容IE7寫的CSS樣式，可是必須寫在a:hover前面*/
ul li ul li a:link,ul li ul li a:visited{
background-color:#EEEEEE;
}
ul li ul li a:hover{
background-color:#009933;
}
/*鼠標滑過一級菜單的元素時顯示下拉菜單*/
ul li:hover ul{
display:block;
}
來看一下效果：
1初始化狀態或鼠標離開顯示為橫向一級菜單：
2鼠標滑過有二級下拉菜單的元素時顯示下拉菜單：
3顯示的下拉菜單中的鏈接樣式：
總結
以上是生活随笔為你收集整理的html二级菜单点击淡入淡出,Web前端开发实战1：二级下拉式菜单之CSS实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 从Solidworks模型到UG制工程图
- 下一篇： NX文件名与工程图名自动关联