DIV+CSS实现导航菜单

CSS滑动门菜单技巧

最新推荐文章于 2024-10-26 15:37:31 发布

转载最新推荐文章于 2024-10-26 15:37:31 发布 · 4.1k 阅读

文章标签：

#div #css #class #javascript #float #lotus

JavaScript专栏同时被 2 个专栏收录

31 篇文章

订阅专栏

CSS专栏

13 篇文章

订阅专栏

本文介绍了使用CSS和少量JavaScript实现的滑动门菜单技术，包括选项卡效果、下拉菜单及不同样式的导航菜单。这些菜单利用CSS的特性来创建美观且交互性强的用户体验。

滑动门菜单技术

<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>

</ul>

<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>

//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实现选项卡功能

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>

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>

<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>

<tr>

<br>

这里填加内容，略去。1 </td>

</tr>

</tbody> <tbody style="display:none;">

<tr>

<br>

这里填加内容，略去。2 </td>

</tr>

</tbody> <tbody style="display:none;">

<tr>

<br>

这里填加内容，略去。3 </td>

</tr>

</tbody> <tbody style="display:none;">

<tr>

<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">

<head>

<title>纯CSS弹出菜单</title>

<!--

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>

</div>

</div>

</div>

</div>

<ul>

</ul>

</div>

<ul>

<li><a href="#" title="AIX系统管理">AIX系统管理</a></li>

<li><a href="#" title="LOTUS系列">LOTUS系列</a></li>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</body>

</html>

完全CSS菜单

<HTML>

<HEAD>

<TITLE>a snazzy border menu</TITLE>

</HEAD>

<BODY>

#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>

<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>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</BODY>

</HTML>

完全CSS菜单2

#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>

</ul></div>

DIV+CSS实现导航菜单

3 条评论