您的位置：首页 > Web前端 > JQuery

Jquery页面导航(菜单悬停，折叠效果)

2011-07-28 16:32 483 查看

1.把悬停效果加到菜单项

<!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>
    <title></title>
    <style type="text/css">
      ul
      {
       width:200px;    
      }
      ul li ul
      {
       list-style-type:none; 
       width:200px;
       margin:5px;   
      }
      a
      {
          display:block;
          border:1px solid #fff;
          background-color:#00f;
          color:#fff;
          text-decoration:none;
      }
      li
      {
       list-style-type:none;    
      }
      .hover
      {
          background-color:#000;
      }
    </style>
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('a').hover(function () {
                 $(this).addClass('hover');
             }, function () {
                 $(this).removeClass('hover');
             });
         });
     </script>
</head>
<body>
<div>
   <ul>
   <li><a href="#">Books</a>
   <ul>
         <li><a href="#">Web Development</a></li>
         <li><a href="#">BI Development</a></li>
         <li><a href="#">Web  Test</a></li>
   </ul>
   </li>
   </ul>
</div>
   
</body>
</html>

2.折叠式菜单

<!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>
    <title></title>
    <style type="text/css">
    .Menu
    {
    width:200px;
    background-color:#0ff;
    padding:5px; 
    margin:1px;
    }
    .menuitems
    {
    display:none;    
    background-color:Red;
    }
    a
    {
        display:block;
        border:1px soild #fff;
        text-decoration:none;
        color:#fff;
        padding:10px;

    }
    .menuitems a:hover
    {
     background-color:#000;    
    } 
    li
    {
     display:inline;    
    }
    ul
    {
     display:inline;    
    }
    </style>
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $("p.Menu").mouseout(function () {
                 $("div.menuitems").slideUp('slow');
                 $('p').css({ 'background-color': '' });
             });

             $('p.Menu').mouseover(function () {
                 $(this).next('div.menuitems').slideDown(500).siblings('div.menuitems').slideUp("slow");
                 $(this).siblings().css({ 'background-color': '' });
             });
         });
     </script>
</head>
<body>
<p class="Menu">Books</p>
<div class="menuitems">
   <ul>
         <li><a href="#">Web Development</a></li>
         <li><a href="#">BI Development</a></li>
         <li><a href="#">Web  Test</a></li>
   </ul>
</div>

  <p class="Menu">Moive</p>
<div class="menuitems">
   <ul>
         <li><a href="#">American Moive</a></li>
         <li><a href="#">Chinese Moive</a></li>
         <li><a href="#">HongKong Moive</a></li>
   </ul>
</div>
 
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航