用CSS做<ul>菜单的样式控制
用prototype + scriptaculous.js做菜单的动态效果.关于这些JS的资料我的以前文章里说过
用cookiejar.js做操作近的事件忆
<div id="menu_div"> <div style="width: 183px; height: 20px; margin: 0 auto;"></div> <div class="left_table"> <ul id="primary-nav"> <li> <label onclick="openCloseMenu('order_menu')"> <img id="order_menu_arrow" class="left" src="/images/Darrow.gif" alt="arrow" /> 订单跟踪查询<img src="/images/left_04.jpg" alt="order"/> </label> <ul id="order_menu" class="menubar over"> <li><a href="orderTrace.html">订单跟踪</a></li> </ul> </li> <li> <label onclick="openCloseMenu('comm_menu')"> <img id="comm_menu_arrow" class="left" src="/images/Rarrow.gif" alt="arrow" /> ##支付查询<img src="/images/left_05.jpg" alt=""/> </label> <ul id="comm_menu" class="menubar"> <li><a href="addSeries.html">####</a></li> <li><a href="setCommision.html">###</a></li> <li><a href="listCommision.html">###</a></li> </ul> </li> </ul> </div> </div> <script type="text/javascript"> showMenu(); </script>
/* A CSS Framework by Liu_jc of Content with Style */ /* SITE MENU LAYOUT */ /* MENU */ div#menu_div { width:223px; min-height:600px; background-image:url(/images/left_01.jpg); } ul#primary-nav, ul#primary-nav ul{ padding:0px; margin:0px; border: 0; list-style:none; } ul#primary-nav li { position: relative; list-style: none; } ul#primary-nav li label { text-align: center; width:182px; height:33px; float:left; background-image:url(images/menu_th_bg.jpg); background-repeat:no-repeat; font-size:14px; font-weight:bold; color:#336699; } ul#primary-nav li label img { padding-left:15px; vertical-align:bottom; } ul#primary-nav li ul li { width:183px; height:20px; text-align:center; border-bottom:1px #999999 dashed; margin-top: 5px; float:left; } ul#primary-nav li ul li a { font-size:12px; color:#999999; text-decoration:none; } /* ul#primary-nav li ul.show { display:block; } ul#primary-nav li ul.hidden { display:none; } */ /* END MENU */
展开菜单
function openCloseMenu(menuId) { var myCookies = new CookieJar(); $(menuId).toggle('slide', {duration: 0}); var dis = $(menuId).style.display; if(dis == "none") { $(menuId + "_arrow").src = "/images/Rarrow.gif"; myCookies.put(menuId, "close"); }else { $(menuId + "_arrow").src = "/images/Darrow.gif"; myCookies.put(menuId, "open"); } }
刷新页面后记忆
function showMenu() { var myCookies = new CookieJar(); var menubars = $$("ul.menubar"); for(var i = 0; i < menubars.length; i++) { var menuBarId = menubars[i].id; var showMenuBar = myCookies.get(menuBarId); if(showMenuBar == "open") { menubars[i].show(); $(menuBarId + "_arrow").src = "/images/Darrow.gif"; } else { menubars[i].hide(); $(menuBarId + "_arrow").src = "/images/Rarrow.gif"; } } }
1 楼
3923075
2010-11-03
哎 一看就知道 做电信的 啊啊啊