本文实例讲述了jQuery实现两款有动画功能的导航菜单代码。分享给大家供大家参考。具体如下：
创新互联主营增城网站建设的网络公司,主营网站建设方案,APP应用开发,增城h5微信小程序开发搭建,增城网站营销推广欢迎增城等地区企业咨询
这里介绍两个有动画功能的jQuery导航菜单，每个具备移动背景的效果，第二则是渐变背景效果，两个都不错，根据你的喜好选择了，菜单的风格和颜色自己修改一下就能用了。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title两个有动画功能的导航菜单/title
script
src="jquery-1.6.2.min.js"
type="text/javascript"/script
script
type="text/javascript"
$(function()
{
$("#test1
a").mouseover(function()
{
var
index
=
$("#test1
a").index(this);
var
width
=
$("#test1
a").width();
$("#test1
.showhover").stop().animate({left:width*index},1000);
})
$("#test2
a").mouseover(function()
{
var
index
=
$("#test2
a").index(this);
var
width
=
$("#test2
a").width();
$("#test2
.showhover").stop().animate({left:width*index,opacity:'0.6'},1000).stop(false,true).animate({opacity:'1.0'},500);
})
})
/script
style
type="text/css"
.body
{margin:10px;}
img
{border:0;}
a
{text-decoration:none;}
ul{list-style:none;
margin:0;
padding:0;}
.menu
{background:#003399;
height:25px;
width:600px;
position:relative;
overflow:hidden;}
.menu
.showmenu,
.menu
.showhover{
position:absolute;}
.menu
.showmenu
a
{float:left;
display:block;}
.menu
.showmenu
a
{font:700
12px/25px
Microsoft
YaHei;
color:#fff;
width:100px;
height:25px;
text-align:center;}
.menu
.showhover
{background:#990033;
width:100px;
height:25px;}
/style
/head
body
div
class="menu"
id="test1"
div
class="showhover"/div
div
class="showmenu"
a
href="#"网站首页/a
a
href="#"关于我们/a
a
href="#"新闻中心/a
a
href="#"产品中心/a
a
href="#"解决方案/a
a
href="#"联系我们/a
/div
/div
div
style="clear:both;height:50px;"/div
div
class="menu"
id="test2"
div
class="showhover"/div
div
class="showmenu"
a
href="#"网站首页/a
a
href="#"关于我们/a
a
href="#"新闻中心/a
a
href="#"产品中心/a
a
href="#"解决方案/a
a
href="#"联系我们/a
/div
/div
/body
/html
希望本文所述对大家的jQuery程序设计有所帮助。
本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下：
这里介绍一款基于jquery实现的网站下拉菜单，黑色风格，很漂亮，本菜单需要点击主菜单后的小三角符号才下拉出二级菜单，并不是有些菜单，是鼠标移上主菜单的时候就滑过，至于哪一种，就看个人的喜好了
先来看看运行效果：
在线演示地址如下：
具体代码如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
titlejQuery二级菜单/title
script
type="text/javascript"
src="jquery-1.6.2.min.js"/script
script
type="text/javascript"
$(document).ready(function(){
$("ul.subnav").parent().append("span/span");
$("ul.topnav
li
span").click(function()
{
$(this).parent().find("ul.subnav").slideDown('fast').show();
$(this).parent().hover(function()
{
},
function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function()
{
$(this).addClass("subhover");
},
function(){
$(this).removeClass("subhover");
});
});
/script
style
type="text/css"
body
{
margin:
0;
padding:
0;
font:
10px
normal
Arial,
Helvetica,
sans-serif;
background:
#ddd
url(images/body_bg.gif)
repeat-x;
}
.container
{
width:
960px;
margin:
auto;
position:
relative;
}
#header
{
padding-top:
120px;
}
#header
.disclaimer
{
color:
#999;
padding:
100px
7px
0;
text-align:
right;
display:
block;
position:
absolute;
top:
0;
right:
0;
}
#header
.disclaimer
a
{
color:
#ccc;}
ul.topnav
{
list-style:
none;
padding:
20px;
margin:
0;
float:
left;
width:
920px;
background:
#222;
font-size:
1.2em;
background:
url(images/topnav_bg.gif)
repeat-x;
}
ul.topnav
li
{
float:
left;
margin:
0;
padding:
15px
0;
position:
relative;
}
ul.topnav
li
a{
padding:
10px
5px;
color:
#fff;
display:
block;
text-decoration:
none;
float:
left;
}
ul.topnav
li
a:hover{
background:
url(images/topnav_hover.gif)
no-repeat
center
top;
}
ul.topnav
li
span
{
width:
17px;
height:
35px;
float:
left;
background:
url(images/subnav_btn.gif)
no-repeat
center
top;
}
ul.topnav
li
span.subhover
{background-position:
center
bottom;
cursor:
pointer;}
ul.topnav
li
ul.subnav
{
list-style:
none;
position:
absolute;
left:
0;
top:
35px;
background:
#333;
margin:
0;
padding:
0;
display:
none;
float:
left;
width:
170px;
-moz-border-radius-bottomleft:
5px;
-moz-border-radius-bottomright:
5px;
-webkit-border-bottom-left-radius:
5px;
-webkit-border-bottom-right-radius:
5px;
border:
1px
solid
#111;
}
ul.topnav
li
ul.subnav
li{
margin:
0;
padding:
0;
border-top:
1px
solid
#252525;
border-bottom:
1px
solid
#444;
clear:
both;
width:
170px;
}
html
ul.topnav
li
ul.subnav
li
a
{
float:
left;
width:
145px;
background:
#333
url(images/dropdown_linkbg.gif)
no-repeat
10px
center;
padding-left:
20px;
}
html
ul.topnav
li
ul.subnav
li
a:hover
{
background:
#222
url(images/dropdown_linkbg.gif)
no-repeat
10px
center;
}
#header
img
{
margin:
20px
10px;
}
/style
/head
body
div
class="container"
div
id="header"
ul
class="topnav"
lia
href="#"网站首页/a/li
li
a
href="#"网页菜单/a
ul
class="subnav"
lia
href="#"ASP导航/a/li
lia
href="#"JSP导航/a/li
lia
href="#"ASP.net导航/a/li
lia
href="#"PHP导航/a/li
/ul
/li
li
a
href="#"网页特效/a
ul
class="subnav"
lia
href="#"层和菜单/a/li
lia
href="#"鼠标特效/a/li
lia
href="#"表单特效/a/li
lia
href="#"表格特效/a/li
lia
href="#"CSS特效/a/li
lia
href="#"jQuery特效/a/li
/ul
/li
lia
href="#"搜索引擎/a/li
lia
href="#"博客营销/a/li
lia
href="#"联系我们/a/li
/ul
/div
/div
/body
/html
希望本文所述对大家的jquery程序设计有所帮助。
写插件的大神对js代码加密了，所以写了个偏门点的方法。不知可否
script
/* 图片地址可以是相对路径或绝对路径；标题和描述可以包含HTML */
var settings = [{ image: 'images/zzsc1.png', heading: '百度', description: '' },
{ image: 'images/zzsc2.png', heading: '腾讯', description: '' },
{ image: 'images/zzsc3.png', heading: '360', description: '' },
{ image: 'images/zzsc4.png', heading: '淘宝', description: '' },
{ image: 'images/zzsc5.png', heading: '京东', description: '' },
{ image: 'images/zzsc6.png', heading: '新浪', description: '' }
];
var options = {
circle_radius: 220,
normal_feature_size: 100,
highlighted_feature_size: 150,
top_margin: 100,
bottom_margin: 50,
spacing: 40,
min_padding: 50,
heading_font_size: 30,
description_font_size: 20,
type: 'image'
};
var fp = new FeaturePresenter($("#test-element"), settings, options);
fp.createPresenter();
/*------- 这一段新加出来的 --------*/
$(function() {
$(document).on("click", ".feature-presenter img", function() {//给图标添加click点击事件
var imgsrc = $(this).attr("src");
$(settings).each(function(index, item) {
if (item.image == imgsrc)
window.open(item.description); //新窗口打开
//window.location = item.description; //当前窗口打开
});
});
})
/script
$("li p").mouseover(function () {
li p 改成一整块div 里面包含下拉元素和控制显示隐藏的元素
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title网站后台菜单/title
style type="text/css"
html {
overflow-Y: scroll;
}
body {
font: 10px normal Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
line-height: 1.7em;
font-size:12px;
}
*, * focus {
outline: none;
margin: 0;
padding: 0;
}
.container {
width: 160px;
margin: 0 auto;
}
h1 {
font: 4em normal Georgia, 'Times New Roman', Times, serif;
text-align:center;
padding: 20px 0;
color: #aaa;
font-size:12px;
}
h1 span { color: #666; }
h1 small{
font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 0.5em;
display: block;
color: #666;
}
h2.acc_trigger {
padding: 0; margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 33px; line-height: 33px;
width: 160px;
font-size: 12px;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 160px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}
.acc_container .block p {
padding: 5px 0;
margin: 5px 0;
}
.acc_container h3 {
font: 2.5em normal Georgia, "Times New Roman", Times, serif;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ccc;
}
.acc_container img {
float: left;
margin: 10px 15px 15px 0;
padding: 5px;
background: #ddd;
border: 1px solid #ccc;
}
/style
script type="text/javascript" src="jquery-latest.js"/script
script type="text/javascript"
$(document).ready(function(){
$('.acc_container').hide();
$('.acc_trigger:first').addClass('active').next().show();
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) {
$('.acc_trigger').removeClass('active').next().slideUp();
$(this).toggleClass('active').next().slideDown();
}
return false;
});
});
/script
/head
body
div class="container"
h2 class="acc_trigger"a href=""网站基本信息/a/h2
div class="acc_container"
div class="block"
table width="100%" cellpadding="0" cellspacing="0" border="0"
trtd align="left"a href=""企业基本信息/a/tdtda href="" href=""添加/a/td/tr
trtd align="left"a href=""企业栏目管理/a/tdtda href="" href=""添加/a/td/tr
/table
/div
/div
h2 class="acc_trigger"a href="#"网站内容管理/a/h2
div class="acc_container"
div class="block"
table width="100%" cellpadding="0" cellspacing="0" border="0"
trtd align="left"a href=""企业新闻管理/a/tdtda href="" href=""添加/a/td/tr
trtd align="left"a href=""企业新闻栏目/a/tdtda href="" href=""添加/a/td/tr
trtd align="left"a href=""企业案例管理/a/tdtda href="" href=""添加/a/td/tr
trtd align="left"a href=""企业案例栏目/a/tdtda href="" href=""添加/a/td/tr
/table
/div
/div
h2 class="acc_trigger"a href="#"网站会员管理/a/h2
div class="acc_container"
div class="block"
table width="100%" cellpadding="0" cellspacing="0" border="0"
trtd align="left"a href=""企业新闻管理/a/tdtda href="" href=""添加/a/td/tr
trtd align="left"a href=""企业新闻栏目/a/tdtda href="" href=""添加/a/td/tr
trtd align="left"a href=""企业案例管理/a/tdtda href="" href=""添加/a/td/tr
trtd align="left"a href=""企业案例栏目/a/tdtda href="" href=""添加/a/td/tr
/table
/div
/div
h2 class="acc_trigger"a href="#"网站产品管理/a/h2
div class="acc_container"
div class="block"
table width="100%" cellpadding="0" cellspacing="0" border="0"
trtd align="left"a href=""企业新闻管理/a/tdtda href="" href=""添加/a/td/tr
trtd align="left"a href=""企业新闻栏目/a/tdtda href="" href=""添加/a/td/tr
trtd align="left"a href=""企业案例管理/a/tdtda href="" href=""添加/a/td/tr
trtd align="left"a href=""企业案例栏目/a/tdtda href="" href=""添加/a/td/tr
/table
/div
/div
/div
/body
/html
P
这篇文章主要介绍了JQuery导航菜单选择特效 的相关资料,需要的朋友可以参考下1.初始化效果：未添加样式和特效
