DIV+CSS实现导航菜单

于 2007-01-19 14:32:00 发布
阅读量4.1k 收藏 1
点赞数
分类专栏： JavaScript专栏 CSS专栏 文章标签： div css class javascript float lotus

滑动门菜单技术

< style >
body {font-size:12px;font-family:宋体}
ul.TabBarLevel1{
    list-style:none;
    margin:0;
    padding:0;
    height:29px;
    background-image:url(/attachments/month_0606/q20066292643.gif);
}
ul.TabBarLevel1 li{
    float:left;
    padding:0;
    height:29px;
    margin-right:1px;
    background:url(/attachments/month_0606/320066292748.gif) left top no-repeat;
}
ul.TabBarLevel1 li a{
    display:block;
    line-height:29px;
    padding:0 20px;
    color:#333;
    background:url(/attachments/month_0606/w20066292815.gif) right top no-repeat;
    white-space: nowrap;
}
ul.TabBarLevel1 li.Selected{
    background:url(/attachments/month_0606/220066292838.gif) left top no-repeat;
}
ul.TabBarLevel1 li.Selected a{
    background:url(/attachments/month_0606/42006629294.gif) right top no-repeat;
}

ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{
    color:#333;
}
ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{
    color:#F30;
    text-decoration:none;
}
ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{
    color:#000;
}
ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{
    color:#F30;
    text-decoration:none;
}
div.HackBox {
  padding : 2px 2px ;
  border-left: 2px solid #6697CD;
  border-right: 2px solid #6697CD;
  border-bottom: 2px solid #6697CD;
  display:none;
}

 </ style >



< div  id ="Whatever" >
     < ul  class ="TabBarLevel1"  id ="TabPage1" >
         < li  id ="Tab1" >< a  href ="#"  onclick ="javascript:switchTab('TabPage1','Tab1');" > 产品列表 </ a ></ li >
         < li   id ="Tab2"  class ="Selected" >< a  href ="#"  onclick ="javascript:switchTab('TabPage1','Tab2');" > 其他信息 </ a ></ li >
         < li   id ="Tab3" >< a  href ="#"  onclick ="javascript:switchTab('TabPage1','Tab3');" > 手机数码 </ a ></ li >
         < li   id ="Tab4" >< a  href ="#"  onclick ="javascript:switchTab('TabPage1','Tab4');" > 咨询留言 </ a ></ li >
     </ ul >
     < div  id ="cnt" >
     < div  id ="dTab1"  class ="HackBox" > 代码如下：
                 <!-- 这里放入信息 -->
                   哈哈哈哈1
     </ div >
     < div  id ="dTab2"  class ="HackBox"  style ="display:block" > 代码如下：
                 <!-- 这里放入信息 -->
                   哈哈哈哈2
     </ div >
     < div  id ="dTab3"  class ="HackBox" > 代码如下：
                 <!-- 这里放入信息 -->
                   哈哈哈哈3
     </ div >
     < div  id ="dTab4"  class ="HackBox" > 代码如下：
                 <!-- 这里放入信息 -->
                   哈哈哈哈4
     </ div >
     </ div >
</ div >
< script  language ="JavaScript" >
//Switch Tab Effect
function switchTab(tabpage,tabid){
        var oItem = document.getElementById(tabpage);   
    for(var i=0;i<oItem.children.length;i++){
        var x = oItem.children(i);    
        x.className = "";
        var y = x.getElementsByTagName('a');
        y[0].style.color="#333333";
    }    
    document.getElementById(tabid).className = "Selected";
    var dvs=document.getElementById("cnt").getElementsByTagName("div");
    for (var i=0;i<dvs.length;i++){
      if (dvs[i].id==('d'+tabid))
        dvs[i].style.display='block';
      else
        dvs[i].style.display='none';
    }
}

 </ script >

 Table+CSS实现选项卡功能

       < style  type =text/css >
td { 
    font-size: 12px;
    color: #000000;
    line-height: 150%;
    }
.sec1 { 
    background-color: #EEEEEE;
    cursor: hand;
    color: #000000;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid gray;
    border-bottom: 1px solid #FFFFFF
    }
.sec2 { 
    background-color: #D4D0C8;
    cursor: hand;
    color: #000000;
    border-left: 1px solid #FFFFFF; 
    border-top: 1px solid #FFFFFF; 
    border-right: 1px solid gray; 
    font-weight: bold; 
    }
.main_tab {
    background-color: #D4D0C8;
    color: #000000;
    border-left:1px solid #FFFFFF;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray; 
    }
 </ style >
       < script  language =javascript >
function secBoard(n)
{
  for(i=0;i<secTable.cells.length;i++)
    secTable.cells[i].className="sec1";
  secTable.cells[n].className="sec2";
  for(i=0;i<mainTable.tBodies.length;i++)
    mainTable.tBodies[i].style.display="none";
  mainTable.tBodies[n].style.display="block";
}
 </ script >
       < table  border =0  cellspacing =0  cellpadding =0  width =549  id =secTable >
         < tr  height =20  align =center >  
           < td  class =sec2  width =10%  onclick ="secBoard(0)" > 关于TBODY标记 </ td >
           < td  class =sec1  width =10%  onclick ="secBoard(1)" > 关于cells集合 </ td >
           < td  class =sec1  width =10%  onclick ="secBoard(2)" > 关于tBodies集合 </ td >
           < td  class =sec1  width =10%  onclick ="secBoard(3)" > 关于display属性 </ td >
         </ tr >
       </ table >
       < table  border =0  cellspacing =0  cellpadding =0  width =549  height =240  id =mainTable  class =main_tab >
         < tbody  style ="display:block;" >  
         < tr >  
           < td  align =center  valign =top >   < br >
             < br >
            这里填加内容，略去。1  </ td >
         </ tr >
         </ tbody >   < tbody  style ="display:none;" >  
         < tr >  
           < td  align =center  valign =top >   < br >
             < br >
            这里填加内容，略去。2  </ td >
         </ tr >
         </ tbody >   < tbody  style ="display:none;" >  
         < tr >  
           < td  align =center  valign =top >   < br >
             < br >
            这里填加内容，略去。3  </ td >
         </ tr >
         </ tbody >   < tbody  style ="display:none;" >  
         < tr >  
           < td  align =center  valign =top >   < br >
             < br >
            这里填加内容，略去。4  </ td >
         </ tr >
         </ tbody >  
       </ table >

CSS菜单

<! 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" >
<!--
body{
    margin-top:0px;
    margin-bottom:0px;
    margin-left:auto;
    margin-right:auto;
    background:#fff;
    text-align:center;
    color: #333;
    font-family:arial,verdana,sans-serif;
}

#topbanner{
    margin-left:auto;
    margin-right:auto;
    width:580px;
    height:40px;
    border-bottom:5px solid #ff9900;
}

#bottom{
    margin-left:auto;
    margin-right:auto;
    width:580px;
    height:40px;
    border-top:5px solid #ff9900;
}

/*菜单样式定义*/
#menu{
    clear:both;
    margin-right: auto;
    margin-left: auto;
    width:580px;
    height:24px;
    color:#fff;
    background-color:#900;
}

/*主菜单样式定义*/
.mainmenu{
    float:left;
    width:64px;
    font-size:13px;
    color:#fff;
    border-left:1px solid #999;
}

.menucontent{
    float:left;
    width:80px; 
    height:20px;
    color:#fff;
    padding-top:4px;
}

.menucontent a:link {
    color: #fff; 
    display:block;
    text-decoration: none;
}

.menucontent a:visited {
    color: #fff; 
    display:block;
    text-decoration: none;
}

.menucontent a:hover {
    color: #fff; 
    text-decoration: none;
    background-color:#000;
} 

/*子菜单样式定义*/
.submenu{
    clear:both;
    float:left;
    position:absolute;
    width:80px;
    padding:0px;
    font-size:13px;
}

.submenu ul {
    background-color:#eee;
    list-style-type:none;
    width:82px;
    line-height:24px; 
}

.submenu li {
    border-bottom: #ccc 1px dotted; 
}
 
.submenu li a:link,a:visited {
    color: #333; 
    display: block;
    text-decoration: none;
}

.submenu li a:hover {
    color: #fff; 
    text-decoration: none;
    background-color:#900;
    border-top:1px solid #fff;
} 
-->
 </ style >
</ head >

< body >
     < div  id ="topbanner" ></ div >
     < div  id ="menu" >
         < div  class ="mainmenu" >< div  class ="menucontent" >< a  href ="#"  title ="#" > 网站首页 </ a ></ div ></ div >
         < div  class ="mainmenu" >< div  class ="menucontent" >< a  href ="#"  title ="#" > 中心简介 </ a ></ div ></ div >
         < div  class ="mainmenu"  onmouseover ="submenu1.style.display='block'"  onmouseout ="submenu1.style.display='none'" >
             < div  class ="menucontent" >< a  href ="#"  title ="#" > 认证考试 </ a ></ div >
         </ div >
         < div  class ="mainmenu"  onmouseover ="submenu2.style.display='block'"  onmouseout ="submenu2.style.display='none'" >
             < div  class ="menucontent" >< a  href ="#"  title ="#" > 课程介绍 </ a ></ div >
         </ div >
         < div  class ="mainmenu"  onmouseover ="submenu3.style.display='block'"  onmouseout ="submenu3.style.display='none'" >
             < div  class ="menucontent" >< a  href ="#"  title ="#" > 证书发放 </ a ></ div >
         </ div >
         < div  class ="mainmenu"  onmouseover ="submenu4.style.display='block'"  onmouseout ="submenu4.style.display='none'" >
             < div  class ="menucontent" >< a  href ="#"  title ="#" > 现在报名 </ a ></ div >
         </ div >
         < div  class ="mainmenu" >< div  class ="menucontent" >< a  href ="#"  title ="#" > 资料下载 </ a ></ div ></ div >
     </ div >
     < div  class ="submenu"  style ="display:none;margin-left:122px;"  onmouseover ="submenu1.style.display='block'"  onmouseout ="submenu1.style.display='none'"  id ="submenu1" >
             < ul >
             < li >< a  href ="#"  title ="认证介绍" > 认证介绍 </ a ></ li >             
             < li >< a  href ="#"  title ="认证流程" > 认证流程 </ a ></ li >
             </ ul >
     </ div >
     < div  class ="submenu"  style ="display:none;margin-left:203px;"  onmouseover ="submenu2.style.display='block'"  onmouseout ="submenu2.style.display='none'"  id ="submenu2" >
             < ul >
             < li >< a  href ="#"  title ="AIX系统管理" > AIX系统管理 </ a ></ li >             
             < li >< a  href ="#"  title ="UDB DB" > UDB DB2 </ a ></ li >
             < li >< a  href ="#"  title ="AS400系统" > AS400系统 </ a ></ li >
             < li >< a  href ="#"  title ="LOTUS系列" > LOTUS系列 </ a ></ li >
             < li >< a  href ="#"  title ="电子商务" > 电子商务 </ a ></ li >
             </ ul >
     </ div >
     < div  class ="submenu"  style ="display:none;margin-left:284px;"  onmouseover ="submenu3.style.display='block'"  onmouseout ="submenu3.style.display='none'"  id ="submenu3" >
             < ul >
             < li >< a  href ="#"  title ="认证介绍" > 证书查询 </ a ></ li >             
             < li >< a  href ="#"  title ="认证流程" > 证书领取 </ a ></ li >
             </ ul >
     </ div >
     < div  class ="submenu"  style ="display:none;margin-left:365px;"  onmouseover ="submenu4.style.display='block'"  onmouseout ="submenu4.style.display='none'"  id ="submenu4" >
             < ul >
             < li >< a  href ="#"  title ="认证介绍" > 报名流程 </ a ></ li >
             < li >< a  href ="#"  title ="报名费用" > 报名费用 </ a ></ li >             
             < li >< a  href ="#"  title ="认证流程" > 网上报名 </ a ></ li >
             </ ul >
     </ div >
     < div  id ="bottom" ></ div >
</ body >
</ html >

完全CSS菜单

< HTML >
< HEAD >
< TITLE > a snazzy border menu </ TITLE >
</ HEAD >

< BODY >
< style  type ="text/css" >
#info {background:#ddd; padding:1em;}
#submen {right:1em;}
#info ul {margin:0; padding:0; list-style-type:none; background:transparent; height:3em;}
#info li {display:block; float:left;}
.xsnazzy {background:transparent;}
.xsnazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;}
.xtop {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
/* hide overflow:hidden from IE5/Mac */ 
/* */ 
overflow: hidden; 
/* */ 
}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#dd7; border-left:1px solid #fff; border-right:1px solid #fff;}
.xb1 {margin:0 5px; background:#fff;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#cc6; border:0 solid #fff; border-width:0 1px 1px 1px;}
a.xmenu2, a.xmenu2:visited {display:block; text-decoration:none; width:7em;}
a.xmenu2:hover {background:transparent; cursor:pointer;}
a.xmenu2:hover span {color:#000;}
a.xmenu2:hover .xboxcontent {background:#eee; border-color:#888; border-bottom:1px solid #eee;}
a.xmenu2:hover .xb1 {background:#888;}
a.xmenu2:hover .xb2, a.xmenu2:hover .xb3, a.xmenu2:hover .xb4 {background:#fff; border-color:#888;}
 </ style >
< div  id ="info" >
< ul >
< li >
< a  class ="xmenu2"  href ="#nogo" >< b  class ="xsnazzy" >< b  class ="xtop" >< b  class ="xb1" ></ b >< b  class ="xb2" ></ b >< b  class ="xb3" ></ b >< b  class ="xb4" ></ b ></ b >< span  class ="xboxcontent" > Paul < br > Cezanne </ span ></ b ></ a >
</ li >
< li >
< a  class ="xmenu2"  href ="#nogo" >< b  class ="xsnazzy" >< b  class ="xtop" >< b  class ="xb1" ></ b >< b  class ="xb2" ></ b >< b  class ="xb3" ></ b >< b  class ="xb4" ></ b ></ b >< span  class ="xboxcontent" > Henri < br > Matisse </ span ></ b ></ a >
</ li >
< li >
< a  class ="xmenu2"  href ="#nogo" >< b  class ="xsnazzy" >< b  class ="xtop" >< b  class ="xb1" ></ b >< b  class ="xb2" ></ b >< b  class ="xb3" ></ b >< b  class ="xb4" ></ b ></ b >< span  class ="xboxcontent" > William < br > Turner </ span ></ b ></ a >
</ li >
< li >
< a  class ="xmenu2"  href ="#nogo" >< b  class ="xsnazzy" >< b  class ="xtop" >< b  class ="xb1" ></ b >< b  class ="xb2" ></ b >< b  class ="xb3" ></ b >< b  class ="xb4" ></ b ></ b >< span  class ="xboxcontent" > John < br > Constable </ span ></ b ></ a >
</ li >
< li >

< a  class ="xmenu2"  href ="#nogo" >< b  class ="xsnazzy" >< b  class ="xtop" >< b  class ="xb1" ></ b >< b  class ="xb2" ></ b >< b  class ="xb3" ></ b >< b  class ="xb4" ></ b ></ b >< span  class ="xboxcontent" > Claude < br > Monet </ span ></ b ></ a >
</ li >
</ ul >
</ div >
</ BODY >
</ HTML >

完全CSS菜单2

 

< style  type ="text/css" >
#nav{
height: 44px;
width: 425px;
background: #FFF;
}
.vline{
background: #999;
width: 1px;
height: 20px;
}
#nav ul{
margin:0px;
padding: 0px;
list-style-type: none;
}
#nav li{
float: left;
font-family: Arial;
font-weight: bold;
font-size: 12px;
text-align: center;
}
#nav li a{
display: block;
width: 84px;
line-height: 28px;
color: #666; 
text-decoration: none;
border-top: 4px solid #0F35A5;
}
#nav li a:hover{
color: #7C8DD9;
border-top: 4px solid #7C8DD9;
}
 </ style >
< div  id ="nav" >< ul >< li >< a  href ="#" > 产品介绍 </ a ></ li >< li  class ="vline" ></ li >
< li >< a  href ="#" > 服务支持 </ a ></ li >< li  class ="vline" ></ li >
< li >< a  href ="#" > 联系我们 </ a ></ li >< li  class ="vline" ></ li >
< li >< a  href ="#" > 新闻中心 </ a ></ li >< li  class ="vline" ></ li >
< li >< a  href ="#" > 公司简介 </ a ></ li >< li  class ="vline" ></ li >
</ ul ></ div >

 

评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值