|
之前為大家介紹過(guò)有關(guān)HTML中的一些比較炫的效果，本篇為大家介紹一些，大家在網(wǎng)站中經(jīng)常可以見(jiàn)到的一種下拉菜單效果，這種菜單效果一般分為兩層，當(dāng)我們的鼠標(biāo)經(jīng)過(guò)一級(jí)菜單時(shí)，隱藏的二級(jí)菜單就會(huì)顯示出來(lái)，這樣即保證了頁(yè)面的美觀，同時(shí)又不會(huì)使頁(yè)面的模塊減少，甚至可以增加模塊數(shù)目。 一、廢話不多說(shuō)，下面我們來(lái)通過(guò)HTML+CSS為大家實(shí)現(xiàn)一下上面的效果，首先請(qǐng)大家先欣賞一下效果圖： 1、界面布局代碼： <body> <div id="var"> <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">軟件工程</a> <ul> <li><a href="#">JAVA</a></li> <li><a href="#">NET</a></li> </ul> </li> <li><a href="#">通信工程</a></li> <li><a href="#">計(jì)算機(jī)管理</a> <ul> <li><a href="#">JAVA</a></li> <li><a href="#">NET</a></li> </ul> </li> <li><a href="#">物聯(lián)網(wǎng)系</a></li> </ul> </div> </body> 2、css代碼： <style type="text/css">
*{padding: 0; margin: 0;}
#var{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; padding:0 10px; height: 40px;}
a:HOVER {color: #fff; background-color: #666;}
ul li ul li{float: none; background-color: #eee; margin-top: 2px;}
ul li ul{ position: absolute; left: 0px; top:40px; display: none;}
ul li ul li a:HOVER { background-color: #06f;}
ul li:hover ul{ display: block;}
</style>
對(duì)于CSS代碼都是最基本的，我想大家都能的看懂吧，可能有一些看上去有些吃力，下面我就帶大家一起分析一下，這段代碼：list-style:none;表示去掉樣式，也就是去除每個(gè)li前的小黑點(diǎn)；對(duì)于a下的text-decoration: none;表示去除超鏈接下的下劃線；a:hover表示鼠標(biāo)經(jīng)過(guò)超鏈接是的效果；display: block;表示把ul轉(zhuǎn)化為塊級(jí)元素。其他的都是一些常規(guī)屬性，就不再贅述，只要理解了盒子模型的理念，這都不是事。 二、html+css+javascript實(shí)現(xiàn)上述效果： 3、界面代碼： <body> <div id="var"> <ul> <li><a href="#">首頁(yè)</a></li> <li onmouseover="show(this)" onmouseout="quit(this)"><a href="#">軟件工程</a> <ul> <li><a href="#">JAVA</a></li> <li><a href="#">NET</a></li> </ul> </li> <li><a href="#">物聯(lián)網(wǎng)工程</a></li> <li onmouseover="show(this)" onmouseout="quit(this)"><a href="#">信息管理</a> <ul> <li ><a href="#">JAVA</a></li> <li><a href="#">NET</a></li> </ul> </li> <li><a href="#">網(wǎng)絡(luò)安全</a></li> <li><a href="#">計(jì)算機(jī)科學(xué)與技術(shù)</a></li> </ul> </div> </body> 4、css代碼： <style type="text/css"> *{ margin: 0; padding: 0;} #var{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; padding:0 10px; height: 40px; color:#000; display: block;} a:HOVER { color: #fff; background-color: #666;} ul li ul li{ float: none; background-color: #eee; margin-top: 2px;} ul li ul{ position: absolute; left: 0px; top:40px; display: none;} ul li ul li a:HOVER{ background-color: #06f;} </style> 5、JavaScript實(shí)現(xiàn)上述效果： <script type="text/javascript">
function show(li){
var submenu = li.getElementsByTagName("ul")[0];
submenu.style.display="block";//鼠標(biāo)經(jīng)過(guò)時(shí)顯示二級(jí)菜單
}
function quit(li){
var submenu = li.getElementsByTagName("ul")[0];
submenu.style.display="none";//鼠標(biāo)離開(kāi)時(shí)隱藏二級(jí)菜單
}
</script>
三、變化菜單的實(shí)現(xiàn)，界面欣賞： 6、界面代碼： <body> <div id="var"> <ul> <li><a id="a1" href="#">首頁(yè)<span>index</span></a></li> <li><a href="#">課程大廳<span>home</span></a></li> <li><a href="#">學(xué)習(xí)中心<span>study</span></a></li> <li><a href="#">關(guān)于我們<span>me</span></a></li> <li><a href="#">論壇<span>say</span></a></li> </ul> </div> </body> 7、css代碼： <style type="text/css"> *{ padding: 0px; margin: 0px;} #var{ font-size: 12px; font-weight: bold; border-bottom: 8px solid #666; overflow: auto;} #var li{ float: left; margin-left: 1px; list-style: none;} #var li a{ line-height: 20px; text-decoration: none; background-color: #ddd; color: #666; display: block; width: 80px; text-align: center;} #var li a span{ display: none;} #var li a:HOVER{ margin-top: -20px; background-color: #666; color: #fff;} #var li a:HOVER span{ display: block;} </style> 講到這里關(guān)于本篇的菜單欄設(shè)計(jì)，我相信大家都已經(jīng)學(xué)會(huì)了，有沒(méi)有感覺(jué)到CSS的強(qiáng)大，反正我算是服了，作為一個(gè)網(wǎng)站開(kāi)發(fā)工程師，如果你說(shuō)你不懂SCC估計(jì)有可能會(huì)被笑掉大牙。以上內(nèi)容，如有異議，請(qǐng)留言。 |
|
|
來(lái)自： 天才白癡書(shū)館 > 《前端》
