求常用的jquery特效,點(diǎn)擊伸縮菜單。

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

創(chuàng)新互聯(lián)建站企業(yè)建站,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn)，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁(yè)設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營(yíng)經(jīng)驗(yàn)，設(shè)計(jì)師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對(duì)于成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動(dòng)的思維在網(wǎng)頁(yè)中充分展現(xiàn)，通過(guò)對(duì)客戶行業(yè)精準(zhǔn)市場(chǎng)調(diào)研，為客戶提供的解決方案。

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title網(wǎng)站后臺(tái)菜單/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=""網(wǎng)站基本信息/a/h2

div class="acc_container"

div class="block"

table width="100%" cellpadding="0" cellspacing="0" border="0"

trtd align="left"a href=""企業(yè)基本信息/a/tdtda href="" href=""添加/a/td/tr

trtd align="left"a href=""企業(yè)欄目管理/a/tdtda href="" href=""添加/a/td/tr

/table

/div

/div

h2 class="acc_trigger"a href="#"網(wǎng)站內(nèi)容管理/a/h2

div class="acc_container"

div class="block"

table width="100%" cellpadding="0" cellspacing="0" border="0"

trtd align="left"a href=""企業(yè)新聞管理/a/tdtda href="" href=""添加/a/td/tr

trtd align="left"a href=""企業(yè)新聞欄目/a/tdtda href="" href=""添加/a/td/tr

trtd align="left"a href=""企業(yè)案例管理/a/tdtda href="" href=""添加/a/td/tr

trtd align="left"a href=""企業(yè)案例欄目/a/tdtda href="" href=""添加/a/td/tr

/table

/div

/div

h2 class="acc_trigger"a href="#"網(wǎng)站會(huì)員管理/a/h2

div class="acc_container"

div class="block"

table width="100%" cellpadding="0" cellspacing="0" border="0"

trtd align="left"a href=""企業(yè)新聞管理/a/tdtda href="" href=""添加/a/td/tr

trtd align="left"a href=""企業(yè)新聞欄目/a/tdtda href="" href=""添加/a/td/tr

trtd align="left"a href=""企業(yè)案例管理/a/tdtda href="" href=""添加/a/td/tr

trtd align="left"a href=""企業(yè)案例欄目/a/tdtda href="" href=""添加/a/td/tr

/table

/div

/div

h2 class="acc_trigger"a href="#"網(wǎng)站產(chǎn)品管理/a/h2

div class="acc_container"

div class="block"

table width="100%" cellpadding="0" cellspacing="0" border="0"

trtd align="left"a href=""企業(yè)新聞管理/a/tdtda href="" href=""添加/a/td/tr

trtd align="left"a href=""企業(yè)新聞欄目/a/tdtda href="" href=""添加/a/td/tr

trtd align="left"a href=""企業(yè)案例管理/a/tdtda href="" href=""添加/a/td/tr

trtd align="left"a href=""企業(yè)案例欄目/a/tdtda href="" href=""添加/a/td/tr

/table

/div

/div

/div

/body

/html

P

jquery中怎么實(shí)現(xiàn)多級(jí)菜單動(dòng)態(tài)效果

!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"計(jì)算機(jī)分類??

div?class="level_two_menu"編程語(yǔ)言??

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"操作系統(tǒng)??

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"數(shù)據(jù)庫(kù)??

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實(shí)現(xiàn)平滑的二級(jí)下拉菜單效果

本文實(shí)例講述了jquery實(shí)現(xiàn)平滑的二級(jí)下拉菜單效果。分享給大家供大家參考。具體如下：

這是一款使用了jQuery實(shí)現(xiàn)的二級(jí)菜單特效，灰色風(fēng)格，顏色自己不喜歡的就自己動(dòng)動(dòng)手吧，CSS代碼經(jīng)過(guò)了優(yōu)化，水平高的自己拿出修改吧，這是一個(gè)在國(guó)外前端設(shè)計(jì)網(wǎng)站找到的導(dǎo)航菜單效果，希望大家喜歡。

運(yùn)行效果截圖如下：

在線演示地址如下：

具體代碼如下：

!DOCTYPE

html

head

titlejquery平滑二級(jí)下拉菜單/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="#"新聞?lì)?a/li

lia

href="#"論壇類/a/li

lia

href="#"企業(yè)類/a/li

/ul

/li

lia

href="#"技術(shù)文章/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="#"網(wǎng)頁(yè)特效/a

ul

class="sub_nav"

lia

href="#"導(dǎo)航菜單/a/li

lia

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

lia

href="#"鼠標(biāo)特效/a/li

/ul

/li

/ulbr

/

/body

/html

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

jquery導(dǎo)航菜單選擇哪個(gè)出現(xiàn)特效

這篇文章主要介紹了JQuery導(dǎo)航菜單選擇特效 的相關(guān)資料,需要的朋友可以參考下1.初始化效果：未添加樣式和特效

jquery實(shí)現(xiàn)漂亮的二級(jí)下拉菜單代碼

本文實(shí)例講述了jquery實(shí)現(xiàn)漂亮的二級(jí)下拉菜單代碼。分享給大家供大家參考。具體如下：

這里介紹一款基于jquery實(shí)現(xiàn)的網(wǎng)站下拉菜單，黑色風(fēng)格，很漂亮，本菜單需要點(diǎn)擊主菜單后的小三角符號(hào)才下拉出二級(jí)菜單，并不是有些菜單，是鼠標(biāo)移上主菜單的時(shí)候就滑過(guò)，至于哪一種，就看個(gè)人的喜好了

先來(lái)看看運(yùn)行效果：

在線演示地址如下：

具體代碼如下：

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

""

html

xmlns=""

head

meta

http-equiv="Content-Type"

content="text/html;

charset=gb2312"

titlejQuery二級(jí)菜單/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="#"網(wǎng)站首頁(yè)/a/li

li

a

href="#"網(wǎng)頁(yè)菜單/a

ul

class="subnav"

lia

href="#"ASP導(dǎo)航/a/li

lia

href="#"JSP導(dǎo)航/a/li

lia

href="#"ASP.net導(dǎo)航/a/li

lia

href="#"PHP導(dǎo)航/a/li

/ul

/li

li

a

href="#"網(wǎng)頁(yè)特效/a

ul

class="subnav"

lia

href="#"層和菜單/a/li

lia

href="#"鼠標(biāo)特效/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="#"博客營(yíng)銷/a/li

lia

href="#"聯(lián)系我們/a/li

/ul

/div

/div

/body

/html

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

求高手幫助，怎樣給這個(gè)jQuery特效圖標(biāo)菜單里的圖標(biāo)設(shè)置指定的超鏈接，使點(diǎn)擊圖標(biāo)可以鏈接到對(duì)應(yīng)的頁(yè)面

寫(xiě)插件的大神對(duì)js代碼加密了，所以寫(xiě)了個(gè)偏門(mén)點(diǎn)的方法。不知可否

script

/*?圖片地址可以是相對(duì)路徑或絕對(duì)路徑；標(biāo)題和描述可以包含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();

/*-------?這一段新加出來(lái)的?--------*/

$(function()?{

$(document).on("click",?".feature-presenter?img",?function()?{//給圖標(biāo)添加click點(diǎn)擊事件

var?imgsrc?=?$(this).attr("src");

$(settings).each(function(index,?item)?{

if?(item.image?==?imgsrc)

window.open(item.description);?//新窗口打開(kāi)

//window.location?=?item.description;?//當(dāng)前窗口打開(kāi)

});

});

})

/script