今天，突然想復習下之前學習做導航菜單的一些知識。之后覺得下拉菜單非常好玩兒，於是自己試着用JS調出了效果。網上有眾多方法，但是感覺不是很對我的胃口，我喜歡HTML/CSS/JavaScript分離着寫，用戶體驗重要，碼農審美也很重要啊，O(∩_∩)O~
在做下拉菜單的過程中，有以下心得：
1.this是個好東西，比如在鼠標事件中，它代表此時的鼠標事件對象本身，免去去用其他方式代表改對象的麻煩；
2.getElementsByTagName或者getElementByClassName方法獲得的是一個數組，需要在其后添加“[]”,或者用的時候注意取出。要不然后面想直接對其屬性進行編輯，是不可行的；
3.一定要仔細，一定要仔細，一定要仔細！（重要的事情說三遍）養成良好的代碼書寫習慣很重要，要適當規范自己的風格。
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠標點擊事件</title> <style type="text/css"> *{margin:0;padding:0;list-style:none;text-decoration:none;} #menu{width:500px;height:40px;margin:0 auto;border:2px solid #FF8600;} ul>li{float: left;line-height: 40px;width: 100px;text-align: center;} ul li a{color:#bebcbc;} ul li ul{display:none;overflow:hidden;background:#FFF;border:1px solid #FF8600;border-top:1px solid #FFF;} ul li ul li{border-bottom:1px solid #FF8600;height:25px;line-height:25px;} ul li a:hover{color: #ff8600;display: block;background: #EFEFF7;} </style> </head> <body> <ul id="menu"> <li><a href="">郵箱<img src="sel.png"></a> <ul> <li><a href="">免費郵箱</a></li> <li><a href="">VIP郵箱</a></li> <li><a href="">企業郵箱</a></li> </ul> </li> <li><a href="">我的菜單 <img src="sel.png"></a> <ul> <li><a href="">新聞</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><a href="">博客<img src="sel.png"></a> <ul> <li><a href="">博客評論</a></li> <li><a href="">未讀提醒</a></li> </ul> </li> <li><a href="">移動客戶端 <img src="sel.png"></a> <ul> <li><a href="">新浪微博</a></li> <li><a href="">新浪新聞</a></li> <li><a href="">新浪體育</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><a href="">微博<img src="sel.png"></a> <ul> <li><a href="">私信</a></li> <li><a href="">評論</a></li> <li><a href="">@我</a></li> </ul> </li> </ul> <script type="text/javascript"> // 下拉菜單 var ul=document.getElementById("menu") var lis=ul.getElementsByTagName("li") for (var i = 0; i < lis.length; i++) { lis[i].onmouseover=function () { var oUl=this.getElementsByTagName("ul")[0]; oUl.style.display="block"; } lis[i].onmouseout=function () { var oUl=this.getElementsByTagName("ul")[0]; oUl.style.display="none"; } } </script> </body> </html>
效果如下：
雖然對於大神來講很簡單，但是真的有成就感，因為自己還不是很懂，並且是自己摸索出來的，哈哈，加油啊！