论坛首页 Web前端技术论坛

用CSS+JQuery实现的动态导航

浏览 29305 次
精华帖 (0) :: 良好帖 (2) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-11-08   最后修改:2009-11-08

导航效果预览图:


1.menu.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=gb2312" />
<title>CSS-JQuery Menu01</title>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<script type="text/javascript" src="JQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="JQuery/menu.js"></script>
</head>

<body>
<div class="menu outer">
    <div class="inner">
        <ul>
            <li class="selected" style="background:none;"><a href="#">首页</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">体育</a></li>
            <li><a href="#">财经</a></li>
            <li><a href="#">汽车</a></li>
            <li><a href="#">房产</a></li>
            <li><a href="#">股市</a></li>
            <li><a href="#">旅游</a></li>
            <li><a href="#">美食</a></li>
            <li><a href="#">女性</a></li>
            <li><a href="#">播客</a></li>
            <li><a href="#">拼客</a></li>
            <li><a href="#">交友</a></li>
            <li><a href="#">大杂烩</a></li>
        </ul>
    </div>
</div>
</body>
</html>

 

2.JQuery/menu.js

$(function(){
    var span = '<span></span>';
    $('.menu li a').wrapInner(span);
   
    $('.menu li').click(function(){
        $(this).addClass('selected')
               .siblings().removeClass('selected');
    });
});

 

3.css/menu.css

*{ margin:0; padding:0;}
body{ font:12px Verdana, Arial, Helvetica, sans-serif;}
ul{ list-style:none;}

.menu{ width:949px; margin:0 auto; overflow:hidden;}
.outer{ background:url("../images/menu_sprites.png") no-repeat top left; margin-top:10px; padding-left:15px;}
.inner{ background:url("../images/menu_sprites.png") no-repeat top right; padding-right:5px;}
.menu ul{ background:url("../images/menu_sprites.png") repeat-x 0 -102px; height:34px; }
.menu li{ float:left; width:auto !important; width:1%; white-space:nowrap; padding:0 5px; background:url("../images/menu_sprites.png") no-repeat bottom left;}
.menu li a{ display:block; text-decoration:none; padding-left:15px; cursor:pointer;}
.menu li a span { display:block;height:34px; line-height:34px; color:white; padding-right:15px;}

.menu li a:hover { background:url("../images/menu_sprites.png") no-repeat left -68px;}
.menu li a:hover span { background:url("../images/menu_sprites.png") no-repeat right -68px;}

.menu li.selected a { background:url("../images/menu_sprites.png") no-repeat left -34px;}
.menu li.selected a span { background:url("../images/menu_sprites.png") no-repeat right -34px; color:red;}
 

 

  • 大小: 14.5 KB
   发表时间:2009-11-11  
LZ的精神可嘉。只是我眼茁没看出这个MENU有多好,没看出有什么特别的地方。只不过是一张图片适用于多种状态场景。没什么特点。如果有仁兄需要横向菜单 ,可以看看superfish的实现。
0 请登录后投票
   发表时间:2009-11-11  
谢谢分享,辛苦了lz,根据需要灵活该吧
0 请登录后投票
   发表时间:2009-12-11  
楼主,这个虽然说简单,但是很实用
0 请登录后投票
   发表时间:2009-12-26  
不错不错,我现在很需要手机jQuery的东西。
0 请登录后投票
   发表时间:2010-06-04  
我用了楼主的第二个做的菜单,效果很漂亮,但是有一个很严重的问题:就是在跳转页面的时候总是要刷新全部的二级菜单,这时会全部下拉,感觉很不好,不知道楼主发现这个问题没有?谢谢!
0 请登录后投票
   发表时间:2010-06-04  
太多的IE6界定符.。。。
0 请登录后投票
   发表时间:2010-06-17  
发一个下拉的例子,谢谢
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Collapsible List &mdash; Take 2</title>
    <link rel="stylesheet" type="text/css" href="../common.css">
    <script type="text/javascript"
            src="../scripts/jquery-1.2.1.js"></script>
    <script type="text/javascript">
      $(function(){
        $('li:has(ul)')
          .click(function(event){
            if (this == event.target) {
              $(this).children().toggle();
              $(this).css('list-style-image',
                ($(this).children().is(':hidden')) ?
                  'url(plus.gif)' : 'url(minus.gif)');
            }
            return false;
          })
          .css('cursor','pointer')
          .click();
        $('li:not(:has(ul))').css({
          cursor: 'default',
          'list-style-image':'none'
        });
      });
    </script>
    <style>
      fieldset { width: 320px }
    </style>
  </head>

  <body>
    <fieldset>
      <legend>Collapsible List &mdash; Take 2</legend>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>
          Item 3
          <ul>
            <li>Item 3.1</li>
            <li>
              Item 3.2
              <ul>
                <li>Item 3.2.1</li>
                <li>Item 3.2.2</li>
                <li>Item 3.2.3</li>
              </ul>
            </li>
            <li>Item 3.3</li>
          </ul>
        </li>
        <li>
          Item 4
          <ul>
            <li>Item 4.1</li>
            <li>
              Item 4.2
              <ul>
                <li>Item 4.2.1</li>
                <li>Item 4.2.2</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>Item 5</li>
      </ul>
    </fieldset>
  </body>
</html>
加号和减号未上传,谢谢
0 请登录后投票
   发表时间:2010-06-21  
楼主这个好像是jQuery50个实例中间的吧。连样式就是一样的哦。
0 请登录后投票
   发表时间:2010-06-22  
仿淘宝。。呵呵现在网上很多这样的例子哦
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics