|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
漂亮實用的div+css實現(xiàn)的下拉菜單 已通過IE、firefox測試
作者:admin 時間:2012-10-9 15:0:16 瀏覽:html里使用select控件，非常容易就能實現(xiàn)下拉菜單的效果。但是由于select控件只能更改長度，不能更改高度和顏色等樣式，因此在網(wǎng)頁設計中有時候顯得與整體布局搭配不太美觀。正因為這個原因，div+css實現(xiàn)的下拉菜單便大量被網(wǎng)頁設計師使用。通過div+css，可以隨心所欲的實現(xiàn)自己想要的樣式效果，使得下拉菜單與網(wǎng)頁整體布局搭配的更美觀和諧。
本文給大家推薦一個非常漂亮的div+css實現(xiàn)的下拉菜單，這個菜單在卡卡網(wǎng)站測速頁面里一直使用著，效果非常不錯。
div+css實現(xiàn)的下拉菜單
今天我特地把此菜單的代碼抽離出來，與大家共享。此代碼已經(jīng)通過了IE、firefox等主流瀏覽器的測試。
代碼如下：
<!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">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div+css實現(xiàn)下拉菜單</title>
<body>
<style type="text/css">
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
margin:0;
padding:0;
}
body {
height:auto !important;
color:#666;
background-color: #E6EAE4;
font: 400 12px/150% Tahoma, Helvetica, Arial, sans-serif;
}
ul {
list-style:none;
}
a:link, a:visited {
color:#656D77;
text-decoration:none;
}
a:hover, a:active {
color:#333;
text-decoration:underline;
}
.search-form {
MARGIN-LEFT: 205px !important; MARGIN-LEFT: 100px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; FLOAT: left; WIDTH: 400px; LINE-HEIGHT: 24px; HEIGHT: 24px; FONT-SIZE:14px;
}
.search-form LI {
FLOAT: left; POSITION: relative
}
.selector {
BORDER-RIGHT: #b4b4b4 1px solid; BORDER-TOP: #b4b4b4 1px solid; PADDING-LEFT: 0px; BACKGROUND: #fff; FLOAT: left; PADDING-BOTTOM: 0px; BORDER-LEFT: #b4b4b4 1px solid; LINE-HEIGHT: 22px; PADDING-TOP: 0px; BORDER-BOTTOM: #b4b4b4 1px solid; HEIGHT: 22px
}
.category {
FLOAT: left; WIDTH: 286px !important; WIDTH: 291px;MARGIN-LEFT: 0px;
}
.search-form .trigger {
BACKGROUND: url(images/nav.png) #eee no-repeat 0px -200px; FLOAT: left; WIDTH: 16px; TEXT-INDENT: -9999px; HEIGHT: 22px
}
.search-form INPUT.text {
BORDER-RIGHT: #b4b4b4 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #b4b4b4 1px solid; PADDING-LEFT: 4px; FLOAT: left; PADDING-BOTTOM: 2px; BORDER-LEFT: #b4b4b4 1px solid; WIDTH: 250px; COLOR: #ccc; LINE-HEIGHT: 18px; PADDING-TOP: 2px; BORDER-BOTTOM: #b4b4b4 1px solid; HEIGHT: 18px
}
.search-form INPUT.button {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 0px; BACKGROUND: url(images/searchbutton.png) #eee no-repeat; FLOAT: left; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 59px; CURSOR: pointer; TEXT-INDENT: -9999px; HEIGHT: 24px; BORDER-RIGHT-WIDTH: 0px
}
.search-form A:link {
COLOR: #0067b6
}
.search-form A:visited {
COLOR: #0067b6
}
.droplist {
BORDER-RIGHT: #b4b4b4 1px solid; BORDER-TOP: #b4b4b4 1px solid; MARGIN-TOP: 24px; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; OVERFLOW: hidden; BORDER-LEFT: #b4b4b4 1px solid; WIDTH: 302px !important; WIDTH: 307px; BORDER-BOTTOM: #b4b4b4 1px solid; POSITION: absolute
}
.droplist LI {
WIDTH: 302px !important; WIDTH: 307px; HEIGHT: 22px !important; HEIGHT:14px;
}
.droplist LI A {
DISPLAY: block; PADDING-BOTTOM: 2px !important; PADDING-BOTTOM: 0px; WIDTH: 302px !important; WIDTH: 307px;
}
.droplist LI A:link {
COLOR: #333
}
.droplist LI A:visited {
COLOR: #333
}
.droplist LI A:hover {
BACKGROUND: #e4ebee; TEXT-DECORATION: none
}
.droplist LI A:active {
BACKGROUND: #e4ebee; TEXT-DECORATION: none
}
</style>
<div id="divUserAgent" style="padding:20px 5px 5px 0px;width:600px;height:30px;">
<UL class="search-form" style="z-index:999;">
<LI>瀏覽器: </LI>
<LI>
<P class=selector><SPAN class=category id=headSlected
onclick="if(document.getElementById('headSel').style.display=='none'){document.getElementById('headSel').style.display='block';}else {document.getElementById('headSel').style.display='none';};return false;"
onmouseout="drop_mouseout('head');">Firefox: Mozilla/5.0 (Windows; U; Win...</SPAN> <A class=trigger
onclick="if(document.getElementById('headSel').style.display=='none'){document.getElementById('headSel').style.display='block';}else {document.getElementById('headSel').style.display='none';};return false;"
onmouseout="drop_mouseout('head');"
href="javascript:void(0)"> </A></P>
<UL class=droplist id=headSel style="DISPLAY: none">
<LI><A id=headSel onMouseOver="drop_mouseover('head');"
onclick="return search_show('head','ResName',this)"
onmouseout="drop_mouseout('head');"
href="javascript:void(0)">MSIE: Mozilla/4.0 (compatible; Windows...</A></LI>
<LI><A id=_searchTypetech onMouseOver="drop_mouseover('head');"
onclick="return search_show('head','Content',this)"
onmouseout="drop_mouseout('head');"
href="javascript:void(0)">Firefox: Mozilla/5.0 (Windows; U; Windows...</A></LI>
<LI><A id=_searchTypetech onMouseOver="drop_mouseover('head');"
onclick="return search_show('head','Content',this)"
onmouseout="drop_mouseout('head');"
href="javascript:void(0)">Opera: Opera/9.27 (Windows NT 5.2; U;...</A></LI>
<LI><A id=_searchTypetech onMouseOver="drop_mouseover('head');"
onclick="return search_show('head','Content',this)"
onmouseout="drop_mouseout('head');"
href="javascript:void(0)">Safari: Mozilla/5.0 (Windows; U; Windows...</A></LI>
<LI><A id=_searchTypetech onMouseOver="drop_mouseover('head');"
onclick="return search_show('head','Content',this)"
onmouseout="drop_mouseout('head');"
href="javascript:void(0)">Chrome: Mozilla/5.0 (Windows; U; Windows...</A></LI>
</UL></LI>
</UL>
</div>
<SCRIPT type="text/javascript">
<!--
function drop_mouseout(pos){
var posSel=document.getElementById(pos+"Sel").style.display;
if(posSel=="block"){
timer = setTimeout("drop_hide('"+pos+"')", 1000);
}
}
function drop_hide(pos){
document.getElementById(pos+"Sel").style.display="none";
}
function drop_mouseover(pos){
try{window.clearTimeout(timer);}catch(e){}
}
function search_show(pos,st,href){
var fm = document.CheckForm;
var txt = href.innerHTML;
document.getElementById(pos+"Sel").style.display="none";
document.getElementById(pos+"Slected").innerHTML=txt;
try{window.clearTimeout(timer);}catch(e){}
return false;
}
//-->
</SCRIPT>
</body>
</html>
注意：此菜單需要使用兩張小圖片，上述代碼里出現(xiàn)的images/searchbutton.png和images/nav.png，拷貝代碼時不要忘了把這兩張小圖片也下載并放到相應的目錄下。
效果圖如下：
div+css實現(xiàn)的下拉菜單
標簽: css
- 站長推薦
