jquery特效菜单,JQuery特效

求常用的jquery特效,点击伸缩菜单。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

创新互联建站企业建站,10多年网站建设经验，专注于网站建设技术，精于网页设计，有多年建站和网站代运营经验，设计师为客户打造网络企业风格，提供周到的建站售前咨询和贴心的售后服务。对于成都网站建设、网站建设中不同领域进行深入了解和探索，创新互联在网站建设中充分了解客户行业的需求，以灵动的思维在网页中充分展现，通过对客户行业精准市场调研，为客户提供的解决方案。

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中怎么实现多级菜单动态效果

!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  

div {  

margin:5px;   

padding: 5px;   

float:right;   

width:80%;  

background-color:#fff;  

}  

.menu_container {  

float:left;  

width:20%;  

margin:0 auto;  

text-align:left;  

}  

.level_one_menu {  

background-color:#ccc;  

}  

.level_two_menu {  

background-color:#cdd;  

display:none;  

}  

.level_three_menu {  

background-color:#dcc;  

display:none;  

}  

/style  

script src="js/jquery-1.9.0.js" type="text/javascript"/script  

script  

$(document).ready(function() {   

$('.level_two_menu').bind("click",function(){  

$(".level_three_menu",this).toggle();  

return false;  

})  

$('.level_one_menu').bind("click",function(event){  

$(".level_two_menu",this).toggle();  

event.stopPropagation();  

})  

$('.level_three_menu').bind("click",function(event){  

alert($(this).text());  

event.stopPropagation();  

})  

$('.level_one_menu:eq(0)  .level_two_menu').show();  

$('.level_two_menu:eq(0)  .level_three_menu').show();  

});   

/script  

/head  

body  

div class="menu_container"  

div class="level_one_menu"计算机分类  

div class="level_two_menu"编程语言  

div class="level_three_menu"Java/div  

div class="level_three_menu".net/div  

div class="level_three_menu"C/C++/div  

div class="level_three_menu"PHP/div  

div class="level_three_menu"Python/div  

div class="level_three_menu"Javascript/div  

div class="level_three_menu"Object-C/div  

div class="level_three_menu"Perl/div  

div class="level_three_menu"Shell/div  

/div  

div class="level_two_menu"操作系统  

div class="level_three_menu"Linux/div  

div class="level_three_menu"Windows/div  

div class="level_three_menu"Mac/div  

div class="level_three_menu"Unix/div  

/div  

div class="level_two_menu"数据库  

div class="level_three_menu"Mysql/div  

div class="level_three_menu"Oracle/div  

div class="level_three_menu"DB2/div  

div class="level_three_menu"PostgreSQL/div  

div class="level_three_menu"MS SQL Server/div  

div class="level_three_menu"Sybase/div  

/div  

/div  

div class="level_one_menu"出版社分类  

div class="level_two_menu"Addison-Wesley/div  

div class="level_two_menu"Apress/div  

div class="level_two_menu"Dummies/div  

div class="level_two_menu"friendsofED/div  

div class="level_two_menu"JohnWiley/div  

div class="level_two_menu"Manning/div  

div class="level_two_menu"McGraw/div  

div class="level_two_menu"NewRiders/div  

div class="level_two_menu"NoStarch/div  

div class="level_two_menu"OReilly/div  

div class="level_two_menu"Packt/div  

div class="level_two_menu"Pearson/div  

div class="level_two_menu"Pragmatic/div  

div class="level_two_menu"Prentice/div  

div class="level_two_menu"Que/div  

div class="level_two_menu"Sams/div  

div class="level_two_menu"SitePoint/div  

div class="level_two_menu"SYBEX/div  

div class="level_two_menu"Syngress/div  

div class="level_two_menu"Wrox/div  

/div  

div class="level_one_menu"出版日期分类  

div class="level_two_menu"2015/div  

div class="level_two_menu"2014/div  

div class="level_two_menu"2013/div  

div class="level_two_menu"2012/div  

div class="level_two_menu"2011/div  

div class="level_two_menu"2010/div  

div class="level_two_menu"2009/div  

div class="level_two_menu"2008/div  

div class="level_two_menu"2007/div  

div class="level_two_menu"2006/div  

div class="level_two_menu"2005/div  

div class="level_two_menu"2004/div  

div class="level_two_menu"2003/div  

div class="level_two_menu"2002/div  

div class="level_two_menu"2001/div  

div class="level_two_menu"2000/div  

div class="level_two_menu"2000年之前/div  

/div  

/div  

/body  

/html

jquery实现平滑的二级下拉菜单效果

本文实例讲述了jquery实现平滑的二级下拉菜单效果。分享给大家供大家参考。具体如下：

这是一款使用了jQuery实现的二级菜单特效，灰色风格，颜色自己不喜欢的就自己动动手吧，CSS代码经过了优化，水平高的自己拿出修改吧，这是一个在国外前端设计网站找到的导航菜单效果，希望大家喜欢。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

!DOCTYPE

html

head

titlejquery平滑二级下拉菜单/title

style

h1,

h2,

h3,

h4,

p,

li,

li

a{font-family:

Arial,

Sans-Serif;font-size:

15px;font-weight:

bold;color:

#525252;text-decoration:

none;}

h1,

h2,

h3,

h4{font-size:

22px;}

#dropdown_nav{width:

960px;padding:

0px;display:

inline-block;list-style:

none;-moz-box-shadow:

inset

0px

0px

1px

#fff;-webkit-box-shadow:

inset

0px

0px

1px

#fff;border:

1px

solid

#ccc;-moz-border-radius:

5px;-webkit-border-radius:

5px;background:

#e2e2e2;background:

-moz-linear-gradient(#f3f3f3,

#e2e2e2);background:

-webkit-gradient(linear,

0,

100%,

from(#f3f3f3),

to(#e2e2e2));}

#dropdown_nav

li{padding:

10px

0px

10px

0px;float:

left;position:

relative;display:

inline-block;}

#dropdown_nav

li

a{padding:

10px

15px

10px

15px;text-shadow:

-1px

1px

0px

#f6f6f6;-moz-box-shadow:

inset

0px

0px

1px

#fff;-webkit-box-shadow:

inset

0px

0px

1px

#fff;border-right:

1px

solid

#ccc;}

#dropdown_nav

li

a:

hover{background:

#f9f9f9;background:

-moz-linear-gradient(#f9f9f9,

#e8e8e8);background:

-webkit-gradient(linear,

0,

100%,

from(#f9f9f9),

to(#e8e8e8));}

#dropdown_nav

li

a:

active{background:

#e2e2e2;background:

-moz-linear-gradient(#e2e2e2,

#f3f3f3);background:

-webkit-gradient(linear,

0,

100%,

from(#e2e2e2),

to(#f3f3f3));}

#dropdown_nav

li

a.first{-moz-border-radius:

5px

0px

0px

5px;-webkit-border-radius:

5px

0px

0px

5px;}

#dropdown_nav

.sub_nav{width:

160px;padding:

0px;position:

absolute;top:

38px;left:

0px;border:

1px

solid

#ccc;background:

#e2e2e2;}

#dropdown_nav

.sub_nav

li{width:

160px;padding:

0px;}

#dropdown_nav

.sub_nav

li

a{display:

block;border-bottom:

1px

solid

#ccc;background:

-moz-linear-gradient(#f3f3f3,

#e2e2e2);background:

-webkit-gradient(linear,

0,

100%,

from(#f3f3f3),

to(#e2e2e2));}

#dropdown_nav

.sub_nav

li

a:

hover{background:

#f9f9f9;background:

-moz-linear-gradient(#f9f9f9,

#e8e8e8);background:

-webkit-gradient(linear,

0,

100%,

from(#f9f9f9),

to(#e8e8e8));}

#dropdown_nav

.sub_nav

li

a:

active{background:

#e2e2e2;background:

-moz-linear-gradient(#e2e2e2,

#f3f3f3);background:

-webkit-gradient(linear,

0,

100%,

from(#e2e2e2),

to(#f3f3f3));}

/style

script

type="text/javascript"

src="jquery-1.6.2.min.js"/script

script

type="text/javascript"

$(function()

{

//We

initially

hide

the

all

dropdown

menus

$('#dropdown_nav

li').find('.sub_nav').hide();

//When

hovering

over

the

main

nav

link

we

find

the

dropdown

menu

to

the

corresponding

link.

$('#dropdown_nav

li').hover(function()

{

//Find

a

child

of

'this'

with

a

class

of

.sub_nav

and

make

the

beauty

fadeIn.

$(this).find('.sub_nav').fadeIn(100);

},

function()

{

//Do

the

same

again,

only

fadeOut

this

time.

$(this).find('.sub_nav').fadeOut(50);

});

});

/script

/head

body

h2Creating

an

Awesome

Drop-Down

Nav

with

CSS3

jQuery/h2

ul

id="dropdown_nav"

lia

class="first"

href="#"Home/a/li

lia

href="#"ASP源码下载/a

ul

class="sub_nav"

lia

href="#"新闻类/a/li

lia

href="#"论坛类/a/li

lia

href="#"企业类/a/li

/ul

/li

lia

href="#"技术文章/a

ul

class="sub_nav"

lia

href="#"ASP/a/li

lia

href="#"php/a/li

lia

href="#"jquery/a/li

lia

href="#"Ajax/a/li

/ul

/li

lia

href="#"Freebies/a

/li

lia

class="last"

href="#"网页特效/a

ul

class="sub_nav"

lia

href="#"导航菜单/a/li

lia

href="#"CSS布局/a/li

lia

href="#"鼠标特效/a/li

/ul

/li

/ulbr

/

/body

/html

希望本文所述对大家的jquery程序设计有所帮助。

jquery导航菜单选择哪个出现特效

这篇文章主要介绍了JQuery导航菜单选择特效 的相关资料,需要的朋友可以参考下1.初始化效果：未添加样式和特效

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程序设计有所帮助。

求高手帮助，怎样给这个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