web2.0精致导航下拉菜单代码 - 网页特效代码演示

当前位置：网页特效 > 网页特效演示页

菜单导航特效日期时间特效背景图像特效图层样式特效鼠标特效代码页面窗口特效色彩表格特效文字特效代码表单按钮特效计数转换特效游戏网页特效实例网页特效

web2.0精致导航下拉菜单代码 - 网页特效代码演示 - 特效代码运行

以下是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=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.onmouseup=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.onmouseup=null;
}
function pcnNavInit(){
 var arrNav=document.getElementById("nav").getElementsByTagName("a");
 for (var i=0;i<arrNav.length;i++ ) {
  arrNav[i].onmouseover=function(){
  pcnNav(this);
  }
 }
}
window.onload=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>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

[提示：可先修改代码再按运行]

当前位置：网页特效 > 网页特效演示页

web2.0精致导航下拉菜单代码 - 网页特效代码演示 - 特效代码运行

刚被其它网友点击的网页特效

搜索查询面板

本月特效排行

本周特效排行

本日特效排行