用CSS+JQuery实现的动态导航-优快云博客

本文介绍了一个使用CSS和JQuery实现的导航菜单案例，通过HTML结构定义、CSS样式美化及JQuery交互，创建了一个响应式的水平导航栏。该菜单具备良好的用户体验，包括鼠标悬停时的高亮显示和选中项的视觉变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航效果预览图：

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