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
本文名称：jquery特效菜单,JQuery特效
转载源于：http://cdiso.cn/article/dsdsgeh.html
