web2.0精致导航下拉菜单代码

最新推荐文章于 2023-07-16 15:10:35 发布

流程管理

最新推荐文章于 2023-07-16 15:10:35 发布

阅读量764

点赞数

分类专栏： JS 文章标签： web function float javascript null xhtml

本文链接：https://blog.youkuaiyun.com/mych/article/details/3339665

版权

JS 专栏收录该内容

30 篇文章

订阅专栏

这篇博客展示了如何使用HTML、CSS和JavaScript实现一个精致的Web2.0导航菜单，包括下拉效果。通过定义CSS样式和JavaScript事件处理，实现了导航条的动态显示和隐藏，为网站提供了一种美观且交互性强的导航结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>Alone's blog--导航</title>
<style>
/* for all */
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;}
ol li{list-style:inside decimal; padding-left:6px;}
img{ border:0;}
.FL{float:left;}
.FR{float: right;}
.Hide{border-top:1px solid transparent !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:0 auto;width:880px;}
#Head{height:35px; background:#323334 url(img/navbg1.jpg) repeat-x; width:100%;background: url( http://www.p.cn/img/navbg2.jpg) repeat-x;}
/*公用*/
#Head .Wp{height:32px;}
#Head h1{ float:left;}
#nav{ float:right;border-left: 1px solid #818488;border-right: 1px solid #323334;}
#nav li{ float:left;}
#nav li a{width:78px; height:32px;border-right:1px solid #818488;border-left:1px solid #323334; display:block; font: bold 14px/32px "宋体";text-align:center;}
#nav a:link,#nav a:visited{color:#fff;text-decoration:none}
#nav a:hover,#nav a:active,#hover{color:#fff;font: bold 16px/32px "宋体"; background: url( http://www.p.cn/img/navbg2.jpg) repeat-x;}
   /*一级菜单*/
   #downall{position:absolute;top:33px;margin:0;padding:0;}
   #product{position:absolute;top:33px;margin:0;padding:0;}
   #product1{position:absolute;top:33px;margin:0;padding:0;}
   #product2{position:absolute;top:33px;margin:0;padding:0;}
   #product3{position:absolute;top:33px;margin:0;padding:0;}
   #downall li,#product li,#product1 li,#product3 li,#product2 li{ float:none}
   #downall li a,#product li a,#product1 li a,#product3 li a,#product2 li a{ width:130px; height:24px;border-bottom:1px dotted #818488; display:block; font:12px/24px "微软雅黑", "宋体";color:#fff; }
    #downall a:link,#downall a:visited,#product a:link,#product a:visited,#product1 a:link,#product1 a:visited,#product2 a:link,#product2 a:visited,#product3 a:link,#product3 a:visited{text-decoration:none;background:#3f4249}
    #downall a:hover,#downall a:active,#product a:hover,#product a:active,#product1 a:hover,#product1 a:active,#product2 a:hover,#product2 a:active,#product3 a:hover,#product3 a:active{font: bold 12px/24px "微软雅黑","宋体"; background: url( http://www.p.cn/img/navbg2.jpg) repeat-x;}
</style>
<script language="javascript">
// JavaScript Document
function $(s) {
return document.getElementById(s)?document.getElementById(s):s;
}
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
    while (obj.offsetParent)
    {
      curleft += obj.offsetLeft
      obj = obj.offsetParent;
    }
}
else if (obj.x)
    curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
    while (obj.offsetParent)
    {
      curtop += obj.offsetTop
      obj = obj.offsetParent;
    }
}
else if (obj.y)
    curtop += obj.y;
return curtop;
}
var currPcnNav=null;
function pcnNav(o){
var offLeft = findPosX(o);
var offTop = findPosY(o);
var arrNav=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.οnmοuseup=function(){
   hidPcnNav(currPcnNav);
}
} else {
      currPcnNav?hidPcnNav(currPcnNav):"";
}
}
function shwPcnNav(o,n){
o.style.display="";
o.style.left=n+"px";
}
function hidPcnNav(o){
o.style.display="none";
document.body.οnmοuseup=null;
}
function pcnNavInit(){
var arrNav=document.getElementById("nav").getElementsByTagName("a");
for (var i=0;i<arrNav.length;i++ ) {
arrNav[i].οnmοuseοver=function(){
pcnNav(this);
}
}
}
window.οnlοad=pcnNavInit;
</script>
</head>
</head>
<body>
<div id="Head">
<div class="Wp">
<ul id="nav">
   <li id="hover"><a urn="null" href="#">Alone</a></li>
   <li><a urn="downall" href="#">Alone</a></li>
   <li><a urn="product" href="#">Alone</a></li>
   <li><a urn="product1" href="#">Alone</a></li>
   <li><a urn="product2" href="#">Alone</a></li>
   <li><a urn="product3" href="#">Alone</a></li>
   <li><a urn="null" href="#">Alone</a></li>
</ul>
</div>
</div>
<div id="subNav">
<ul id='downall' style="display:none;">
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
</ul>
<ul id='product' style="display:none;">
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
            <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
</ul>
        <ul id='product1' style="display:none">
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
            <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
            <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
</ul>
         <ul id='product2' style="display:none">
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
            <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
            <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
            <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
</ul>
         <ul id='product3' style="display:none">
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
   <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
            <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
            <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
            <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
            <li><a href=" http://www.hnctsd.cn/blog/">Alone's blog</a></li>
</ul>
</div>
    <div style="margin-top:50px"><h4>转载请著名作者:Alone</h4></div>
    </body>
</html>