JS CSS實作簡單的二級下拉導覽選單效果_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JS CSS實作簡單的二級下拉導覽選單效果_javascript技巧

May 16, 2016 pm 03:38 PM

css js

本文實例講述了JS CSS實作簡單的二級下拉導覽選單效果。分享給大家供大家參考。具體如下：

這是一款CSS配合JavaScript實現二級下拉導航選單，好像CSS要配合JS才能寫出好效果來，本款菜單同樣用到了JS，菜單目前支援兩級，下拉導航是我們常用的一種菜單形式，把這個修改一下你就能用了，結構挺簡單，相信你會做好的。

運作效果截圖如下：

線上示範網址如下：

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

具體程式碼如下：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;CSS二级下拉导航菜单&lt;/title&gt;
&lt;meta http-equiv="content-type" content="text/html;charset=gb2312"&gt;
&lt;style type="text/css"&gt;
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;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="mainNavBar"&gt;
 &lt;div id="nav"&gt;
  &lt;ul&gt;
   &lt;li&gt;
    &lt;a href="#"&gt;添加&lt;/a&gt;
    &lt;div id="subNav"&gt;
     &lt;a href="#"&gt;日志&lt;/a&gt;
     &lt;a href="#"&gt;分类&lt;/a&gt;
    &lt;/div&gt;
   &lt;/li&gt;
   &lt;li&gt;
    &lt;a href="#"&gt;管理&lt;/a&gt;
    &lt;div id="subNav"&gt;
     &lt;a href="#"&gt;分类&lt;/a&gt;
     &lt;a href="#"&gt;文章&lt;/a&gt;
    &lt;/div&gt;
   &lt;/li&gt;
   &lt;li&gt;
    &lt;a href="#"&gt;扩展&lt;/a&gt;
    &lt;div id="subNav"&gt;
     &lt;a href="#"&gt;评论管理&lt;/a&gt;
     &lt;a href="#"&gt;留言管理&lt;/a&gt;
     &lt;a href="#"&gt;注销退出&lt;/a&gt;
    &lt;/div&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;script language="javascript"&gt;
var nav=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i&lt;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";
 }
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

登入後複製

希望本文所述對大家的JavaScript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn