小穀實戰Jquery(三)--橫向縱向菜單，小穀jquery
每天一個執行個體看來速率有點低了,今天要多做一點.好了,這次實現的是一個簡單的菜單,Web項目中常見的菜單有兩種:縱向和橫向.從縱向說起,看一下最初的代碼.
html代碼實現最基本的菜單與子功能表
<span style="font-size:18px;"><!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=gb2312" /><title>實戰-菜單效果</title><meta http-equiv-"Content-Type" content="text/html;charset-UTF-8" /><link type="text/css" rel="stylesheet" href="menu.css" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="menu.js"></script></head><body><ul><li class="main"><a href="#">功能表項目1</a><ul><li><a href="#">子功能表項11</a></li><li><a href="#">子功能表項12</a></li></ul></li><li class="main"><a href="#">功能表項目2</a><ul><li><a href="#">子功能表項21</a></li><li><a href="#">子功能表項22</a></li></ul></li><li class="main"><a href="#">功能表項目3</a><ul><li><a href="#">子功能表項31</a></li><li><a href="#">子功能表項32</a></li></ul></li></ul></body></html></span>
用<ul>和<li>標籤建立的是帶有項目符號的列表.,所以接下來我們還要通過CSS設定去除部分樣式,以及設定菜單與子功能表不同的背景色或背景圖,文字格式等.
<span style="font-size:18px;">ul li{/*消除ul和li上預設的小圓點*/list-style:none;}ul{/*清除子功能表的縮排值*/padding:0;}.main{background-image:url(images/title.gif);background-repeat:repeat-x;width:120px;}li{background-color:#EEEEEE;}a{/*取消所有的底線*/text-decoration:none;padding-left:20px;display:block;display:inline-block;width:100px;padding-top:3;padding-bottom:3;}.main a{color:white;background-image:url(images/collapsed.gif);background-repeat:no-repeat;background-psition:3px center;}.main li a{color:black;background-image:none;}.main ul{display:none;}</span>
最後js實現主菜單單擊顯示或隱藏子功能表.
<span style="font-size:18px;">$(document).ready(function(){//給主菜單註冊click事件,點擊時顯示被隱藏的子功能表項$(".main > a").click(function(){//找到主功能表項目對應的子功能表項var ulNode=$(this).next("ul");if (ulNode.css("display")=="none"){ulNode.css("display","block");}else{ulNode.css("display","none");} });})</span>
一個基本的縱向菜單就算完成了.看一下Web頁面的效果.
細心的朋友一定發現了菜單展開狀態下的表徵圖是不一樣的,而上面js中並沒有相關函數的實現代碼.是的,這是因為我在實現橫向菜單設計後(包括表徵圖變化的改進)又在原來代碼中添加了一句:changeIcon($(this));關於這個函數的實現在後面的橫向菜單中展示.
橫向菜單:
html代碼基本一樣,這裡寫在一個檔案中,故只改了class="hmain". 而CSS代碼也基本一致,只是對其中公用的部分加入".hmain",所有的樣式即應用到該類標籤下.所以,從縱向菜單到橫向菜單的修改,只是分分鐘的事!
上面提到的那個改變表徵圖的功能在下面的js中:
$(document).ready(function(){//橫向菜單//當滑鼠滑過時,顯示或隱藏子功能表項,並改變主菜單表徵圖$(".hmain").hover(function(){ $(this).children("ul").slideDown();changeIcon($(this).children("a"));},function(){$(this).children("ul").slideUp();changeIcon($(this).children("a"));});})// 修改主菜單的指示表徵圖function changeIcon(mainNode){if(mainNode){if(mainNode.css("background-image").indexOf("collapsed.gif")>=0){mainNode.css("background-image","url('images/expanded.gif')");}else{mainNode.css("background-image","url('images/collapsed.gif')");}}}
下面我總結了一下主要用到的技術.
構建多層菜單可以通過ul和li嵌套來實現,li是有縮排的.做Web開發一定要儘力使自己寫的頁面在各個瀏覽器都正常顯示,這個過程最頭疼就是IE,比如清除子功能表的縮排,只有padding和margin都為0的時候才可以在IE6和7中正常顯示.除此之外,IE6以外的瀏覽器都可以通過設定display的值為block來讓a元素充滿所在的地區.只有IE6需要設定display為inline-black並設定a的寬度.另外一點就是如果一個元素上同時定義了背景圖和背景色,那麼瀏覽器會選擇使用哪一個?答案是背景圖.
上面的js代碼通過if語句判斷,如果子功能表隱藏則單擊主菜單時顯示,如果顯示則單擊時隱藏.不知道朋友是否還記得jQuery的宗旨:write less, do more.所以,我們可以用這樣一句話來代替上面的N行代碼:ulNode.slideToggle(); toggle方法的強大之處在於,它省去了我們判斷元素是顯示還是隱藏的狀態,直接讓顯示的隱藏,隱藏的顯示.
jQuery的學習還在繼續,一路走,一路收穫.
在一樓基礎上加了東西
jquery ajax 三級聯動菜單問題
如果是網路的問題的話就基本沒什麼辦法了！後台最佳化也就是最佳化你的php代碼和sql語句！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
