仿站长之家导航（setTimeout的应用）

实现代码：

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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body><div id="nav"><ul><li><a href="javascript:;">站长之家</a></li><li><a href="javascript:;">行业资讯</a><div class="subnav"><em class="arrow"></em><p><span><a href="javascript:;">业界动态</a>|<a href="javascript:;">收购融资</a>|<a href="javascript:;">门户动态</a>|<a href="javascript:;">搜索引擎</a>|<a href="javascript:;">网络游戏</a>|<a href="javascript:;">电子商务</a>|<a href="javascript:;">广告传媒</a>|<a href="javascript:;">厂商开发</a></span></p></div></li><li><a href="javascript:;">站长在线</a><div class="subnav"><em class="arrow"></em><p>            <span><a href="javascript:;">站长报道</a>|<a href="javascript:;">好站推荐</a>|<a href="javascript:;">站长聚会</a>|<a href="javascript:;">站长访谈</a>|<a href="javascript:;">站长茶馆</a>|<a href="javascript:;">网站排行</a></span></p></div></li><li><a href="javascript:;">网站运营</a><div class="subnav"><em class="arrow"></em><p>            <span><a href="javascript:;">建站经验</a>|<a href="javascript:;">策划盈利</a>|<a href="javascript:;">搜索优化</a>|<a href="javascript:;">网站推广</a>|<a href="javascript:;">免费资源</a></span></p></div></li><li><a href="javascript:;">设计在线</a><div class="subnav"><em class="arrow"></em><p>            <span><a href="javascript:;">酷站推荐</a>|<a href="javascript:;">网页设计</a>|<a href="javascript:;">WEB标准</a>|<a href="javascript:;">视频处理</a>|<a href="javascript:;">设计活动</a></span></p></div></li><li><a href="javascript:;">网络编程</a><div class="subnav"><em class="arrow"></em><p>            <span><a href="javascript:;">Asp编程</a>|<a href="javascript:;">Php编程</a>|<a href="javascript:;">.Net编程</a>|<a href="javascript:;">Xml编程</a>|<a href="javascript:;">Access</a>|<a href="javascript:;">Mssql</a>|<a href="javascript:;">Mysql</a></span></p></div></li><li><a href="javascript:;">联盟资讯</a><div class="subnav"><em class="arrow"></em><p>            <span><a href="javascript:;">联盟动态</a>|<a href="javascript:;">联盟介绍</a>|<a href="javascript:;">联盟点评</a>|<a href="javascript:;">网赚技巧</a></span></p></div></li><li><a href="javascript:;">服务器</a><div class="subnav"><em class="arrow"></em><p>            <span><a href="javascript:;">Web服务器</a>|<a href="javascript:;">Ftp服务器</a>|<a href="javascript:;">Mail服务器</a>|<a href="javascript:;">Dns服务器</a>|<a href="javascript:;">Win服务器</a>|<a href="javascript:;">Linux服务器</a>|<a href="javascript:;">安全防护</a>|<a href="javascript:;">虚拟主机</a></span></p></div></li></ul></div>
</body>
</html>

CSS:

<style>body,div,ul,li,p{margin:0;padding:0;}body{font:12px/1.5 Arial;}ul{list-style-type:none;}#nav,#nav ul,#nav ul li,#nav ul li a:hover,#nav .subnav,#nav .subnav p,#nav .subnav p span,#nav .subnav .arrow{background:url(nav_bg.png) no-repeat;}#nav{position:relative;width:910px;background-position:0 -36px;margin:10px auto;}#nav ul{height:36px;line-height:36px;margin-left:10px;padding-right:10px;overflow:hidden;background-position:right -72px;}#nav ul li{float:left;width:110px;margin-left:-2px;background-position:0 -108px;}#nav ul li a{font-size:14px;color:#fff;width:102px;display:block;text-align:center;text-decoration:none;margin:0 2px 0 4px;}#nav ul li a:hover{font-weight:700;background-position:-3px -144px;}#nav .subnav{display:none;position:absolute;top:41px;width:auto!important;min-width:110px;height:27px;line-height:27px;white-space:nowrap;background-position:0 -180px;}#nav .subnav p{margin-left:10px;padding-right:10px;background-position:right -234px;}#nav .subnav p span{display:block;color:#235e99;background-repeat:repeat-x;background-position:0 -207px;}#nav .subnav p a{font-size:12px;display:inline;color:#235e99;text-decoration:none;margin:0 5px;padding:0 2px;}#nav .subnav p a:hover{font-weight:400;background-image:none;border-bottom:2px solid;}#nav .subnav .arrow{position:absolute;top:-4px;display:block;width:11px;height:5px;background-position:0 -261px;}
</style>

JS:

<script type="text/javascript">
var get = {byId: function(id) {return document.getElementById(id)},byClass: function(sClass, oParent) {var aClass = [];var reClass = new RegExp("(^| )" + sClass + "( |$)");var aElem = this.byTagName("*", oParent);for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);return aClass},byTagName: function(elem, obj) {return (obj || document).getElementsByTagName(elem)}
};
window.onload = function ()
{var oNav = get.byId("nav");var aLi = get.byTagName("li", oNav);var aSubNav = get.byClass("subnav", oNav);var oSubNav = oEm = timer = null;var i = 0;for (i = 1; i < aLi.length; i++){aLi[i].onmouseover = function (){//隐藏所有子菜单for (i = 0; i < aSubNav.length; i++)aSubNav[i].style.display = "none";//获取该项下的子菜单oSubNav = get.byClass("subnav", this)[0];//获取该项下的指示箭头oEm = get.byTagName("em", this)[0];//显示该项下的子菜单oSubNav.style.display = "block";//判断显示区域oNav.offsetWidth - this.offsetLeft > oSubNav.offsetWidth ? //如果在显示范围居左显示oSubNav.style.left = this.offsetLeft + "px" ://超出显示范围居右显示oSubNav.style.right = 0;//计算指标箭头显示位置oEm.style.left = this.offsetLeft - oSubNav.offsetLeft + 50 + "px";clearTimeout(timer);//阻止事件冒泡oSubNav.onmouseover = function (event){(event || window.event).cancelBubble = true;clearTimeout(timer)}};aLi[i].onmouseout = function (){timer = setTimeout(function () {oSubNav.style.display = "none"},300)    }}
};
</script>

效果如下图所示：

素材图片：

转载于:https://www.cnblogs.com/baixc/p/3429098.html

仿站长之家导航（setTimeout的应用）相关推荐

仿站长之家查询源码php,仿站长之家博客织梦IT资讯博客源码 v1.0
有福了,给大伙分享个好源码: 仿站长之家博客织梦IT资讯博客源码,效果相当的炫酷,相当简洁大气高端,模板简单,全部已数据调用,只需后台修改栏目名称即可模板介绍仿站长之家博客织梦IT资讯博客源码 ...
帝国cms模板仿系统之家
简介: (仿系统之家)源码功能特点: 1.全局设置功能(可以设置企业的基本信息) 2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为 ...
【荐】DIV+CSS仿360buy京东商城导航条
代码简介: [荐]DIV+CSS仿360buy京东商城导航条 ,很棒的,赶快来试试. 代码内容: <html xmlns="http://www.w3.org/1999/xhtml&q ...
仿抖音底部导航效果（二）
继续实现仿抖音底部导航今天要实现效果如下图首先在原基础的布局中加入一个ImageView <LinearLayoutandroid:layout_width="wrap_conte ...
仿抖音底部导航效果（一）
最终效果预览最终效果这次实现的是第一步效果本次效果 <h3 style="color:blue">原理解析:通过对控件添加动画来实现仿抖音底部导航的效果</ ...
织梦cms第四版仿七猫技术导航源码附安装教程
介绍: 织梦系统仿七猫技术导航源码,包含了安装教程和使用教程,大家可以拿着这套源码来搭建个技术导航来玩网站源码集成导航栏目.资讯栏目.在线工具.视频.高清壁纸等内置生成网站地图插件在插件生成网 ...
android仿IT之家、炫酷水波纹、Kotlin MVP项目、后台模拟点击、蜂巢迷宫小游戏等源码...
Android精选源码 Android 炫酷的多重水波纹源码 Android开发一款基于行为识别和个性化推荐的智能推荐APP 仿IT之家Android源码 android判断App位于前台或者后台源码 ...
android仿IT之家、炫酷水波纹、Kotlin MVP项目、后台模拟点击、蜂巢迷宫小游戏等源码
Android精选源码 Android 炫酷的多重水波纹源码 Android开发一款基于行为识别和个性化推荐的智能推荐APP 仿IT之家Android源码 android判断App位于前台或者后台源码 ...
Flutter仿闲鱼底部导航栏实现
概述本文主要实现一个仿闲鱼底部导航栏实现,这种效果在项目中经常用到,接下来我们就从头开始实现. 仿闲鱼底部导航栏要实现闲鱼底部导航栏的效果我们需要使用到BottomNavigationBar和Fl ...

仿站长之家导航（setTimeout的应用）

仿站长之家导航（setTimeout的应用）相关推荐

最新文章

热门文章