js 漂亮的导航菜单,该怎么处理
日期：2014-05-16 浏览次数：20514 次
js 漂亮的导航菜单
求一个js 漂亮的导航菜单，就是一般在网页的左侧或者左上侧，来导航右侧的内容
------解决方案--------------------
啥样算漂亮？
------解决方案--------------------
我的资源中有，也是网上的修改的，是ff版本的，也有ie的，你要就给你，有比较好看的图片，不知道是不是你要的那么漂亮
------解决方案--------------------
我也是转载的。
<!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>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
BODY {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 0.85em
}
.kwicks {
BACKGROUND-IMAGE: url(/html/UploadPic/2010-1/2010161291220.jpg); POSITION: relative; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px
}
.kwicks LI {
BACKGROUND-IMAGE: url(/html/UploadPic/2010-1/2010161292271.jpg); PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 125px; PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; FLOAT: left; HEIGHT: 40px; OVERFLOW: hidden; CURSOR: pointer; MARGIN-RIGHT: 0px; PADDING-TOP: 0px
}
.kwicks A {
TEXT-INDENT: -9999px; OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium; DISPLAY: block; HEIGHT: 40px
}
#kwick1 {
BACKGROUND-POSITION: 0px 0px
}
#kwick2 {
BACKGROUND-POSITION: -200px 0px
}
#kwick3 {
BACKGROUND-POSITION: -400px 0px
}
#kwick4 {
BACKGROUND-POSITION: -600px 0px
}
.active#kwick1 {
BACKGROUND-POSITION: 0px bottom
}
#kwick1:hover {
BACKGROUND-POSITION: 0px bottom
}
.active#kwick2 {
BACKGROUND-POSITION: -200px bottom
}
#kwick2:hover {
BACKGROUND-POSITION: -200px bottom
}
.active#kwick3 {
BACKGROUND-POSITION: -400px bottom
}
#kwick3:hover {
BACKGROUND-POSITION: -400px bottom
}
.active#kwick4 {
BACKGROUND-POSITION: -600px bottom
}
#kwick4:hover {
BACKGROUND-POSITION: -600px bottom
}
#kwick1 A {
BACKGROUND-IMAGE: url(/html/UploadPic/2010-1/2010161292950.jpg); BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: left 0px
}
#kwick1 A:hover {
BACKGROUND-POSITION: left -80px
}
#kwick4 A {
BACKGROUND-IMAGE: url(/html/UploadPic/2010-1/2010161292950.jpg); BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right -40px
}
#kwick4 A:hover {
BACKGROUND-POSITION: right -120px
}
</style>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/200912070100/kwicks.js"></script>
<script type="text/javascript">
function my_kwicks(){
$('.kwicks').kwicks({
duration: 300,
max: 200,
spacing: 0
});
}
$(document).ready(function(){
my_kwicks();
});
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以了；当然，在实际使用中，不会出现这样的问题。
<!--把下面代码加到<body>与</body>之间-->
<ul class="kwicks">
<li id="kwick1"><a href="#">首页</a></li>
<li id="kwick2"><a href="#">联系方式</a></li>
<li id="kwick3">
求一个js 漂亮的导航菜单，就是一般在网页的左侧或者左上侧，来导航右侧的内容
------解决方案--------------------
啥样算漂亮？
------解决方案--------------------
我的资源中有，也是网上的修改的，是ff版本的，也有ie的，你要就给你，有比较好看的图片，不知道是不是你要的那么漂亮
------解决方案--------------------
我也是转载的。
<!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>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
BODY {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 0.85em
}
.kwicks {
BACKGROUND-IMAGE: url(/html/UploadPic/2010-1/2010161291220.jpg); POSITION: relative; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px
}
.kwicks LI {
BACKGROUND-IMAGE: url(/html/UploadPic/2010-1/2010161292271.jpg); PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 125px; PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; FLOAT: left; HEIGHT: 40px; OVERFLOW: hidden; CURSOR: pointer; MARGIN-RIGHT: 0px; PADDING-TOP: 0px
}
.kwicks A {
TEXT-INDENT: -9999px; OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium; DISPLAY: block; HEIGHT: 40px
}
#kwick1 {
BACKGROUND-POSITION: 0px 0px
}
#kwick2 {
BACKGROUND-POSITION: -200px 0px
}
#kwick3 {
BACKGROUND-POSITION: -400px 0px
}
#kwick4 {
BACKGROUND-POSITION: -600px 0px
}
.active#kwick1 {
BACKGROUND-POSITION: 0px bottom
}
#kwick1:hover {
BACKGROUND-POSITION: 0px bottom
}
.active#kwick2 {
BACKGROUND-POSITION: -200px bottom
}
#kwick2:hover {
BACKGROUND-POSITION: -200px bottom
}
.active#kwick3 {
BACKGROUND-POSITION: -400px bottom
}
#kwick3:hover {
BACKGROUND-POSITION: -400px bottom
}
.active#kwick4 {
BACKGROUND-POSITION: -600px bottom
}
#kwick4:hover {
BACKGROUND-POSITION: -600px bottom
}
#kwick1 A {
BACKGROUND-IMAGE: url(/html/UploadPic/2010-1/2010161292950.jpg); BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: left 0px
}
#kwick1 A:hover {
BACKGROUND-POSITION: left -80px
}
#kwick4 A {
BACKGROUND-IMAGE: url(/html/UploadPic/2010-1/2010161292950.jpg); BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right -40px
}
#kwick4 A:hover {
BACKGROUND-POSITION: right -120px
}
</style>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/200912070100/kwicks.js"></script>
<script type="text/javascript">
function my_kwicks(){
$('.kwicks').kwicks({
duration: 300,
max: 200,
spacing: 0
});
}
$(document).ready(function(){
my_kwicks();
});
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以了；当然，在实际使用中，不会出现这样的问题。
<!--把下面代码加到<body>与</body>之间-->
<ul class="kwicks">
<li id="kwick1"><a href="#">首页</a></li>
<li id="kwick2"><a href="#">联系方式</a></li>
<li id="kwick3">
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
