js css精美二級導航菜單

06-14

<!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><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>js+css精美二級導航菜單</title><style></style></head><p class="intro_p"><body><script language="javascript" type="text/javascript"> function showSubLevel(Obj){  Obj.className="hover"; } function hideSubLevel(Obj){  Obj.className=""; }</script><p class="intro_p"><div class="menu"> <ul class="inner">        <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="http://www.0491.com">團購導航</a>        <ul><li><a href="http://myjs.jz123.cn">網頁特效</a></li><li><a href="#">網址導航</a></li><li><a href="#">源碼下載</a></li><li><a href="#">鏈接平台</a></li><li><a href="#">生活常識</a></li>      </ul>        </li>            <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">特效代碼①</a>        <ul><li><a href="#" title="">菜單導航特效</a></li><li><a href="#" title="">圖層樣式特效</a></li><li><a href="#" title="">鏈接文本特效</a></li><li><a href="#" title="">圖形圖像特效</a></li>        </ul>        </li>            <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">特效代碼②</a>        <ul><li><a href="#" title="">滑鼠特效代碼</a></li><li><a href="#" title="">頁面窗口特效</a></li><li><a href="#" title="">網頁背景特效</a></li><li><a href="#" title="">日期時間特效</a></li>        </ul>        </li>            <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">特效代碼③</a>        <ul><li><a href="#" title="">頁面搜索特效</a></li><li><a href="#" title="">表格表單特效</a></li><li><a href="#" title="">其他網頁特效</a></li>        </ul>        </li>            <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">源碼下載</a>        <ul><li><a href="#" title="">淘客源碼下載</a></li><li><a href="#" title="">CMS系統源碼</a></li><li><a href="#" title="">seo工具軟體</a></li>        </ul>        </li>            <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">生活常識</a>        <ul><li><a href="#">生活常識</a></li><li><a href="#">健康知識</a></li><li><a href="#">美容瘦身</a></li><li><a href="h#">飲食常識</a></li><li><a href="#">養生之道</a></li>        </ul>        </li> </ul></div></body></html>

js+css精美二級導航，適合想學一些基礎點的、基礎js知識技巧的朋友們。其實本菜單的完成不僅僅是需要基礎知識，更需要的是對CSS熟悉之後的巧妙構思，菜單可能都會寫，但寫出好菜單就不那麼容易了。
推薦閱讀：

※戶外荒野出發前要搞懂的導航知識
※《青州舍利塔下銘》考略 >>佛學雜論>>五明研究>>佛教導航
※大運導航變格的二例八字
※ROS導航包源碼學習3 --- costmap_2d
※▲山海經海經新釋卷一　　山海經１第六２　　海外南經３--- 國學導航－山海經校註

TAG:導航 | 菜單 |