您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > 导航菜单 >

仿凡客网站在不同位置多次调用的顶部导航菜单

时间：2013-04-25 11:41 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!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=utf-8" />
<title>无标题文档</title>
<style>
* {margin:0;padding:0;font-size:14px;}
#nav {}
ul {list-style:none;}
dl {float:left;margin-right:10px;position:relative;}
dt {height:35px;line-height:35px;text-

align:center;background:#eee;width:100px;position:relative;z-index:2}
dt a {display:block;height:35px;color:#111;font-weight:bold;text-align:center;}
dt a.hover {background:#fff;border:1px solid #aaa;border-

bottom:0;position:relative;top:1px;} 
dd {display:none;border:1px solid #aaa;width:188px;position:absolute;padding:10px;z-

index:1;overflow:hidden;zoom:1;background:#fff;}
li {margin-bottom:1px solid #fff;height:25px;line-height:25px;}
li a {display:block;color:#222;height:1em;text-decoration:none;}
li a:hover {color:#f50;}
</style>

<script type="text/javascript">
window.onload=function()
{
var oNav=document.getElementById("nav");
var oDl=oNav.getElementsByTagName('dl');
var i=0;
var timer=null;

for(i=0;i<oDl.length;i++)
if(oDl[i].className=='one'){
oDl[i].onmouseover=function(){
var odd=this.getElementsByTagName('dd')[0];
var aa=this.getElementsByTagName('a')[0];
aa.className='hover';
odd.style.display='block';
}

oDl[i].onmouseout=function (){
var odd=this.getElementsByTagName('dd')[0];
var aa=this.getElementsByTagName('a')[0];
aa.className='';
odd.style.display='none';

}
}
}
</script>
</head>

<body>
<div id="nav">
<dl class="one">
<dt><a href="#">首页</a></dt>
<dd>
<ul>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
</ul>
</dd>
</dl>

<dl class="one">
<dt><a href="#">新闻</a></dt>
<dd>
<ul>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
</ul>
</dd>
</dl>

<dl class="one">
<dt><a href="#">娱乐</a></dt>
<dd>
<ul>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
</ul>
</dd>
</dl>

<dl class="one">
<dt><a href="#">游戏</a></dt>
<dd>
<ul>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
<li><a href="#">菜单菜单1</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

仿凡客网站顶部的【我的凡客】【网站导航】那样效果；能在一个页面中在不同位置多次调用的，鼠标移上去【我的凡客】背景变白也加一个边框，而且鼠标移到下拉的时候，那个边框不消失，如果移开下拉才消失仿凡客网站在不同位置多次调用的顶部导航菜单由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/daohang/2170.html

标签：网站源码

上一篇：非常酷的一个导航菜单

下一篇：纯CSS菜单导航特效代码

[导航菜单] jQ多级菜单垂直折叠展开，点击展

[导航菜单] jQuery仿百度帖吧头部固定不随滚

[导航菜单] 简单的网页二级菜单特效代码(类

[导航菜单] jquery模仿flash导航

[导航菜单] 绿色十分好的纯CSS下拉导航条，

[导航菜单] CSS竖向下拉菜单演示

[导航菜单] 跳动的菜单

[导航菜单] CSS下拉菜单

[导航菜单] 很酷的网页顶部图标菜单右上角

[导航菜单] 纯div+css制作的弹出菜单-04

[导航菜单] 竖列Navigation导航菜单

[导航菜单] 纯div+css制作的弹出菜单-05

相关内容推荐

PHP5权威编程

精通JavaScript

asp.net基础入门教

在线客服系统

中国年PNG图标

ASP.NET入门教程

php中文手册

Library功能简介

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1