js,jq,css多方面實(shí)現(xiàn)簡易下拉菜單功能
效果圖預(yù)覽
一 、css實(shí)現(xiàn)
html代碼部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html+css下拉菜單</title> <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> </head> <body> <ul class="menu"> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁</a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單一</a> <ul> <li>內(nèi)容一</li> <li>內(nèi)容一</li> <li>內(nèi)容一</li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單二</a> <ul> <li>內(nèi)容二</li> <li>內(nèi)容二</li> <li>內(nèi)容二</li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單三</a> <ul> <li>內(nèi)容三</li> <li>內(nèi)容三</li> <li>內(nèi)容三</li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單四</a> </li> </ul> </body> </html>
css部分
*{ padding: 0; margin: 0; } a{ text-decoration: none; color: #000; } ul,li{ list-style: none; } .menu{ margin: 50px auto; width: 500px; height: 35px; background-color: #ccc; text-align: center; line-height: 35px; } .menu li{ float: left; width: 20%; position: relative; } .menu li:hover ul{ display: block; } .menu li a{ display: block; } .menu li a:hover{ background-color: burlywood; } .menu li ul{ display: none; position: absolute; } .menu li ul li{ width: 100%; margin-top: 2px; background-color: darkgray; } .menu li ul li:hover{ cursor: pointer; background-color: chartreuse; }
二、js實(shí)現(xiàn)
html和js部分(實(shí)現(xiàn)方法一)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS下拉菜單</title> <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> </head> <body> <ul class="menu" id="menu"> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁</a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單一</a> <ul> <li>內(nèi)容一</li> <li>內(nèi)容一</li> <li>內(nèi)容一</li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單二</a> <ul class="show"> <li>內(nèi)容二</li> <li>內(nèi)容二</li> <li>內(nèi)容二</li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單三</a> <ul class="hide"> <li>內(nèi)容三</li> <li>內(nèi)容三</li> <li>內(nèi)容三</li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單四</a> </li> </ul> <script type="text/javascript"> window.onload = function(){ function $(id){ return typeof id == "string"?document.getElementById(id):id; } var menu_li = $("menu").getElementsByTagName("li"); for(var i = 0; i < menu_li.length; i++){ menu_li[i].onmouseover = function(){ var ss = this.getElementsByTagName("ul")[0]; if(ss != undefined){ ss.style.display = "block"; } } } for(var j = 0; j < menu_li.length; j++){ menu_li[j].onmouseout = function(){ var ssa = this.getElementsByTagName("ul")[0]; if(ssa != undefined){ ssa.style.display = "none"; } } } } </script> </body> </html>
html和js部分(實(shí)現(xiàn)方法二)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> * { padding: 0; margin: 0; } li { list-style: none; float: left; } #tabCon { clear: both; } #tabCon div { display: none; } #tabCon div.fdiv { display: block; } </style> </head> <body> <div id="tanContainer"> <div id="tab"> <ul> <li class="fli">標(biāo)題一</li> <li>標(biāo)題二</li> <li>標(biāo)題三</li> <li>標(biāo)題四</li> </ul> </div> <div id="tabCon"> <div class="fdiv">內(nèi)容一</div> <div>內(nèi)容二</div> <div>內(nèi)容三</div> <div>內(nèi)容四</div> </div> </div> </body> <script> function $(id){ return typeof id=="string"?document.getElementById(id):id; } var EventUtil = { addHandler: function(element, type, handler) { if(element.addEventListener) { element.addEventListener(type, handler, false); } else if(element.attachEvent) { element.attachEvent("on" + type + handler); } else { element["on" + type] = handler; } }, removeHandler: function(element, type, handler) { if(element.removeEventListener) { element.removeEventListener(type, handler, false); } else if(element.detachEvent) { element.detachEvent("on" + type + handler); } else { element["on" + type] = null; } } } var tabs = $("tab").getElementsByTagName("li"); var divs = $("tabCon").getElementsByTagName("div"); for(var i = 0; i < tabs.length; i++) { var set = function() { change(this); } EventUtil.addHandler(tabs[i], "click", set); //tabs[i].onclick=function(){change(this);} } function change(obj) { console.log(obj); for(var i = 0; i < tabs.length; i++) { if(tabs[i] == obj) {console.log(tabs[i]); // tabs[i].style.display = "block"; divs[i].style.display = "block"; } else { // tabs[i].style.display = "none"; divs[i].style.display = "none"; } } } </script> </html>
css部分
*{ padding: 0; margin: 0; } a{ text-decoration: none; color: #000; } ul,li{ list-style: none; } .menu{ margin: 50px auto; width: 500px; height: 35px; background-color: #ccc; text-align: center; line-height: 35px; } .menu li{ float: left; width: 20%; position: relative; } .menu li a{ display: block; } .menu li a:hover{ background-color: burlywood; } .menu li ul{ display: none; position: absolute; left: 0; } .menu li ul li{ width: 100%; margin-top: 2px; background-color: darkgray; } .menu li ul li:hover{ cursor: pointer; background-color: chartreuse; }
三、JQ實(shí)現(xiàn)
html和jq部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS下拉菜單</title> <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> </head> <body> <ul class="menu" id="menu"> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁</a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單一</a> <ul> <li>內(nèi)容一</li> <li>內(nèi)容一</li> <li>內(nèi)容一</li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單二</a> <ul class="show"> <li>內(nèi)容二</li> <li>內(nèi)容二</li> <li>內(nèi)容二</li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單三</a> <ul class="hide"> <li>內(nèi)容三</li> <li>內(nèi)容三</li> <li>內(nèi)容三</li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜單四</a> </li> </ul> <script type="text/javascript" src="../../jq/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $(".menu li").hover(function(){ $(this).children("ul").show(); },function(){ $(this).children("ul").hide(); }); }); </script> </body> </html>
css部分
*{ padding: 0; margin: 0; } a{ text-decoration: none; color: #000; } ul,li{ list-style: none; } .menu{ margin: 50px auto; width: 500px; height: 35px; background-color: #ccc; text-align: center; line-height: 35px; } .menu li{ float: left; width: 20%; position: relative; } .menu li a{ display: block; } .menu li a:hover{ background-color: burlywood; } .menu li ul{ display: none; position: absolute; left: 0; } .menu li ul li{ width: 100%; margin-top: 2px; background-color: darkgray; } .menu li ul li:hover{ cursor: pointer; background-color: chartreuse; }
以上就是通過css,js,jq三個(gè)方式實(shí)現(xiàn)簡易下拉菜單的寫法,有更好的寫法歡迎你的指教。希望大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
使用javascript實(shí)現(xiàn)判斷當(dāng)前瀏覽器
這篇文章主要介紹了使用javascript實(shí)現(xiàn)判斷當(dāng)前瀏覽器的類型及版本,雖然不是很全面,但是還是推薦給大家,簡單學(xué)下方法和思路。2015-04-04js實(shí)現(xiàn)簡單模態(tài)窗口,背景灰顯
昨天中午做項(xiàng)目需要一個(gè)模態(tài)窗口,想起上一個(gè)公司的項(xiàng)目經(jīng)理曾經(jīng)做過一個(gè)比較牛的模態(tài)窗口,至今沒用搞清楚實(shí)現(xiàn)原理,平時(shí)也沒有時(shí)間去分析,試著自己做了一個(gè),用了一天的時(shí)間終于完成了,給大家一起分享, 也希望高手多提意見。第一次在博客園上發(fā)文章,挺高興的。2008-11-11JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果(續(xù)2)
發(fā)現(xiàn)原來的方法還有是有幾個(gè)問題:首先Js代碼冗余,導(dǎo)航條上的Tab是用js實(shí)現(xiàn)跳轉(zhuǎn)而不是超鏈接,還有導(dǎo)航條本身用fixed定位,但沒有被設(shè)置為水平居中,而是在JS中更改left值使其居中2013-09-09JS獲得一個(gè)對(duì)象的所有屬性和方法實(shí)例
下面小編就為大家?guī)硪黄狫S獲得一個(gè)對(duì)象的所有屬性和方法實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02Wordpress ThickBox 點(diǎn)擊圖片顯示下一張圖的修改方法
Wordpress自帶的ThickBox特效中,單擊圖片會(huì)調(diào)用 tb_remove 以關(guān)閉特效窗口,現(xiàn)將修改其動(dòng)作為顯示下一張圖。2010-12-12小程序中this.setData的使用和注意事項(xiàng)
這篇文章主要介紹了微信小程序中this.setData的使用和注意事項(xiàng),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08JS中video標(biāo)簽自動(dòng)播放音視頻并繪制波形圖效果
html中的<video>標(biāo)簽可以用來播放常見的音視頻格式,支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等,當(dāng)然支持的格式也和瀏覽器和操作系統(tǒng)有關(guān),這篇文章主要介紹了video標(biāo)簽自動(dòng)播放音視頻并繪制波形圖,需要的朋友可以參考下2023-09-09