網頁導航下拉菜單原理
小雲童鞋在這和大家先講下菜單實現原理先，技術大牛呢你應該比我更明白的了，此文送給剛入門的童鞋的，希望對他們有點點幫助。
進入正題：網頁菜單經常可以看到，滑鼠移動到注菜單上面，會彈出對應的子菜單。先來個效果先：重重的點擊我菜單都是運用「顯示和隱藏」，但是當中有一些細節必須要注意。那要注意什麼呢？css的定位，這就對了，相對和絕對定位。相對定位是處於標準流的，也就是說佔有空間啦，絕對定位是不處於標準流的，你應該明白這吧！所以呢要隱藏的那部分一定要設置絕對定位。聽的很模糊吧！沒關係下面有例子說的很明白的哦，給些信心。導航html一般是這樣構建的：<ul id=」nav」> <li> <a href=」#」>下拉菜單1</a> <ul> <li> <a href=」#」>a1</a></li> <li> <a href=」#」>a2</a></li> </ul> </li> <li> <a href=」#」>下拉菜單2</a> <ul> <li> <a href=」#」>b1</a></li> <li> <a href=」#」>b2</a></li> </ul> </li> <li> <a href=」#」>下拉菜單3</a> <ul> <li> <a href=」#」>c1</a></li> <li> <a href=」#」>c2</a></li> </ul> </li> <li> <a href=」#」>下拉菜單4</a> <ul> <li> <a href=」#」>d1</a></li> <li> <a href=」#」>d2</a></li> </ul> </li></ul>這時到CSS書寫了，這裡先不講怎樣美化導航先，把簡單的框架搭建成先。CSS大體是這樣：ul{list-style-type:none; padding:0; margin:0;}ul li{ float:left;}ul li ul li{float:none;}ul li a{width:100px; display:block; text-align:center; text-decoration:none;padding:3px 1px; background-color:#ccc;}ul li ul a{background-color:#eee;}ul li a:hover{ background-color:#666; color:#fff;}
這時半成品出來了
仔細的你發現CSS有問題那就是定位問題啦？別急，後面會慢慢說，耐心點哦！那我們先把下拉的菜單隱藏先，這時要改CSS了，加上ul li ul{display:none};這行代碼就隱藏啦！變成了
呵呵……離成功不遠了。現在問題就出來了。滑鼠移上去怎樣讓下拉菜單顯示呢？這時就用到了JS了，因為IE6是不支持li偽類的哦。但是我們還是先用li偽類先哦，為了儘快解決上面提出的定位問題。這時加上一行CSS代碼#nav li:hover ul{display:block;}這時就實現了顯示下拉導航了，除IE6外。
這時問題也出來了，在導航後面加上些文字變成這樣
把滑鼠移到菜導航下把網頁的內容向下推動了：
這不是我們想要的，這就是上面CSS沒定位問題了，也是一定要注意的問題，那怎樣改呢，把ul li改成相對定位ul li{ float:left; display:block; position:relative;}，在ul li裡面的那個ul（即ul li ul )改成絕對定位ul li ul{display:none; position:absolute;}，就沒問題了。
這時還是不算成功，IE6是不支持li:hover,雖然也有JS解決IE6也支持li:hover,但這裡並不討論這個，所以呢還要用到JS,JQ也行。這裡就不解釋JS了，只把代碼貼出來就OK啦！其實學習基礎原理很關鍵，技術大牛都是基礎很過關的。<script> /*用jquery實現 $(function(){ $(「ul>li」).hover(function(){ $(this).find(「ul」).show(); },function(){ $(this).find(「ul」).hide(); }) })*/ //下面是js實現 var nav = document.getElementById(「nav」).childNodes; for (var i=0;i<nav.length;i++){ nav[i].onmouseover = function(){fnNav(this,」block」)}; nav[i].onmouseout = function(){fnNav(this,」none」)}; } function fnNav(obj,flag){obj.getElementsByTagName(「ul」)[0].style.display = flag;}</script>放在body後面，因為載入DOM是從上到下的。
呵呵……終於搞完了，成功的實現了下拉導航。平時我們見到的漂亮導航原理都是這樣實現的，只是他們定義的CSS美化導航了。多級下拉導航原理都是這樣的。寫完了，收工吃飯咯！
你的讚賞是我堅持原創的動力
讚賞共 0 人讚賞推薦閱讀：