精致导航下拉菜单

txf2004

浏览: 7040496 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html和css

Blog JavaScript HTML XHTML

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<htmlxmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 

<title>Alone'sblog--导航</title> 

<style> 
/*forall*/
a:link,a:visited{color:#2f5795;text-decoration:none;}
a:hover,a:active{color:#000;}
*{margin:0;padding:0;}
li{list-style:none;vertical-align:middle;}
olli{list-style:insidedecimal;padding-left:6px;}
img{border:0;}
.FL{float:left;}
.FR{float:right;}
.Hide{border-top:1pxsolidtransparent!important;margin-top:-1px!important;border-top:0;margin-top:0;clear:both;visibility:hidden;}
/*结构布局*/
body{font:12px/21px"宋体";color:#000;text-align:center;}
.Wp{text-align:left;margin:0auto;width:880px;}
#Head{height:35px;background:#323334url(img/navbg1.jpg)repeat-x;width:100%;background:url(http://www.p.cn/img/navbg2.jpg)repeat-x;}
/*公用*/
#Head.Wp{height:32px;}
#Headh1{float:left;}
#nav{float:right;border-left:1pxsolid#818488;border-right:1pxsolid#323334;}
#navli{float:left;}
#navlia{width:78px;height:32px;border-right:1pxsolid#818488;border-left:1pxsolid#323334;display:block;font:bold14px/32px"宋体";text-align:center;}
#nava:link,#nava:visited{color:#fff;text-decoration:none}
#nava:hover,#nava:active,#hover{color:#fff;font:bold16px/32px"宋体";background:url(http://www.p.cn/img/navbg2.jpg)repeat-x;}
/*一级菜单*/
#downall{position:absolute;top:118px;margin:0;padding:0;}
#product{position:absolute;top:118px;margin:0;padding:0;}
#product1{position:absolute;top:118px;margin:0;padding:0;}
#product2{position:absolute;top:118px;margin:0;padding:0;}
#product3{position:absolute;top:118px;margin:0;padding:0;}
#downallli,#productli,#product1li,#product3li,#product2li{float:none}
#downalllia,#productlia,#product1lia,#product3lia,#product2lia{width:130px;height:24px;border-bottom:1pxdotted#818488;display:block;font:12px/24px"微软雅黑","宋体";color:#fff;}
#downalla:link,#downalla:visited,#producta:link,#producta:visited,#product1a:link,#product1a:visited,#product2a:link,#product2a:visited,#product3a:link,#product3a:visited{text-decoration:none;background:#3f4249}
#downalla:hover,#downalla:active,#producta:hover,#producta:active,#product1a:hover,#product1a:active,#product2a:hover,#product2a:active,#product3a:hover,#product3a:active{font:bold12px/24px"微软雅黑","宋体";background:url(http://www.p.cn/img/navbg2.jpg)repeat-x;}

</style> 

<scriptlanguage="javascript"> 
//JavaScriptDocument
function$(s){
returndocument.getElementById(s)?document.getElementById(s):s;
}
functionfindPosX(obj)
{

varcurleft=0; 
if(obj.offsetParent)
{
while(obj.offsetParent)
{
curleft+=obj.offsetLeft

objobj=obj.offsetParent; 
}
}
elseif(obj.x)
curleft+=obj.x;
returncurleft;
}
functionfindPosY(obj)
{

varcurtop=0; 
if(obj.offsetParent)
{
while(obj.offsetParent)
{
curtop+=obj.offsetTop

objobj=obj.offsetParent; 
}
}
elseif(obj.y)
curtop+=obj.y;
returncurtop;
}

varcurrPcnNav=null; 
functionpcnNav(o){

varoffLeft=findPosX(o); 

varoffTop=findPosY(o); 

vararrNav=document.getElementById("subNav").getElementsByTagName("ul"); 
if(currPcnNav!=null){
hidPcnNav(currPcnNav);
}
if(o.getAttribute("urn")!="null"){
shwPcnNav($(o.getAttribute("urn")),offLeft);

currPcnNav=$(o.getAttribute("urn")); 

document.body.onmouseup=function(){ 
hidPcnNav(currPcnNav);
}
}else{
currPcnNav?hidPcnNav(currPcnNav):"";
}
}
functionshwPcnNav(o,n){

o.style.display=""; 

o.style.left=n+"px"; 
}
functionhidPcnNav(o){

o.style.display="none"; 

document.body.onmouseup=null; 
}
functionpcnNavInit(){

vararrNav=document.getElementById("nav").getElementsByTagName("a"); 

for(vari=0;i<arrNav.length;i++){ 

arrNav[i].onmouseover=function(){ 
pcnNav(this);
}
}
}

window.onload=pcnNavInit; 

</script> 

</head> 

</head> 

<body> 

<p></p> 

<p></p> 

<p></p> 

<p></p> 

<divid="Head"> 

<divclass="Wp"> 

<ulid="nav"> 

<liid="hover"><aurn="null"href="#">Alone</a></li> 

<li><aurn="downall"href="#">Alone</a></li> 

<li><aurn="product"href="#">Alone</a></li> 

<li><aurn="product1"href="#">Alone</a></li> 

<li><aurn="product2"href="#">Alone</a></li> 

<li><aurn="product3"href="#">Alone</a></li> 

<li><aurn="null"href="#">Alone</a></li> 

</ul> 

</div> 

</div> 

<divid="subNav"> 

<ulid='downall'style="display:none;"> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

</ul> 

<ulid='product'style="display:none;"> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

</ul> 

<ulid='product1'style="display:none"> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

</ul> 

<ulid='product2'style="display:none"> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

</ul> 

<ulid='product3'style="display:none"> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

<li><ahref="http://www.hnctsd.cn/blog/">Alone'sblog</a></li> 

</ul> 

</div> 

</body> 

</html> 

http://www.corange.cn/html/corange__97.html

分享到：

TBODY在firefox下用js显示和隐藏时出现错 ... | 焦点图片轮换

2008-12-16 10:33
浏览 1049
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

精致导航下拉菜单

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

精致导航下拉菜单

评论

发表评论

相关推荐

absolute与relative的运用

网页表单项Input的高级限制级用法

INPUT可编辑， tab 键可切换.

TAB效果，五个，竖排横排，左右打开等等你想要的都有

CSS Sprites技术

在textarea里,加提示效果.

带图片预览功能的上传表单

图片经过处理后-box盒子效果

CSS表格斜线.

圆角导航菜单.

关于textarea超过一定字数，不能提交问题

css实现真正的圆角表格

仿yahoo的特色服务内容切换效果

JMenuTab.推荐

apple展示效果

只显示下边框的Text.(

网页形式的计算器.

一个css做的按钮

TREEmenu树菜单

文本框背景

最近访客更多访客>>