快捷導(dǎo)航

JS+CSS實(shí)現(xiàn)簡(jiǎn)單的二級(jí)下拉導(dǎo)航菜單效果

更新時(shí)間：2015年09月21日 10:01:08 作者：企鵝

這篇文章主要介紹了JS+CSS實(shí)現(xiàn)簡(jiǎn)單的二級(jí)下拉導(dǎo)航菜單效果,通過簡(jiǎn)單的JavaScript頁面元素遍歷及樣式操作實(shí)現(xiàn)下拉菜單效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了JS+CSS實(shí)現(xiàn)簡(jiǎn)單的二級(jí)下拉導(dǎo)航菜單效果。分享給大家供大家參考。具體如下：

這是一款CSS配合JavaScript實(shí)現(xiàn)二級(jí)下拉導(dǎo)航菜單，好像CSS要配合JS才能寫出好效果來，本款菜單同樣用到了JS，菜單目前支持兩級(jí)，下拉導(dǎo)航是我們經(jīng)常用的一種菜單形式，把這個(gè)修改一下你就能用了，結(jié)構(gòu)挺簡(jiǎn)單，相信你會(huì)做好的。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/

具體代碼如下：

<!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>CSS二級(jí)下拉導(dǎo)航菜單</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';}
#mainNavBar{width:100%;background:#999;padding:10px 0;}
#nav{width:760px;height:30px;margin:0 auto;}
#nav ul{padding:0;margin:0;}
#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}
#nav ul li a{display:block;color:#fff;text-decoration:none;}
#nav ul li a:hover{font-weight:bold;background:#666;}
#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}
#subNav a{text-decoration:none;font-weight:normal;display:block;}
#subNav a:hover{color:#f00;background:#f00;}
</style>
</head>
<body>
<div id="mainNavBar">
 <div id="nav">
  <ul>
   <li>
    <a href="#">添加</a>
    <div id="subNav">
     <a href="#">日志</a>
     <a href="#">分類</a>
    </div>
   </li>
   <li>
    <a href="#">管理</a>
    <div id="subNav">
     <a href="#">分類</a>
     <a href="#">文章</a>
    </div>
   </li>
   <li>
    <a href="#">擴(kuò)展</a>
    <div id="subNav">
     <a href="#">評(píng)論管理</a>
     <a href="#">留言管理</a>
     <a href="#">注銷退出</a>
    </div>
   </li>
  </ul>
 </div>
</div>
<script language="javascript">
var nav=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i<nav.length;i++){
nav[i].onmouseover=function(){
 this.style.fontWeight="bold";
 this.style.overflow="visible";
 this.style.background="#666666";
 }
nav[i].onmouseout=function(){
 this.style.fontWeight="normal";
 this.style.background="#999999"
 this.style.overflow="hidden";
 }
}
</script>
</body>
</html>

希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

簡(jiǎn)單實(shí)現(xiàn)JS計(jì)算器功能
這篇文章主要教大家簡(jiǎn)單實(shí)現(xiàn)JS計(jì)算器功能,實(shí)現(xiàn)小數(shù)點(diǎn)校驗(yàn)，重復(fù)計(jì)算，以及大量更符合用戶體驗(yàn)的操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
微信小程序功能之全屏滾動(dòng)效果的實(shí)現(xiàn)代碼
最近小編做項(xiàng)目遇到這樣的需求，要求實(shí)現(xiàn)一個(gè)全屏滾動(dòng)的效果，在網(wǎng)上找了實(shí)例代碼，但是不是很完美，小編又結(jié)合自己的知識(shí)給大家補(bǔ)充下，對(duì)微信小程序全屏滾動(dòng)效果的實(shí)例代碼感興趣的朋友參考下本文吧
2018-11-11
webpack進(jìn)階——緩存與獨(dú)立打包的用法
本篇文章主要介紹了webpack進(jìn)階——緩存與獨(dú)立打包的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
JavaScript基于擴(kuò)展String實(shí)現(xiàn)替換字符串中index處字符的方法
這篇文章主要介紹了JavaScript基于擴(kuò)展String實(shí)現(xiàn)替換字符串中index處字符的方法,涉及javascript使用substr方法針對(duì)字符串進(jìn)行替換操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-06-06
JavaScript Array對(duì)象基本方法詳解
這篇文章主要介紹了JavaScript Array對(duì)象基本方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
利用js正則表達(dá)式驗(yàn)證手機(jī)號(hào),email地址,郵政編碼
利用js正則表達(dá)式驗(yàn)證手機(jī)號(hào),email地址,郵政編碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-01-01
用js模擬JQuery的show與hide動(dòng)畫函數(shù)代碼
用javascript實(shí)現(xiàn)的模擬jquery下的顯示與隱藏的動(dòng)畫效果，學(xué)習(xí)的朋友可以參考下。
2010-09-09
Javascript中扁平化數(shù)據(jù)結(jié)構(gòu)與JSON樹形結(jié)構(gòu)轉(zhuǎn)換詳解
之前朋友問過我一個(gè)問題,項(xiàng)目中遇到扁平化數(shù)據(jù)結(jié)構(gòu)不知如何樹形化,下面這篇文章主要給大家介紹了關(guān)于Javascript中扁平化數(shù)據(jù)結(jié)構(gòu)與JSON樹形結(jié)構(gòu)轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下
2022-05-05
基于Particles.js制作超炫粒子動(dòng)態(tài)背景效果(仿知乎)
本文給大家分享Particles.js基于Canvas畫布創(chuàng)建粒子顆粒效果，代碼非常簡(jiǎn)單，需要的朋友參考下吧
2017-09-09
微信小程序?qū)崿F(xiàn)自動(dòng)播放視頻模仿gif動(dòng)圖效果實(shí)例
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)自動(dòng)播放視頻模仿gif動(dòng)圖效果的相關(guān)資料,通過本文介紹的方法可以實(shí)現(xiàn)自動(dòng)播放視頻，視頻無控制條無聲音且自動(dòng)循環(huán)播放,需要的朋友可以參考下
2021-07-07