流式导航菜单

迷南。 2022-06-11 01:15 157阅读 0赞

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8" />  
  <title></title>  
  <script type="text/javascript" src="js/jquery-1.4.1.js" ></script>  
 </head>  
 <script type="text/javascript">  
  $(function()\{  
   $("\#menuBar li").click(function()\{  
    var url=$(this).find("a").attr("href");  
    document.location.href=url;  
   \})  
     
   $("\#menuBar li").hover(function()\{  
    $(this).find(".menuInfo").slideDown();  
   \},function()\{  
    $(this).find(".menuInfo").slideUp();  
   \})  
     
     
  \})  
    
     
 </script>  
 <style>  
  \#menuBar\{  
   width: 730px;  
   height: 45px;  
   background: \#000;  
   color: \#fff;  
   font-family: arial;  
   font-size: 14px;  
   margin-top: 20px;  
  \}  
  \#menuBarHolder\{  
   list-style-type: none;  
   display: block;  
  \}  
  .firstchild\{  
   border-left: 1px solid \#ccc;  
  \}  
  \#container\{  
   margin-top: 10px;  
  \}  
  \#menuBar li\{  
   float: left;  
   padding: 15px;  
   height: 16px;  
   width: 75px;  
   border-right: 1px solid \#ccc;  
  \}  
  \#menuBar li a\{  
   color: \#fff;  
   text-decoration: none;  
   letter-spacing: -1px;  
   font-weight: bold;  
  \}  
  .menuHover\{  
   background-color: \#999;  
  \}  
  .menuInfo\{  
   cursor: hand;  
   background-color: \#000;  
   color: \#fff;  
   width: 74px;  
   font-size: 11px;  
   height: 100px;  
   padding: 3px;  
   display: none;  
   position: absolute;  
   margin-left: -15px;  
   margin-top: -10px;  
   -moz-border-radius-bottomleft: 5px;  
   -moz-border-radius-bottomright: 5px;  
   -webkit-border-bottom-left-radius: 5px;  
   -webkit-border-bottom-right-radius: 5px;  
   -khtml-border-radius-bottomright:5px;  
   -khtml-border-radius-bottomleft:5px;  
     
  \}  
  h1\{  
   font: 50px normal georgia,"times new roman",times,serif;  
   color: \#111;  
   margin: 0;  
   text-align: 5px 0;  
  \}  
  h1 small\{  
   font: 0.2em normal verdana,arial,helvetica,sans-serif;  
   text-transform: uppercase;  
   letter-spacing: 1.4em;  
   display: block;  
   color: \#ccc;  
  \}  
 </style>  
 <body>  
  <center>  
   <div id="container">  
    <h1>流式导航菜单<br></h1>  
    <div id="menuBarHolder">  
     <ul id="menuBar">  
      <li class="firstchild">  
       <a href="JavaScript:\#">首页</a>  
       <div class="menuInfo">这是首页的链接</div>  
      </li>  
      <li>  
       <a href="JavaScript:\#">公司简介</a>  
       <div class="menuInfo">公司成立于2005年...</div>  
      </li>  
      <li>  
       <a href="JavaScript:\#">公司产品</a>  
       <div class="menuInfo">为有志进入IT行业的人提供优质服务</div>  
      </li>  
      <li>  
       <a href="JavaScript:\#">个性化服务</a>  
       <div class="menuInfo">提供个性化的，对学习与帮助</div>  
      </li>  
      <li>  
       <a href="JavaScript:\#">关于</a>  
       <div class="menuInfo">版权所有</div>  
      </li>  
      <li>  
       <a href="JavaScript:\#">联系我们</a>  
       <div class="menuInfo">来吧，加入我们吧</div>  
      </li>  
     </ul>  
    </div>  
   </div>  
  </center>  
 </body>  
</html>