用CSS+JQuery实现的动态导航

supersun

浏览: 83344 次
性别:
来自: 北京

最近访客更多访客>>

yonghong

zhuxiaowu

穿衣避寒

tianjun8817

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery学习总结

CSS jQuery 体育 JavaScript 旅游

导航效果预览图：

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;}

menu.zip (48.6 KB)
下载次数: 5083

查看图片附件

分享到：

How to Build a CSS Image Viewer | 二叉树的结构及其遍历算法

2009-11-08 05:00
浏览 1533
评论(19)
论坛回复 / 浏览 (5 / 29306)
查看更多

19 楼 chenglu 2010-07-03

不知道有没有二级页面的下拉样式？

18 楼 llfzy 2010-06-22

仿淘宝。。呵呵现在网上很多这样的例子哦

17 楼 javabrother 2010-06-21

楼主这个好像是jQuery50个实例中间的吧。连样式就是一样的哦。

16 楼 freshman008 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 — 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 — 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>
加号和减号未上传，谢谢

15 楼炫速飞火 2010-06-04

太多的IE6界定符.。。。

14 楼 glyustb 2010-06-04

我用了楼主的第二个做的菜单，效果很漂亮，但是有一个很严重的问题：就是在跳转页面的时候总是要刷新全部的二级菜单，这时会全部下拉，感觉很不好，不知道楼主发现这个问题没有？谢谢！

13 楼 suleil1 2009-12-26

不错不错，我现在很需要手机jQuery的东西。

12 楼 hanyannan0123 2009-12-11

楼主，这个虽然说简单，但是很实用

11 楼 xys1011 2009-11-17

做的很使用，谢谢楼主分享！

10 楼 treblesoftware 2009-11-17

看了DEMO，很漂亮，很强大。

9 楼 wasw100 2009-11-15

下载下来了，很不错

8 楼 495127903 2009-11-13

mark一下. 多谢!

7 楼 andey007518 2009-11-11

谢谢分享，辛苦了lz，根据需要灵活该吧

6 楼 toney_kissinger 2009-11-11

LZ的精神可嘉。只是我眼茁没看出这个MENU有多好，没看出有什么特别的地方。只不过是一张图片适用于多种状态场景。没什么特点。如果有仁兄需要横向菜单，可以看看superfish的实现。

5 楼段箭*残箫 2009-11-10

good，谢谢楼主分享

4 楼 12True 2009-11-10

谢谢分享，标记一下。以备用

3 楼 zhzhwwqq 2009-11-10

谢谢楼主分享！

2 楼 chenl 2009-11-10

很不错，留着备用

1 楼 zhu_chen001 2009-11-10

不错，我想要的

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论