JS實現(xiàn)樣式清新的橫排下拉菜單效果
本文實例講述了JS實現(xiàn)樣式清新的橫排下拉菜單效果。分享給大家供大家參考。具體如下:
這是一款灰色調(diào)橫排清新的下拉菜單,完全符合WEB標(biāo)準(zhǔn),兼容性不錯,菜單簡潔好用,適合大部分的網(wǎng)頁風(fēng)格。如果色調(diào)不是你想要的,自己發(fā)揮聰明才智,修改一下吧。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-simple-style-hp-menu-demo/
具體代碼如下:
<!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>CSS下拉菜單,豎向</title> <style type="text/css" media="screen"> <!-- #Nav { width: auto; float: left; border-left: 1px solid #777; } ul { margin: 0px; padding: 0px; list-style: none; } ul li { position: relative; width: 120px; float: left; } li ul { position: absolute; left: 0px; top: 23px; display: none; border-bottom: 1px solid #777; border-left: 0px; } ul li a { display: block; font-size: 12px; line-height: 22px; text-decoration: none; color: #333; background-color: #FFF; height: 22px; padding-left: 8px; border: 1px solid #777; border-left: 0px; } ul li ul li a { border: 1px solid #777; border-bottom: 0px; } a:hover { color: #F60; background-color: #EFEFEF; } * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } li:hover ul, li.over ul { display: block; } --> </style> <script language="javascript" type="text/javascript"> <!-- startList = function() { if (document.all && document.getElementById) { var menuRoot = document.getElementById("Menu"); for (var i = 0; i < menuRoot.childNodes.length; i++) { var node = menuRoot.childNodes[i]; if (node.nodeName == "LI") { node.onmouseover = function() { this.className += " over"; } node.onmouseout = function() { this.className = this.className.replace(" over", ""); } } } } } window.onload = startList; --> </script> </head> <body> <div id="Nav"> <ul id="Menu"> <li><a href="#">首頁</a></li> <li><a href="#">關(guān)于我們</a> <ul> <li><a href="#">網(wǎng)站介紹</a></li> <li><a href="#">客戶反饋</a></li> <li><a href="#">產(chǎn)品服務(wù)</a></li> </ul> </li> <li><a href="#">腳本下載</a> <ul> <li><a href="#">最新腳本</a></li> <li><a href="#">下載排行</a></li> <li><a href="#">分類索引</a></li> </ul> </li> <li><a href="#">網(wǎng)頁特效</a> <ul> <li><a href="#">菜單</a></li> <li><a href="#">布局</a></li> </ul> </li> </ul> </div> </body> </html>
希望本文所述對大家的JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JS拖拽的進(jìn)一步練習(xí),移動與拉伸實現(xiàn)代碼
這次增加了一些相關(guān)的功能,增加四個角的拉伸改變寬度,主要還是用到一些簡單的坐標(biāo)位置計算,沒有什么技術(shù)難度,熟練了一下自己對拖拽的運(yùn)用2012-05-05MVVM模式中ViewModel和View、Model有什么區(qū)別?
這篇文章主要介紹了MVVM模式中ViewModel和View、Model有什么區(qū)別?本文分別解釋了它們的功能和作用,然后總結(jié)了它之間的區(qū)別,需要的朋友可以參考下2015-06-06一文帶你掌握J(rèn)avaScript中的EventLoop機(jī)制
JavaScript是?單線程、非阻塞?的,它通過事件隊列?(Event?Loop)?的方式來實現(xiàn)異步回調(diào),所以本文小編就帶大家來深入了解一下JavaScript中的EventLoop機(jī)制,需要的可以了解下2024-02-02跟我學(xué)習(xí)javascript的嚴(yán)格模式
跟我學(xué)習(xí)javascript的嚴(yán)格模式,對javascript嚴(yán)格模式進(jìn)行概述,進(jìn)入嚴(yán)格模式的方法,以及如何調(diào)用和相關(guān)語法,感興趣的小伙伴們可以參考一下2015-11-11前端date.locale?is?not?a?function錯誤的簡單解決辦法
這篇文章主要給大家介紹了關(guān)于前端date.locale?is?not?a?function錯誤的簡單解決辦法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09