发新贴  快速回复

导航效果

攻城师Mr.严
2013-07-15 16:57
http://www.yz-xd.com/

这个导航效果怎么做的,它的渐变是整个下来的,这个怎么做,而且过后鼠标移开后停留三秒
求用下面这种排版来做下(下面的排版是好的,但放到这里没加载到css,这.....)

[html]
<!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" />

<style type="text/css">
body {
font-size: 12px;
font-family: Arial;
text-align: center;
margin: 0;
padding: 0;
background: #E2E2E2;
}

body a {
color: #333;
font-size: 12px;
text-decoration: none;
}

.scSubCon {
width:111px;
height: 34px;
position:relative;
z-index:2;
margin:0 auto;
background:#ccc;
}

.scSubCon .info{
width: 111px;
height: 34px;
display: inline-block;
color: #FFF;
font-size: 14px;
font-weight: 700;
text-align: center;
text-decoration: none;
line-height: 36px;
float: left;
}

.scSubCon .info:hover {
background:#599D08;
color: #FFF;
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
.scSubCon dl{
width:111px;
height:34px;
position:relative;
padding:0;
}
.scSubCon dd{
position:absolute;
margin:0;
width:111px;
top:34px;
left:0;
overflow:hidden;
}
.scSubCon dd a,.dtbg a{
width:111px;
height:30px;
border-bottom:1px solid #fff;
overflow:hidden;
text-align:center;
line-height:30px;
display:block;
color:#fff;
background:#599D08;
font-size:12px;
}
.scSubCon dd a:hover{
color:#fff;
text-decoration:none;
}
</style>

</head>
<body>

<div class="scSubCon" id="ulShowClass">
<dl>
<dt><a class="info" href="#">公司简介</a></dt>
<dd>
<a class=maxLen href="#">企业文化</a>
<a class=maxLen href="#">公司环境</a>
<a class=maxLen href="#">员工关怀</a>
<a class=maxLen href="#">公司分布</a>
<a class=maxLen href="#">荣誉资质</a>
</dd>
</dl>
</div>

</body>
</html>
[/html]
无为
论坛发可运行代码需要把所有缩进先去了再发,不然加载会有问题,已经帮你调整过来了。


把你的样式稍微改了一下,加了两个导航,一个导航没有对比,看不出来效果。

[html]<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body {
font-size: 12px;
font-family: Arial;
text-align: center;
margin: 0;
padding: 0;
background: #E2E2E2;
}

dd,dl {padding: 0; margin: 0;}

body a {
color: #333;
font-size: 12px;
text-decoration: none;
}

.scSubCon {
width: 363px;
height: 34px;
position:relative;
z-index:2;
margin: 50px auto;
background:#ccc;
}

.scSubCon .info{
width: 111px;
height: 34px;
display: inline-block;
color: #FFF;
font-size: 14px;
font-weight: 700;
text-align: center;
text-decoration: none;
line-height: 36px;
float: left;
}

.scSubCon .info:hover {
background:#599D08;
color: #FFF;
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
.scSubCon dl{
width:111px;
height:34px;
position:relative;
padding:0;
float: left; 
margin: 0 5px; 
}
.scSubCon dd{
position:absolute;
margin:0;
width:111px;
top:34px;
left:0;
overflow:hidden;
display: none; 
}
.scSubCon dd.active { display: block; }
.scSubCon dd a,.dtbg a{
width:111px;
height:30px;
border-bottom:1px solid #fff;
overflow:hidden;
text-align:center;
line-height:30px;
display:block;
color:#fff;
background:#599D08;
font-size:12px;
}
.scSubCon dd a:hover{
color:#fff;
text-decoration:none;
}
</style>

</head>
<body>



<div class="scSubCon" id="ulShowClass">
<dl>
<dt><a class="info" href="#">公司简介</a></dt>
<dd>
<a class=maxLen href="#">企业文化</a>
<a class=maxLen href="#">公司环境</a>
<a class=maxLen href="#">员工关怀</a>
<a class=maxLen href="#">公司分布</a>
<a class=maxLen href="#">荣誉资质</a>
</dd>
</dl>
<dl>
<dt><a class="info" href="#">公司简介</a></dt>
<dd>
<a class=maxLen href="#">企业文化</a>
<a class=maxLen href="#">公司环境</a>
<a class=maxLen href="#">员工关怀</a>
<a class=maxLen href="#">公司分布</a>
<a class=maxLen href="#">荣誉资质</a>
</dd>
</dl>
<dl>
<dt><a class="info" href="#">公司简介</a></dt>
<dd>
<a class=maxLen href="#">企业文化</a>
<a class=maxLen href="#">公司环境</a>
<a class=maxLen href="#">员工关怀</a>
<a class=maxLen href="#">公司分布</a>
<a class=maxLen href="#">荣誉资质</a>
</dd>
</dl>
</div>


</body>
</html>

<script>
var oDiv = document.getElementById('ulShowClass');
var aDt = oDiv.getElementsByTagName('dt');
var aDd = oDiv.getElementsByTagName('dd');

for(var i=0; i<aDt.length; i++){

aDt[i].index = i;
aDt[i].err= = function(){
clearTimeout(this.timer);
for(var i=0; i<aDd.length; i++){
aDd[i].className = '';
}
aDd[this.index].className = 'active';
};
aDt[i].err= = function(){
var _this = this;
this.timer = setTimeout(function(){
aDd[_this.index].className = '';
},1000);
};

}


</script>[/html]
2013-07-15 18:06  回复本帖
攻城师Mr.严
 本帖最后由 攻城师Mr.严 于 2013-7-16 09:28 编辑 

无为 发表于 2013-7-15 18:06 forum.php?mod=redirect&goto=findpost&pid=20336&ptid=6948
论坛发可运行代码需要把所有缩进先去了再发,不然加载会有问题,已经帮你调整过来了。




      嘻嘻,那个网站的效果被他们改成普通的下拉了,本来不是这种简直的,他的渐变很特别,可惜现在看不到了,
2013-07-16 09:25  回复本帖
无为
攻城师Mr.严 发表于 2013-7-16 09:25 forum.php?mod=redirect&goto=findpost&pid=20344&ptid=6948
嘻嘻,那个网站的效果被他们改成普通的下拉了,本来不是这种简直的,他的渐变很特别,可惜现在看不 ...

呵呵,那就没办法啦。。。
2013-07-16 12:21  回复本帖
攻城师Mr.严
无为 发表于 2013-7-16 12:21 forum.php?mod=redirect&goto=findpost&pid=20350&ptid=6948
呵呵,那就没办法啦。。。

   还多问对于css粘在一起的dd.active【 .scSubCon dd.active 】这种写法是什么意思 
2013-07-16 14:23  回复本帖
创美易-miaov
复合类写法,表示某个类里面的元素 给它指定一个类。

比如:.scSubCon dd .active

dd.err==function(){
   this.className='active';
}
这样写是引用不到css的。

css要改成:.scSubCon dd.active
2013-07-18 09:58  回复本帖
无为
攻城师Mr.严 发表于 2013-7-16 14:23 forum.php?mod=redirect&goto=findpost&pid=20354&ptid=6948
还多问对于css粘在一起的dd.active【 .scSubCon dd.active 】这种写法是什么意思  ...

就是中间有空格和没有空格的区别啦。

如果是这样:.scSubCon dd.active这里中间没有空格,意思是表示 .scSubCon 下面 有 class 为 active 的dd元素,也就是说 active 是加在dd元素上的。

如果是这样:.scSubCon dd .active这里中间是有一个空格的,意思是表示 .scSubCon 下面的 dd元素下面有class为active 的元素,也就是说 active 是加在 dd下面的元素身上。


两种写法,class所添加到的位置不一样。比如如下实例:
<dl class='.scSubCon'>
 <dt></dt>
 <dd><span></span></dd>
 <dt></dt>
 <dd class='active'><span class='active'></span></dd>
 <dt></dt>
 <dd class='active'><span class='active'></span></dd>
 <dt></dt>
 <dd><span></span></dd>
</dl>
如果这样写:.scSubCon dd.active是在给dd添加样式。

如果是这样写:.scSubCon dd .active是在给span添加样式。
2013-07-18 11:30  回复本帖
攻城师Mr.严
创美易-miaov 发表于 2013-7-18 09:58 forum.php?mod=redirect&goto=findpost&pid=20372&ptid=6948
复合类写法,表示某个类里面的元素 给它指定一个类。

比如:.scSubCon dd .active


唔,知道了谢谢
2013-08-27 09:41  回复本帖
攻城师Mr.严
无为 发表于 2013-7-18 11:30 forum.php?mod=redirect&goto=findpost&pid=20373&ptid=6948
就是中间有空格和没有空格的区别啦。

如果是这样:这里中间没有空格,意思是表示 .scSubCon 下面 有 cla ...

   唔懂了,哈哈,谢谢老师
2013-08-27 09:42  回复本帖
yix
攻城师Mr.严 发表于 2013-8-27 09:42 forum.php?mod=redirect&goto=findpost&pid=21031&ptid=6948
唔懂了,哈哈,谢谢老师

有问题的!当鼠标移到子菜单的时候,子菜单会消失~
2013-08-27 10:48  回复本帖
登录 后才可以发表回复