欧美精品在线免费,欧洲精品一区,天堂网2020

一個(gè)更加高級(jí)的CSS菜單,絕對(duì)實(shí)用,超強(qiáng)的

深山行者個(gè)人網(wǎng)站 2008/6/24 12:55:26 深山行者字體:大中小瀏覽 4349

以下為詳細(xì)代碼

/*______________01號(hào)標(biāo)簽_____________*/
/*大欄目樣式*/
.bigmenu00 {float:left;}
.bigmenu00 li {line-height:32px;width:80px;}
.bigmenu01 {border:solid 1px #ffb435;background:#fff;color:#fe8939;}
.bigmenu02 {border:solid 1px #ffb435;background:#fcf1eb;color:#fe8939;}

/*小欄目樣式*/
.sallmenu00 {float:left;}
.sallmenu00 li {line-height:28px;}
.sallmenuall {color:#787878;font-weight:bold;}

/*______________02號(hào)標(biāo)簽_____________*/
/*大欄目樣式*/
.bmenu00 {float:left;}
.bmenu00 li {line-height:32px;width:80px;}
.bmenu01 {border:solid 1px #fff;background:green;color:#fe8939;}
.bmenu02 {border:solid 1px #fff;background:red;color:#fe8939;}

/*小欄目樣式*/
.smenu00 {float:left;}
.smenu00 li {line-height:28px;}
.smenuall {color:green;background:#f0f0f0;font-weight:bold;}

/*______________03號(hào)標(biāo)簽_____________*/
/*大欄目樣式*/
.b3menu00 {float:left;}
.b3menu00 li {line-height:32px;width:80px;}
.b3menu01 {border:solid 2px green;background:#fff;color:green;font-weight:bold;}
.b3menu02 {border:solid 2px red;background:#fff;color:red;font-weight:bold;}

/*小欄目樣式*/
.s3menu00 {float:left;}
.s3menu00 li {line-height:28px;}
.s3menuall {color:#fff;background:#000;font-weight:bold;}

.fn12bold {font-weight:bold;color:#fdd0b1;font-size:16px;}

</style>
一個(gè)更加高級(jí)的CSS菜單,絕對(duì)實(shí)用,超強(qiáng)的
                   
<script type="text/javascript">
var oldobjul = new Array(1, 1, 1, 1); //歷史選中ul和li選中對(duì)象索引

// m 選中第m個(gè)li對(duì)象索引
// n 顯示第n個(gè)ul對(duì)象索引
// cname 樣式名稱通用對(duì)象, 例:選中狀態(tài) class01, 未選中狀態(tài) class02, 即cname為class0            
function setTab(m, n, cname)  
{
 if (m != null && n != null && cname != null)
 {
  if (oldobjul[m] != null)
  {
   var oldli = document.getElementById("li" + m.toString() + oldobjul[m].toString());
   var oldul = document.getElementById("ul" + m.toString() + oldobjul[m].toString());
   oldli.className = cname + "2";
   oldul.style.display = "none";
  }
  
  var li = document.getElementById("li" + m.toString() + n.toString());
  var ul = document.getElementById("ul" + m.toString() + n.toString());
  li.className = cname + "1";
  ul.style.display = "block";
  oldobjul[m] = n;
 }
}
</script>     
        
 
<ul class="bigmenu00">                        
 <li id="li01" class="bigmenu01" onmouseover="setTab(0, 1, 'bigmenu0')"><span class="fn12bold">01</span>我要推薦</li>
 <li id="li02" class="bigmenu02" onmouseover="setTab(0, 2, 'bigmenu0')"><span class="fn12bold">02</span>我要查找</li>
 <li id="li03" class="bigmenu02" onmouseover="setTab(0, 3, 'bigmenu0')"><span class="fn12bold">02</span>第三個(gè)</li>
 <li id="li04" class="bigmenu02" onmouseover="setTab(0, 4, 'bigmenu0')"><span class="fn12bold">02</span>這是4444</li>     
</ul>

<ul id="ul01" class="sallmenu00">                        
 <li class="sallmenuall">我要向360500推薦我的商鋪</li> 
</ul>

<ul id="ul02" class="sallmenu00" style="display:none;">                        
 <li class="sallmenuall">查找感興趣的商鋪</li>                  
</ul>

<ul id="ul03" class="sallmenu00" style="display:none;">                        
 <li class="sallmenuall">三三三三三三三三三三三三</li>                  
</ul>

<div style="clear:both;float:left;">
<ul class="bmenu00">                        
 <li id="li11" class="bmenu01" onmouseover="setTab(1, 1, 'bmenu0')"><span class="fn12bold">01</span>我要推薦</li>
 <li id="li12" class="bmenu02" onmouseover="setTab(1, 2, 'bmenu0')"><span class="fn12bold">02</span>我要查找</li>
 <li id="li13" class="bmenu02" onmouseover="setTab(1, 3, 'bmenu0')"><span class="fn12bold">02</span>第三個(gè)</li>
 <li id="li14" class="bmenu02" onmouseover="setTab(1, 4, 'bmenu0')"><span class="fn12bold">02</span>這是4444</li>             
</ul>

<ul id="ul11" class="smenu00">                        
 <li class="smenuall">1111111</li> 
</ul>
<ul id="ul12" class="smenu00" style="display:none;">                        
 <li class="smenuall">2222222</li> 
</ul>
<ul id="ul13" class="smenu00" style="display:none;">                        
 <li class="smenuall">3333333</li> 
</ul>
<ul id="ul14" class="smenu00" style="display:none;">                        
 <li class="smenuall">我要向360500推薦我的商鋪</li> 
</ul>

<div style="clear:both;float:left;position:absolute;top:300px;">
<ul class="b3menu00">                        
 <li id="li21" class="b3menu01" onmouseover="setTab(2, 1, 'b3menu0')"><span class="fn12bold">01</span>我要推薦</li>
 <li id="li22" class="b3menu02" onmouseover="setTab(2, 2, 'b3menu0')"><span class="fn12bold">02</span>我要查找</li>
 <li id="li23" class="b3menu02" onmouseover="setTab(2, 3, 'b3menu0')"><span class="fn12bold">02</span>第三個(gè)</li>
 <li id="li24" class="b3menu02" onmouseover="setTab(2, 4, 'b3menu0')"><span class="fn12bold">02</span>這是4444</li>
</ul>

<ul id="ul21" class="s3menu00">                        
 <li class="s3menuall">aaaaa</li> 
</ul> 
<ul id="ul22" class="s3menu00" style="display:none;">                        
 <li class="s3menuall">bbbbb</li> 
</ul>
<ul id="ul23" class="s3menu00" style="display:none;">                        
 <li class="s3menuall">ccccc</li> 
</ul>
<ul id="ul24" class="s3menu00" style="display:none;">                        
 <li class="s3menuall">我要向360500推薦我的商鋪</li> 
</ul>

<div style="clear:both;float:left;position:absolute;top:300px;">
<ul class="b3menu00">                        
 <li id="li31" class="b3menu01" onmouseover="setTab(3, 1, 'b3menu0')"><span class="fn12bold">01</span>我要推薦</li>
 <li id="li32" class="b3menu02" onmouseover="setTab(3, 2, 'b3menu0')"><span class="fn12bold">02</span>我要查找</li>
</ul>

<ul id="ul31" class="s3menu00">                        
 <li class="s3menuall">aaaaa</li> 
</ul> 
<ul id="ul32" class="s3menu00" style="display:none;">                        
 <li class="s3menuall">bbbbb</li> 
</ul>

前一頁(yè):另外的一種單項(xiàng)的選擇

后一頁(yè):另外一種符合web2.0的鏈接打開方式--利用base打開鏈接

相關(guān)閱讀: [轉(zhuǎn)]javascript緩沖效果; ASP把數(shù)字用逗號(hào)每3位隔開顯示代碼; asp實(shí)現(xiàn)獲得當(dāng)前文章的上一篇信息與下一篇信息功能及代碼; css　a標(biāo)簽與如何利用css中text-indent實(shí)現(xiàn)文章縮進(jìn); 貴豪旅行社; 公眾號(hào)被動(dòng)回復(fù)與客服接口主動(dòng)推送音樂(lè)封面縮略圖ThumbMediaId不顯示bug問(wèn)題; 利用CSS里面的A:hover鼠標(biāo)滑過(guò)縮略圖時(shí)放大圖片; CSS教程：弄懂閉合浮動(dòng)元素

共有0條關(guān)于《一個(gè)更加高級(jí)的CSS菜單,絕對(duì)實(shí)用,超強(qiáng)的》的評(píng)論: 發(fā)表評(píng)論

正在加載評(píng)論......

返回頂部發(fā)表評(píng)論

呢稱:
表情:
內(nèi) 容:	評(píng)論內(nèi)容:不能超過(guò) 1000 字,需審核,請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。
驗(yàn)證碼:

網(wǎng)友評(píng)論聲明,請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。

您發(fā)布的評(píng)論即表示同意遵守以下條款:
一、不得利用本站危害國(guó)家安全、泄露國(guó)家秘密,不得侵犯國(guó)家、社會(huì)、集體和公民的合法權(quán)益;
二、不得發(fā)布國(guó)家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對(duì)自己在本站的言論和行為負(fù)責(zé);
三、本站對(duì)您所發(fā)布內(nèi)容擁有處置權(quán)。

更多信息>>欄目類別選擇: 百度小程序開發(fā); 微信小程序開發(fā); 微信公眾號(hào)開發(fā); uni-app; asp函數(shù)庫(kù); ASP; DIV+CSS; HTML; python

更多>>同類信息: jquery設(shè)置或獲取修改classname; 利用css3.0寫出一個(gè)音樂(lè)播放的唱片碟盤的效果; 利用css中的scale()實(shí)現(xiàn)放大縮小效果; 利用background-color:#000000a8在背景顏色16進(jìn)制代碼之后加字母加上數(shù)字讓背景色透明; css背景使用base64編碼或者將base64編碼放在img圖片標(biāo)簽中; 利用css3中的-webkit-font-smoothing把網(wǎng)頁(yè)文字的毛邊去掉

更多>>最新添加文章: dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT; Android移動(dòng)端自動(dòng)化測(cè)試：使用UIAutomatorViewer與Selenium定位元素; 抖音直播音掛載小雪花懂車帝小程序; javascript獲取瀏覽器指紋可以用來(lái)做投票; 火狐Mozilla Firefox出現(xiàn)：無(wú)法載入您的Firefox配置文件它可能已經(jīng)丟失或是無(wú)法訪問(wèn) 問(wèn)題解決集合處理辦法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑; python通過(guò)代碼修改pip下載源讓下載庫(kù)飛起; python里面requests.post返回的res.text還有其它的嗎

更多>>隨機(jī)抽取信息: 針對(duì)新的百度采集系統(tǒng)進(jìn)行的文章內(nèi)容SEO基本優(yōu)化原則; 符合標(biāo)準(zhǔn)的正常工作的對(duì)聯(lián)廣告; 利用DateAdd把時(shí)間差轉(zhuǎn)換為正常日期格式; 鼠標(biāo)經(jīng)過(guò)表格列時(shí)變色; 一個(gè)更加高級(jí)的CSS菜單,絕對(duì)實(shí)用,超強(qiáng)的; 經(jīng)典表格隔行變色程序

更多標(biāo)簽熱門標(biāo)簽

結(jié)果 script 縣思考素材滑輪 table 排版時(shí)間杈規(guī) 還原選項(xiàng)卡翻滾臺(tái)歷漢字理想 Alpha 快捷鍵調(diào)色板統(tǒng)計(jì) DropShadow 幻燈增大滾動(dòng)條告判斷鏈接 csss 界面 openwin 我想你 asp web 調(diào)節(jié) html ajax 文本框站長(zhǎng) 點(diǎn)擊全選文件類型首字母翻轉(zhuǎn) 虛擬自適應(yīng) expression 應(yīng)用排序列表放大

国产免费av片在线观看-国产免费av观看-国产免费av电影-国产免费a-四虎网站在线观看-四虎网站在线

一個(gè)更加高級(jí)的CSS菜單,絕對(duì)實(shí)用,超強(qiáng)的