我想网 » Menu

一个基于JQuery 和CSS3的滑动菜单

seasun — Tue, 27 Jul 2010 14:34:26 +0000

Demo Download

在这里我们将要创建一个独特的滑动导航菜单。这个想法是让装有菜单项的盒子（box）滑出，并且弹出一个缩略图片。同时还要在有需要二级菜单的链接项调用一个子菜单盒子。这个子菜单要依靠在上级菜单的左边或右边的位置悬停。

这里我们要用到jQuery Easing Plugin和tibchris的一些美丽的图片。

1. HTML结构

先来写HTML结构，这里我们用一个无序的列表来放导航菜单的一级菜单，用DIV来放子菜单。

 id="sdt_menu" class="sdt_menu">

		 href="#">
			 src="images/1.jpg" alt="" />

			 class="sdt_wrap">
				 class="sdt_link">Portfolio
				 class="sdt_descr">My work
			
		
 class="sdt_box">
			 href="#">Websites
			 href="#">Illustrations
			 href="#">Photography


...

如果没有子菜单，DIV可以被忽视。图片在开始的时候不会被显示，我们要在CSS中为它的宽和高都设为０。

让我们开看看CSS样式

2. CSS

让我们首先为无序列表设置样式。

ul.sdt_menu{
	margin:0;
	padding:0;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
	width:1020px;
}

接下来，我们要去掉菜单链接中的text-decoration和outline。

ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}

我们要将列表项左浮动，并且要将position设置为relative，因为我们要为它内部的元素进行绝对定位。如要我们不那样设置，绝对定位刚是相对于整个网页的。

ul.sdt_menu li{
	float:left;
	width:170px;
	height:85px;
	position:relative;
	cursor:pointer;
}

这里来设计主链接的样式，我们有两个span，标题和描述。如下面这样来为它们写样式。

ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent url(../images/overlay.png) no-repeat bottom right;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}

注意z-index: 我们要为重要的元素定义堆叠顺序，来让它们能够停留在上面。
我们要用一个背景图片来创造一种半透明的渐变。当你用一些背景图片（像DEMO中的木纹背景）来创造一种美丽的效果，请务必用一些不同的纹理会让它看起来棒级了。
你也可以加上阴影－改变一下值像2px 2px 6px #000 inset，同样会给你非常好看的效果。
接下来是图片的样式:

ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;
}

我们要加上图片由下升起的动画，这就是为什么定位它必然要用“bottom”作为参考点。我们同样加上了很棒的阴影效果。这里前两个值是0，使图片的周围的阴影显得均匀。这甚至可以把阴影被用作一种特效，无论什么时候，你都可以创造一种边框效果。它的优点在于这些阴影不是真的存在－你不用考虑在元素中如何来计算它的宽和高。当然现在的缺点是CSS3并不被ＩＥ支持。
下面是包涵标题和描述的span的样式

ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}

如果你有大量的文字，你则需要改变这些值。也要确保那些改变的值能匹配在JavaScript中设置动画的值。
下一步，我们要定义一个灰色的滑动盒子的样式。我们给它的高设为0并且定位它，在动画中我们只要增加它的高度就可以了。

ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#111;
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
}

接下来我们要为这些设置一些共有的样式。

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}

下面是标题和描述的样式。

ul.sdt_menu li span span.sdt_link{
	color:#fff;
	font-size:24px;
	float:left;
	clear:both;
}
ul.sdt_menu li span span.sdt_descr{
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px;
	font-size:10px;
	letter-spacing:1px;
}

子菜单盒子起初是一个隐藏在下面的灰色的盒子。我们要让它在我们在的地方动态的向右或向左滑动。像我们这个例子，当鼠标悬停在最后一个位置，我们要它动态的向左滑动，在其它的位置上我们要它向右滑动。

ul.sdt_menu li div.sdt_box{
	display:block;
	position:absolute;
	width:170px;
	overflow:hidden;
	height:170px;
	top:85px;
	left:0px;
	display:none;
	background:#000;
}
ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:30px;
	color:#0B75AF;
}

第一个子菜单链接需要设置一个margin-top

ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;
}

这是所有样式！让我们加上魔法！

3.JavaScript

当我们的鼠标悬停在这些列表元素上，我们要放大图片，并且显示全部，sdt_active和the sdt_wrap。如果这个元素含有子菜单(sdt_box)，将滑动到一旁。如果这个元素在菜单中是最后一个，其子菜单将滑动到左边，其余的滑向右边。

$(function() {
	$('#sdt_menu > li').bind('mouseenter',function(){
		var $elem = $(this);
		$elem.find('img')
			 .stop(true)
			 .animate({
				'width':'170px',
				'height':'170px',
				'left':'0px'
			 },400,'easeOutBack')
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'140px'},500,'easeOutBack')
			 .andSelf()
			 .find('.sdt_active')
			 .stop(true)
			 .animate({'height':'170px'},300,function(){
			var $sub_menu = $elem.find('.sdt_box');
			if($sub_menu.length){
				var left = '170px';
				if($elem.parent().children().length == $elem.index()+1)
					left = '-170px';
				$sub_menu.show().animate({'left':left},200);
			}
		});
	}).bind('mouseleave',function(){
		var $elem = $(this);
		var $sub_menu = $elem.find('.sdt_box');
		if($sub_menu.length)
			$sub_menu.hide().css('left','0px');

		$elem.find('.sdt_active')
			 .stop(true)
			 .animate({'height':'0px'},300)
			 .andSelf().find('img')
			 .stop(true)
			 .animate({
				'width':'0px',
				'height':'0px',
				'left':'85px'},400)
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'25px'},500);
	});
});

就是这样！我们希望你能喜欢这个小菜单，它能对你有帮助。
P.S. 这个在Google Chrome下看起来非常完美。

标签：CSS, CSS, JQuery, JQuery, Menu, Menu, Tutorial

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

35个 jQuery的动画教程

seasun — Sat, 17 Jul 2010 05:26:23 +0000

创意设计人员可以利用JQuery做一些惊人的事情。实现各种各样的动画效果都是可能的，这里提供的35个JQuery教程就是为想在这方面获得技能提升的任何人最好的学习资源。你会发现一些创建动画导航菜单的教程，及使用JQuery实现不以来Flash也可以实现的动画效果。Enjoy it！

Animate Image Filling Up Using jQuery

Animate Curtains Opening with jQuery

Building an Animated Cartoon Robot with jQuery

jQuery Animations: A 7-Step Program

jQuery and CSS Sprite Animation Explained in Under 5 Minutes

Fun with jQuery’s Animate () Function

Animate a Hover with jQuery

How to Create a “MooTools Homepage” Inspired Navigation Effect Using jQuery

Crafting an Animated Postcard with jQuery

How to Create a Drop-Down Nav Menu with HTML5, CSS3 and jQuery

Creating a Polaroid Photo Viewer with CSS3 and jQuery

Quick Tip: Easy Sequential Animations in jQuery

Build an Incredible Login Form with jQuery

Learning jQuery: Revealing Photo Slider

Using jQuery for Background Image Animations

Animated Menus Using jQuery

Create a Cool Animated Navigation with CSS and jQuery

Animated Drop Down Menu with jQuery

How to Load In and Animate Content with jQuery

Puffing Smoke Effect in jQuery

How to Make an Impressive Animated Landscape Header with jQuery

Make an Animated Alphabet Using Keypress Events in jQuery

How to Make a Smooth Animated Menu with jQuery

Sliding Boxes and Captions with jQuery

Create a Realistic Hover Effect with jQuery

Glimmer “Freestyle” Animations

Create a Funky Parallax Background Effect Using jQuery

Create a Stunning Sliding Door Effect with jQuery

How to Build an Animated Header in jQuery

Create a Unique Gallery by Using Z-Index and jQuery

jQuery UI Animation Effects

Animate Your Message Boxes with jQuery

Sexy Opacity Animation with MooTools or jQuery

Controlling Animation Timing in jQuery

Methods for Animation Effects with jQuery 1.4

标签：JQuery, Menu, Menu, Query, Translate, Translate, Tutorial, 翻译

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

网站导航设计的6大分类

seasun — Mon, 12 Jul 2010 14:15:47 +0000

导航是网页设计的重点，我们在设计一个网站的时候，常常从导航入手，不夸张的说，导航的设计甚至决定了整个网站的风格。这就需要我们平常多留心收集优秀的案例，在需要的时候才能手到擒来。在前文中我们已经为大家介绍了120个非常优秀的CSS水平导航菜单，今天我们汇总了更多优秀的导航设计案例，千万不要错过哦！

1.三维导航设计：

网站导航已经不满足于常见的平面化设计，越来越多的网站喜欢用立体感强的三维导航。折纸是最常用的表现形式。

2. 说话气泡导航设计

把菜单设计成讲话的气泡形状，似乎是另一种流行的趋势。

3.圆角导航设计

圆角经常用来软化规整的矩形，其按钮的外观为是为了吸引用户点击它们。

4.应用图标的导航设计

精致的图标越来越多的应用到导航设计中，因为现在带宽不再令人担心了。由于视觉上的吸引力，人们正越来越多地使用的图标，这种趋势仍在继续。图标不仅能吸引眼球，还有助于用户进行视觉识别。

5.JavaScript 动画

JavaScript 技术使 Web设计人员只用几行代码的网页元素即可容易创建动画，设计师们最近一直在使用功能多用又美观的JavaScript。

6. 不规则形状导航设计

由于大多数网站都用的是直边和尖角，不规则的形状让你有机会摆脱俗套范。

Booma

Kutztown University

Yorkdale

The Crazy Love Campaign

Carnivale du Vin 2009

标签：Design, Design, Menu, Menu, WEB

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

120个非常优秀的CSS水平导航菜单

seasun — Mon, 12 Jul 2010 14:08:45 +0000

导航是一个网站的路标，优秀的导航是网站设计成功地第一步。导航必须是用户友好的，而且要与网站设计风格保持一致，这样才能为用户提供简便的导航。

在这里您将看到120个非常优秀的CSS水平导航菜单。

标签：CSS, CSS, Design, Design, Menu, Menu

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

30个漂亮的分页样式设计

seasun — Wed, 05 Aug 2009 04:32:10 +0000

标签：Design, Design, Menu, Menu

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

用jQuery和CSS构建下拉菜单

seasun — Wed, 17 Jun 2009 15:31:21 +0000

研究表明，导航栏吸引了大多数浏览者的注意力。在存在下拉菜单的导航栏中，具有良好的组织及直观的印象是最关键的，优美的设计在开发中也至关重要。在本教程中，我会告诉您如来来创建一个缓慢下沉的漂亮的下拉菜单：

第一步：HTML文档

首先为你的导航创建一个无序列表，然后简单的写一下另外一个无序列表作为导航子菜单

<ul class=“topnav”>
<li><a href=“#”>Homea>li>
<li>
<a href=“#”>Tutorialsa>
<ul class=“subnav”>
<li><a href=“#”>Sub Nav Linka>li>
<li><a href=“#”>Sub Nav Linka>li>
ul>
li>
<li>
<a href=“#”>Resourcesa>
<ul class=“subnav”>
<li><a href=“#”>Sub Nav Linka>li>
<li><a href=“#”>Sub Nav Linka>li>
ul>
li>
<li><a href=“#”>About Usa>li>
<li><a href=“#”>Advertisea>li>
<li><a href=“#”>Submita>li>
<li><a href=“#”>Contact Usa>li>
ul>

第二步：CSS

定义导航样式

ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*–Declare X and Y axis base for sub navigation–*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*–Drop down trigger styles–*/
width: 17px;
height: 35px;
float: left;
background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*–Hover effect for trigger–*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*–Important – Keeps subnav from affecting main navigation flow–*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*–Create bevel effect–*/
border-bottom: 1px solid #444; /*–Create bevel effect–*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*–Hover effect for subnav links–*/
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

第三步：jQuery

如果您是jQuery新手，那么请先阅读这里的教程。

下面包含注释的脚本会告诉您jQuery是如何来表现的。

$(document).ready(function(){
$(“ul.subnav”).parent().append(“”); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
$(“ul.topnav li span”).click(function() { //When trigger is clicked…
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(“ul.subnav”).slideDown(‘fast’).show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(“ul.subnav”).slideUp(’slow’); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(“subhover”); //On hover over, add class “subhover”
}, function(){ //On Hover Out
$(this).removeClass(“subhover”); //On hover out, remove class “subhover”
});
});

作为友好提示，下拉菜单图标只有在支持javascript的的情况下才会显示并触发。

这是在不支持javascript的情况下的显示

查看Demo并下载源文件

结尾

注意: 在之前，我有增加了圆角的演示版本 (CSS3 – 仅仅在 Firefox, Safar 及 Chrome 获得支持)。如果您想要尝试下，那么请查看本教程.

尝试并自定义适合您需要的菜单！如果您有任何问题，忧虑，建议或评论，那么请不要犹豫，告诉我您所知道的吧！

标签：CSS, CSS, JQuery, JQuery, Menu, Menu, Translate, Translate, Tutorial, 翻译

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

36个引人注目JQuery导航菜单

seasun — Sat, 30 May 2009 09:55:52 +0000

导航菜单在任何网站中都占有举足轻重的地位。对于充满了大量页面与文章的大型网站来说，下拉菜单于选项卡菜单非常受欢迎，这是因为用户可以通过他们轻松的浏览网站，同时运用动态的选项卡显示内容能节省网站大量的空间。加入你也想创建一个属于自己的与众不同导航菜单的话，jQuery是提供一套定制选项的正确选择。这就是为什么我想大家推荐36个jquery导航菜单实例的原因。

1.jQuery 选项卡界面 / 选项卡结构菜单教程

这种类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此演示哟，你一定会喜欢上它的。

我想网 » Menu

一个基于JQuery 和CSS3的滑动菜单

1. HTML结构

2. CSS

3.JavaScript

您可能会感兴趣的其他文章

35个 jQuery的动画教程

您可能会感兴趣的其他文章

推荐9个jquery手风琴菜单插件

1、jQuery UI accordion

您可能会感兴趣的其他文章

网站导航设计的6大分类

1.三维导航设计：

2. 说话气泡导航设计

3.圆角导航设计

4.应用图标的导航设计

5.JavaScript 动画

6. 不规则形状导航设计

您可能会感兴趣的其他文章

120个非常优秀的CSS水平导航菜单

您可能会感兴趣的其他文章

30个漂亮的分页样式设计

您可能会感兴趣的其他文章

用jQuery和CSS构建下拉菜单

第一步：HTML文档

第二步：CSS

第三步：jQuery

结尾

您可能会感兴趣的其他文章

36个引人注目JQuery导航菜单

1.jQuery 选项卡界面 / 选项卡结构菜单教程

2.效果生动逼真的jQuery菜单

3. 使用CSS和jQuery创建非常Cool的动画效果导航 (教程 + 下载)

4.jQuery目录导航插件

5. jqDock 菜单

6.Jquery滑动菜单

7.CSS 精灵 2 – 是JavaScript的时间

8. CSS Mac Dock 菜单

9.jQuery的Kwicks菜单

10.Jquery文件树

11.学习jQuery: 褪色菜单 -更换内容

12. 如何使用jQuery创建顺滑生动的菜单

13.Create Vimeo-like top navigation

14. jQuery (mb)菜单 2.3

15. Coda 滑动菜单

16. jQuery idTabs

17. 使用CSS & jQuery创建顺畅的选显卡内容区

18. 为jQuery爱好者准备的熔岩灯!

19. jQuery下拉动画菜单

20. 运用jQuery使背景图片生动起来

21. 怎样使用jQuery创建‘Mootools 主页’有创造性的导航效果

22. Menumatic Mootools

23. jQuery convertion: 使用Javascript的车库门效果

24. Perspective tabs

25. Fisheye 菜单

26. JavaScript滑动菜单 高亮 1kb

27. Mootools Demo Redux

28. HoverAccordion

29. 简单的Javascript手风琴菜单

30. UvumiTools 下拉菜单

31. 使用css和jQuery创建多级下拉菜单

32. jQuery & CSS 实例 – 下拉菜单

33. 浮动的菜单jQuery&CSS

34. Superfish – jQuery菜单插件

35. JQuery Pager

36. jQuery feed 菜单

您可能会感兴趣的其他文章

二十五个下拉菜单脚本

您可能会感兴趣的其他文章

Javascript导航菜单13则

您可能会感兴趣的其他文章

13个效果超酷的Javascript网页导航菜单

您可能会感兴趣的其他文章

Javascript导航菜单13则

您可能会感兴趣的其他文章

26. JavaScript滑动菜单高亮 1kb