windows风格导航栏

  <style type="text/css">
  
  .mainDiv
  {
   width:160px;
  }
  .topItem
  {
   width:160px;
   height:22px;
   cursor:pointer;
   background: #467BF2;
   text-decoration: none;
   color: white;
   font-weight:bold;
   font-family:"GOTHIC";
  
  }
  
  
  .dropMenu
  {
   background:#D9D9D9;
   border-top:1px solid #467BF2;
   border-left:1px solid #92B1F8;
   border-right:1px solid #92B1F8;
   border-bottom:1px solid #92B1F8;
  }
  
  .subMenu
  {
   display:none;
  }
  .subItem
  {
   padding-left:5px;
   cursor:pointer;
   font-weight:bold;
   text-decoration:none;
   color:black;
  }
  
  .subItem a
  {
   text-decoration:none;
   color:black;
  }
  
  .subItemOver
  {
   cursor:pointer;
   color:blue;
   text-decoration:underline;
   font-weight:bold;
   padding-left:5px;
  }
  
  .subItemOver a
  {
   color:blue;
  }
  
  
  .drop
  {
   border-left:1px solid black;
   border-right:1px solid black;
  }
  </style>
  <script language="JavaScript">
  
  
  var TIMER_SLIDE = null;
  var OBJ_SLIDE;
  var OBJ_VIEW;
  var PIX_SLIDE = 10; //this is the amount of slide/DELAY_SLIDE
  var NEW_PIX_VAL;
  var DELAY_SLIDE = 30; //this is the time between each call to slide
  var DIV_HEIGHT = 22; //value irrelevant
  var SUB_MENU_NUM =0;
  var RE_INIT_OBJ = null;
  var bMenu = document.getElementById("curMenu");
  var MainDiv,SubDiv
  
  //DD added code
  document.write('

')
  
  function Init(objDiv)
  {
   if (TIMER_SLIDE == null)
   {
   SUB_MENU_NUM = 0;
   MainDiv = objDiv.parentNode;
   SubDiv = MainDiv.getElementsByTagName("DIV").item(0);
   SubDiv.onclick = SetSlide;
  
   OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)
   OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0);
  
   document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML //DD added code
   DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight //DD added code
  
   for (i=0;i<obj_view.childnodes.length;i++) <br="">    {
   if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN")
   {
   SUB_MENU_NUM ++;
   OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle;
   OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle;
   }
   }
  
   NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state"));
   }
  
  }
  function SetSlide()
  {
   if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code
   if (TIMER_SLIDE == null && this.parentNode == MainDiv)
   TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
   else
   {
   RE_INIT_OBJ = this;
   setTimeout('ReInit()', 200);
   }
  }
  
  function ReInit(obj)
  {
   Init(RE_INIT_OBJ);
   TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
   RE_INIT_OBJ = null;
  }
  
  function RunSlide()
  {
  
   if (OBJ_VIEW.getAttribute("state") == 0)
   {
  
   NEW_PIX_VAL += PIX_SLIDE;
   OBJ_SLIDE.style.height = NEW_PIX_VAL;
  
   if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code
   {
   clearInterval(TIMER_SLIDE);
   TIMER_SLIDE = null;
   OBJ_VIEW.style.display = 'inline';
   OBJ_VIEW.setAttribute("state","1")
   MainDiv.setAttribute("state",NEW_PIX_VAL);
   }
   } else
   {
   OBJ_VIEW.style.display = 'none';
   NEW_PIX_VAL -= PIX_SLIDE;
   if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL;
   if (NEW_PIX_VAL <= 0)
   {
   NEW_PIX_VAL = 0;
   OBJ_SLIDE.style.height = NEW_PIX_VAL
   clearInterval(TIMER_SLIDE);
   TIMER_SLIDE = null;
   OBJ_VIEW.setAttribute("state","0")
   MainDiv.setAttribute("state",NEW_PIX_VAL);
   }
   }
  }
  function ChangeStyle()
  {
   if (this.className == this.getAttribute("classOut"))
   this.className = this.getAttribute("classOver");
   else
   this.className = this.getAttribute("classOut");
  }
  </script>
  <!---->
 

 

网页特效

 

  

   图形图像

   鼠标事件

   时间日期

   导航菜单

   文字效果
  

 

 

  
  <!---->
 

  <!---->
 

 

网络学院

 

  

   网页制作

   网络编程

   图形图像
  

 

 

  
  <!---->
 

  <!---->
 

 

网站联盟

 

  

   网页设计

   艺术创作

   电脑网络
  

 

 

  
  <!---->

• 模拟windows风格导航栏.rar (1.9 KB)
• 下载次数: 34

分享到：

著名开源软件网站地址 | image

• 2007-03-15 18:21
• 浏览 1640
• 评论(0)
• 查看更多