技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

css實(shí)現(xiàn)漂亮的下拉菜單，簡單方便實(shí)用

作者:admin    時間:2017-8-1 8:36:55    瀏覽:

本文介紹用css實(shí)現(xiàn)的下拉菜單，簡單、方便、實(shí)用。

為什么推薦用css實(shí)現(xiàn)的下拉菜單？因為html默認(rèn)的 select 控件生成的下拉菜單樣式不好控制，不夠美觀，還有一個致命的缺點(diǎn)，是在IE里 select 控件永遠(yuǎn)在最上層，其他div想覆蓋顯示在它上面都不行，而使用css打造的下拉菜單，不僅樣式可以更加美觀，設(shè)計可以隨意發(fā)揮，且層的上下位置也十分好控制，不受瀏覽器影響。

css實(shí)現(xiàn)的下拉菜單

css實(shí)現(xiàn)的下拉菜單

本文介紹的下拉菜單，已經(jīng)在IE8/IE9/IE11、360極速、360安全、Chrome、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">
<head>
<meta name="renderer" content="ie-stand"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css實(shí)現(xiàn)select下拉菜單</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<style type ="text/css" >
.divlinebox{
  clear:both;
  margin-top:50px;
  margin-left:50px;
  padding-top:15px;
  padding-left:15px;
  width:350px;
  height:30px;
  color:#666;
  background-color: #E6EAE4;
  font: 400 12px/150% Tahoma, Helvetica, Arial, sans-serif; 
}
.divlinebox span{
  float:left;
  margin-right:5px;
}
.spanInput{
  float:left;
  border: 1px solid #a1a1a1; 
}
.txtInputboxSVR{
  height:14px;
  height:13px\9;
  BORDER:1px solid #ccc; 
  padding:0px 2px 1px 2px;
  padding-top:2px\9;
  padding-bottom:0px\9;
  text-align:center;
  FONT-SIZE:12px; 
  font-family:tahoma,arial,Verdana,Geneva,Arial,Helvetica,sans-serif;
  COLOR: #666666; 
}
/* IE9+ Chrome Firefox */
@media all and (min-width:0) {
  .txtInputboxSVR{
    padding-top:1px\9;
    padding-bottom:1px\9;
  }
}
/* Chrome 360極速 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .txtInputboxSVR{
    height:13px;
    padding-top:0px;
    padding-bottom:2px;
  }
}
.w120{width:120px;}

.spanBtnSelect{
  float:left;
  width:24px;
  height:20px;
  background:url(btn-select.png) no-repeat 0 -2px;
  cursor:pointer;
}
.spanBtnSelect:hover{
  background:url(btn-select.png) no-repeat 0 -27px;
}

.txtInputbox {
  height:14px;
  BORDER:1px solid #ccc; 
  padding:0px 2px 1px 2px;
  text-align:center;
  FONT-SIZE:12px; 
  font-family:tahoma,arial,Verdana,Geneva,Arial,Helvetica,sans-serif;
  COLOR: #666666; 
}

.dnslist{
  float:left;
  position:absolute;
  overflow-y:scroll;
  overflow-x:hidden;
  width:150px;
  height:200px;
  BORDER:1px solid #a1a1a1; 
  background:#fffbf0;
  z-index:999;
  margin-top:19px;
  margin-left:82px;
}

.dnslist span.optionContent{
  width:100%;
  height:20px;
  BORDER-BOTTOM:1px solid #ccc; 
  padding:2px 3px 2px 3px;
  text-align:left;
  FONT-SIZE:12px; 
  font-family:tahoma,arial,Verdana,Geneva,Arial,Helvetica,sans-serif;
  COLOR: #666666; 
  cursor:pointer;
  overflow:hidden;
}
.dnslist span.optionContent:hover{
  background:#e7fafa;
  color:#0065b3;
}
.dnslist span.optionTop{
  width:100%;
  height:20px;
  BORDER-BOTTOM:1px solid #ccc; 
  padding:2px 3px 2px 3px;
  text-align:left;
  font-family:tahoma,arial,Verdana,Geneva,Arial,Helvetica,sans-serif;
  COLOR: #666666; 
  font-weight:bold;
  FONT-SIZE:13px; 
  font-style:oblique;
  background:#aaffff;
}
</style> 
</head>
<body>
<div class="divlinebox" >
<span style="font-weight:bold;width:77px">DNS服務(wù)器：</span><span class='spanInput' style="margin-right:0px;"><input type='text' id='txtInputDnsName' class='txtInputboxSVR w120' value='廣東廣州電信' onclick='showdnslist_onclick()' readonly /></span><span id='spanBtnSelect' class='spanBtnSelect' onclick='showdnslist_onclick()'></span>
<div id="divDnsList" class="dnslist" style="display:none">
<span class='optionTop'>電信DNS↓</span><span class='optionContent' id="option01" onclick="selectDns(this.id)">廣東電信</span><span class='optionContent' id="option02" onclick="selectDns(this.id)">廣東廣州電信</span><span class='optionContent' id="option03" onclick="selectDns(this.id)">北京電信</span><span class='optionContent' id="option04" onclick="selectDns(this.id)">江西南昌電信</span><span class='optionContent' id="option05" onclick="selectDns(this.id)">重慶電信</span><span class='optionContent' id="option06" onclick="selectDns(this.id)">上海市閔行區(qū)電信</span><span class='optionContent' id="option07" onclick="selectDns(this.id)">廈門電信</span><span class='optionContent' id="option08" onclick="selectDns(this.id)">河南鄭州電信</span><span class='optionTop'>聯(lián)通DNS↓</span><span class='optionContent' id="option09" onclick="selectDns(this.id)">山東濟(jì)南聯(lián)通</span><span class='optionContent' id="option10" onclick="selectDns(this.id)">北京聯(lián)通</span><span class='optionTop'>移動DNS↓</span><span class='optionContent' id="option11" onclick="selectDns(this.id)">西藏移動</span><span class='optionContent' id="option12" onclick="selectDns(this.id)">吉林移動</span><span class='optionContent' id="option13" onclick="selectDns(this.id)">廣州移動</span><span class='optionTop'>海外DNS↓</span><span class='optionContent' id="option14" onclick="selectDns(this.id)">美國谷歌DNS</span><span class='optionContent' id="option15" onclick="selectDns(this.id)">臺灣中華電信</span><span class='optionContent' id="option16" onclick="selectDns(this.id)">香港</span><span class='optionTop'>其他DNS↓</span><span class='optionContent' id="option17" onclick="selectDns(this.id)">北京教育網(wǎng)</span><span class='optionContent' id="option18" onclick="selectDns(this.id)">廣東教育網(wǎng)</span><span class='optionContent' id="option19" onclick="selectDns(this.id)">深圳教育網(wǎng)</span><span class='optionContent' id="option20" onclick="selectDns(this.id)">廣州教育網(wǎng)</span><span class='optionContent' id="option21" onclick="selectDns(this.id)">114DNS</span>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function showdnslist_onclick(){
  if(document.getElementById("divDnsList").style.display == "none"){
    document.getElementById("divDnsList").style.display = "";
  }
  else{
    document.getElementById("divDnsList").style.display = "none";
  }
}
function selectDns(id){
  document.getElementById("txtInputDnsName").value = document.getElementById(id).innerHTML;
  document.getElementById("divDnsList").style.display = "none";
}
$(document).mousedown(
  function(event){
    if (event.target.id != 'spanBtnSelect' && event.target.id != 'divDnsList' && event.target.id != 'txtInputDnsName' && event.target.parentNode.className != 'dnslist') {
      document.getElementById("divDnsList").style.display = "none";
    }
  }
);
</script>

execcodegetcode

代碼分析

1、本實(shí)例需要用到JQuery，因此要引用JQuery文件，推薦用百度公共庫：http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

2、本實(shí)例需要用到一張圖片 btn-select.png ，一般使用的是向下三角形，不過本實(shí)例用的是三橫線。

3、實(shí)例代碼后面的JS主要是賦值作用，把選擇項的值賦予輸入框里（本例 id='txtInputDnsName' ），在提交表單的時候，下拉菜單的值是取輸入框里的值。

CSS實(shí)現(xiàn)的下拉菜單，此前還介紹過一個《漂亮實(shí)用的div+css實(shí)現(xiàn)的下拉菜單》，是卡卡測速網(wǎng)的國內(nèi)網(wǎng)站測速里使用的下拉菜單，樣式也很漂亮。 

標(biāo)簽: css  下拉菜單  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */