欧美人成在线,日本二区三区视频,国内精品久久久久久久

一個更加高級的CSS菜單,絕對實用,超強的

深山行者個人網站 2008/6/24 12:55:26 深山行者字體:大中小瀏覽 4521

以下為詳細代碼

/*______________01號標簽_____________*/
/*大欄目樣式*/
.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號標簽_____________*/
/*大欄目樣式*/
.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號標簽_____________*/
/*大欄目樣式*/
.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>
一個更加高級的CSS菜單,絕對實用,超強的
                   
<script type="text/javascript">
var oldobjul = new Array(1, 1, 1, 1); //歷史選中ul和li選中對象索引

// m 選中第m個li對象索引
// n 顯示第n個ul對象索引
// cname 樣式名稱通用對象, 例:選中狀態 class01, 未選中狀態 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>第三個</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>第三個</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>第三個</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>

前一頁:另外的一種單項的選擇

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