/******************************************************************** *普通動態下拉菜單實現步驟 *1.使用ready()函數實現頁面整體載入後執行特效效果 *2.在function()內部實現主菜單的滑鼠進入事件(mouseenter),所有的下拉效果都在這個事件中 *3.先停止播放所有特效動畫並隱藏下級菜單 *4.停止下級菜單其他動畫並使其下拉 *5.添加下拉菜單的滑鼠移出事件,讓下級菜單向上收起 * * *jquery開發普通下拉菜單 * *mouseenter:該元素響應滑鼠進入到元素時產生的事件,與mouseover的區別是:不論滑鼠指針穿過被選元素或其子元素，都會觸發 mouseover. 只有在滑鼠指針穿過被選 *元素時，才會觸發 mouseenter 事件 * *stop():該函數停止所有在指定元素上正在運行的動畫.stop([clearQueue],[gotoEnd]),第一個參數,可選.清空動畫隊列,如果設置為真,則立刻清空隊列,動畫立即停止. *第二個參數.可選讓當前正在執行的動畫立即完成,並重新設定show和hide的原始樣式. * *offset():該函數獲取匹配元素在當前窗口的相對偏移,無參數調用時,返回的對象包含兩個整形屬性:left和top,此方法只對可見元素有效.攜帶參數時重新設置元素位置. *此元素位置是相對於document對象.如果元素的position屬性石static,會被改成relative實現重新定位. * ********************************************************************/****************************************************************************************************效果圖:
****************************************************************************************************源碼:<!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=utf-8" /><title>無標題文檔</title><style type="text/css"> ul{ list-style:none; padding:0px; margin:0px;} ul li{ display:inline; float:left} ul li a{ width:100px; height:30px; color:#FFF; background:#990E00; margin-right:5px; font-size:12px; text-decoration:none; line-height:30px; text-align:center; border:1px solid #560E00; display:block;} ul li a:hover{ width:100px; height:30px; color:#FFF; font-weight:bold; background:#63C;font-size:15px; text-decoration:none;line-height:30px;text-align:center; border:1px solid #560E00; display:block;} ul li.submenu a{ width:100px; height:30px; color:#FFF; background:#939; margin-right:5px; font-size:12px; text-decoration:none; line-height:30px; text-align:center; border:1px solid #560E00; display:block;} ul li.submenu a:hover{ width:100px; height:30px; color:#FFF; background:#93F; margin-right:5px; font-size:12px; text-decoration:none; line-height:30px; text-align:center; border:1px solid #560E00; display:block;} ul li.submenu{ display:none} </style><script type="application/javascript" src="jquery-1.4.1.min.js"></script><script type="application/javascript"> $(function(){ $(".mainmenu").mouseenter(function(){ //停止子菜單的所有動畫,並隱藏 $(".submenu").stop(false,true).hide(); //獲取當前元素li的父元素ul,其下的所有子元素,一個兩個li var submenu = $(this).parent().next(); //設置子菜單的顯示位置,及css樣式 submenu.css({position:"absolute",top:$(this).offset().top+$(this).height()+"px",left:$(this).offset().left+"px",zIndex:1000}); //停止子菜單的所有動畫,並向下顯示 submenu.stop().slideDown(300); //添加下級菜單的移出事件,讓下級菜單自動升起 submenu.mouseleave(function(){ $(this).slideUp(300); }); }) })</script></head><body> <div id="menudiv"> <ul> <li><a href="#" class="mainmenu">Menu One</a></li> <li class="submenu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </li> </ul> <ul> <li><a href="#" class="mainmenu">Menu Two</a></li> <li class="submenu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </li> </ul> </div></body></html>
推薦閱讀：
※十條笑話：男看到菜單已經點了一千多了，拔腿就跑
※2018年，年夜飯菜單，請查收
※純css寫的3級導航菜單
※使用jQuery創建簡單的手風琴菜單
※蓬江區金駿牛扒城：西餐菜單
TAG:動態 | 菜單 | 實現 |
