eddie.Yang's creative » menu http://www.ediyang.com Creative change lives Wed, 14 Jul 2010 02:06:12 +0000 http://wordpress.org/?v=2.8 en hourly 1 jQuery制作淡入淡出的网站导航栏 http://www.ediyang.com/jquery-fade-in-and-out-menu/ http://www.ediyang.com/jquery-fade-in-and-out-menu/#comments Fri, 20 Mar 2009 17:37:29 +0000 eddie http://www.ediyang.com/?p=441 前些天有朋友问我关于如何用jQuery制作淡入淡出的效果,就像本网上方的导航栏一样的效果.
借助jQuery的帮助,我们只需要几行代码就可以实现这样的效果.
当然这样的效果不止可以用来制作网站导航栏,同时也可以用来用在其他有鼠标悬停的地方.这就需要发挥各位的想象力了.

在线DEMO
下载源文件

XHTML的代码

首先,我们需要在之间把jQuery引用进来,这里我们使用Google CDN提供的jQuery.



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

首先让我们看看本例子中用做导航栏的背景图片
nav jQuery制作淡入淡出的网站导航栏
每个按钮的尺寸都是一样大:125*52px.
jfm jQuery制作淡入淡出的网站导航栏
接下来我们要看看导航栏的代码,这里我使用ul来进行布局(较常用的方法),代码如下:


<ul class="nav">
	<li class="home"><a href="#">主页</a><div class="hoverHome"></div></li>
	<li class="work"><a href="#">作品</a><div class="hoverWOrk"></div></li>
	<li class="about"><a href="#">关于</a><div class="hoverAbout"></div></li>
	<li class="contact"><a href="#">联系</a><div class="hoverContact"></div></li>
</ul>

各位可以看到每个li中还包含了

这样的空div,而这个空div就是本例子中用于鼠标悬停时显示的div.在后面我们可以看到它的作用.继续..

CSS的代码


ul.nav{
	height:52px;
	text-indent:-9999px;
	list-style:none;
	}

这里text-indent:-9999px;是把xhtml里的文字缩进到我们看不到的地方.


ul.nav li{
	float:left;
	position:relative;
	}

注意这里position:relative;的设置是为了hoverHome等层进行相对定位做准备.


ul.nav a{
	display:block;
	width:125px;
	height:52px;
	}

这里把宽度与高度设置为按钮的尺寸,即125*52px.


.hoverHome,.hoverWork,.hoverAbout,.hoverContact{
	position:absolute;
	top:0;
	left:0;
	width:125px;
	height:52px;
	cursor:pointer;
	}

CSS部分的重点就在这,使用position:absolute;后这4个层就会以ul.nav li为基点进行定位,这里我们需要让.hoverHome,.hoverWork,.hoverAbout,.hoverContact这4个div与每个li完全重叠,所以我们设置top与left都为0.
接下来我们定义导航栏的背景图片


.home a{
	background:url(images/nav.gif) no-repeat 0 0;
	}
.work a{
	background:url(images/nav.gif) no-repeat -125px 0;
	}
.about a{
	background:url(images/nav.gif) no-repeat -250px 0;
	}
.contact a{
	background:url(images/nav.gif) no-repeat -375px 0;
	}

我们会特别注意到背景图片的偏移位置.例如“home”的背景图片在距离左边0px,距离上边0. 而第2个按钮”work”距离左边125px,所以我们设置为-125px(记住是负号).距离上边为0;以此类推.


.hoverHome{
	background:url(images/nav.gif) no-repeat 0 -52px;
	}
.hoverWork{
	background:url(images/nav.gif) no-repeat -125px -52px;
	}
.hoverAbout{
	background:url(images/nav.gif) no-repeat -250px -52px;
	}
.hoverContact{
	background:url(images/nav.gif) no-repeat -375px -52px;
	}

这里我们依然用的是同一张背景图片,而我们这一次需要的是图片下方蓝色的部分,也就是距离上边52px的线以下的部分.所以我们看到每个层的背景图偏移位置第2个属性都是-52px,这就让背景图从距上边52px的地方开始.

现在刷新你的页面,如果你的代码没错,你应该可以看到一条蓝色的导航栏了.但是它没有任何鼠标悬停的变动效果.没有淡入淡出,轮到jQuery出场了.

jQuery代码

请依然把代码写在<head>里面.


<script type="text/javascript">
$(document).ready(function(){
		$(".hoverHome,.hoverWork,.hoverAbout,.hoverContact").css("opacity","0");
		$(".hoverHome,.hoverWork,.hoverAbout,.hoverContact").hover(function () {
			$(this).stop().animate({
				opacity: 1
			}, "slow");
		},
		function () {
			$(this).stop().animate({
				opacity: 0
			}, "slow");
		});
		});
</script>

这段代码很容易理解,首先把.hoverHome,.hoverWork,.hoverAbout,.hoverContact这4个层设置透明度opacity为0,即隐藏.接着当鼠标悬停在按钮上时,我们再将这4个层以淡入的效果显示出来,而当把鼠标移开时,这4个层就淡出.

总结一下

这个例子中的代码都很好理解,其核心就是利用jQuery中的animate()函数以淡入淡出的效果改变div的css属性.参考jQuery API关于animate的使用方法.而CSS最需要留意的就是position:relative与Position:absolute的位置.
好吧,对于jQuery与Javascript这方面我也是一个小小的菜鸟,经常都是看看别人的代码然后自己胡乱写,所以如果你有更好的方法,请你留言给我,同时也帮助其他看到这篇文章的朋友呵呵.谢谢

最后呼吁一下转载的朋友,请尊重本人的劳动成果,留一个小小的链接给我.谢谢！

]]> http://www.ediyang.com/jquery-fade-in-and-out-menu/feed/ 24 CSS制作水彩画风格的导航栏 http://www.ediyang.com/css-watercolor-effect-website-menu/ http://www.ediyang.com/css-watercolor-effect-website-menu/#comments Mon, 16 Mar 2009 05:25:13 +0000 eddie http://www.ediyang.com/?p=390 很多天前我教大家利用Photoshop设计一个水彩画风格的导航栏,今天我将一步一步演示给大家看如果利用上期教程设计的图,使用CSS来制作一个导航栏.并且还会涉及到Photoshop的切图技巧,是学习网页制图与CSS的好教程.
在线演示
下载ZIP文件

概览

以下就是我们这个教程所需要用到的图片，如果你没有的话，可以从上面下载的压缩包里得到.
css menu1 CSS制作水彩画风格的导航栏

1.主背景

打开PSD文件,然后把“文字”层组隐藏（点击图层左边的小眼睛）.然后保存为main-bg.jpg(eddie提醒:较好的方法是点击菜单栏的”文件-存为Web和设备所用格式”，这样将使图片体积减小)
css menu2 CSS制作水彩画风格的导航栏

2.按钮图

把”背景”层隐藏只留下文字层可见,现在如下图所示在home上画一个矩形选区,接着在菜单栏点”编辑-拷贝合并(Shift+Ctrl+C)”
css menu3 300x114 CSS制作水彩画风格的导航栏
然后创建一个新文件，注意尺寸应该跟刚才的矩形选区一样大（如果不知道多大，请打开”窗口-信息”).
接着把刚才复制的图层粘贴在新画布里,接着点”图像-画布大小”,把高度改为原高度的2倍,如图,并点击下方的”向下箭头”.
css menu41 CSS制作水彩画风格的导航栏
接着在粘贴一次那个HOME图层,并把位置调整到上方.接着把HOME周围的边框用”橡皮擦”擦掉.
css menu42 CSS制作水彩画风格的导航栏
这就是我们最后要的效果,按钮的大小就是刚才那个选区大小,当鼠标移上按钮的时候,就会变成有边框的那个HOME.
css menu51 CSS制作水彩画风格的导航栏
重复移上步骤知道你拥有其他的按钮.(eddie提醒:如果保持每个按钮一样大会比较方便后续的制作).
css menu52 CSS制作水彩画风格的导航栏

3.HTML代码

注意到我们使用的是无序列表ul来制作导航,ul的id是menu,并且每个li都有一个class.一个空span标签是为了实现鼠标移上去的效果.代码如下:


<ul id="menu">
<li><a class="home" href="#">Home </a></li>
<li><a class="about" href="#">About </a></li>
<li><a class="rss" href="#">RSS </a></li>
</ul>

4.CSS代码

#menu的CSS
把所有margin与padding重置为0,在这里最主要就是设置position:relative;以便后面利用绝对定位来布局按钮


#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  background: url(images/menu-bg.jpg) no-repeat;
  position: relative;
}

#menu span
把display设置为none是因为span平时是不需要显示的,知道鼠标移到按钮上


#menu span {
  display: none;
  position: absolute;
}

#menu a
设置text-indent: -900%;的作用是使html的文字移到用户看不见的地方（但是搜索引擎蜘蛛会看到）.


#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}

#menu a:hover
当鼠标移上去时候背景图定位到bottom


#menu a:hover {
  background-position: left bottom;
}

#menu a:hover span
当鼠标移上去时候,让span标签显示出来(从none到block)

#menu a:hover span {
  display: block;
}

#menu .home
设置按钮的尺寸与背景图


#menu .home {
  width: 144px;
  height: 58px;
  background: url(images/home.gif) no-repeat;
  left: 96px;
  top: 73px;
}

#menu .home span
这里设置span的背景图,也就是鼠标移上去要显示的样子,并注意top属性中20前面是一个负号.

#menu .home span {
  width: 86px;
  height: 14px;
  background: url(images/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;
}

#menu .about


#menu .about {
  width: 131px;
  height: 51px;
  background: url(images/about.gif) no-repeat;
  left: 338px;
  top: 97px;
}
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(images/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;
}

#menu .rss


#menu .rss {
  width: 112px;
  height: 47px;
  background: url(images/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
}
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(images/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;
}

全部CSS如下


#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  background: url(images/menu-bg.jpg) no-repeat;
  position: relative;
}
#menu span {
  display: none;
  position: absolute;
}
#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}
#menu a:hover {
  background-position: left bottom;
}
#menu a:hover span {
  display: block;
}

#menu .home {
  width: 144px;
  height: 58px;
  background: url(images/home.gif) no-repeat;
  left: 96px;
  top: 73px;
}
#menu .home span {
  width: 86px;
  height: 14px;
  background: url(images/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;
}

#menu .about {
  width: 131px;
  height: 51px;
  background: url(images/about.gif) no-repeat;
  left: 338px;
  top: 97px;
}
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(images/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;
}

#menu .rss {
  width: 112px;
  height: 47px;
  background: url(images/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
}
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(images/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;
}

完成了

你可以预览我做的导航，但是这个导航栏在IE6下有BUG,那就是span元素无法显示出来，如果你要修正这个BUG，那么你需要使用javascript.

英文原文:http://www.webdesignerwall.com/tutorials/advanced-css-menu/
转载请注明来自eddieYang’s creative

]]> http://www.ediyang.com/css-watercolor-effect-website-menu/feed/ 9 Photoshop制作一个水彩画效果的网站导航栏 http://www.ediyang.com/design-watercolor-effect-website-menu/ http://www.ediyang.com/design-watercolor-effect-website-menu/#comments Sat, 07 Feb 2009 08:37:41 +0000 eddie http://www.ediyang.com/?p=7 今天为大家带来的这个教程是教大家怎么用PHOTOSHOP制作一个像Web Designer Wall这个网站的水彩画风格的导航栏（菜单栏。首先我会教大家用PHOTOSHOP制作出导航所需要的图片文件，然后再第2个部分教程中我会教你怎么样用CSS制作这个导航栏。OK,废话不多说，我们开始吧：
转载请注明来自eddie yang’s creative
预览图：
menu sample Photoshop制作一个水彩画效果的网站导航栏

1.笔记本纸张图片

首先我们要找一张那种带穿孔的笔记本纸张的图片素材。eddie推荐一个找这种素材的网站是stock.xchng.当然deviantart也是一个不错的选择。在这个教程，你就先用我给你的这张图片吧。

notepaper

2.水彩画效果

首先在photoshop中打开我们的素材图片，按住Ctrl点击纸张图层载入选区，然后新建一个组，并点击图层面板下面的小按钮创建图层蒙版。这样做使我们后面使用画笔时颜色只会出现在蒙版区域内。
menu-2
新建一个图层，选一个很浅的粉红色（或者其他你喜欢的浅颜色），选择画笔工具（B），在上方面板把画笔大小调为100px,不透明度为10%。然后在纸张上方随意画上一些粉红色。
menu 3 Photoshop制作一个水彩画效果的网站导航栏

重复这个步骤直到效果差不多
menu 4 Photoshop制作一个水彩画效果的网站导航栏

3.增加一些细节

找一些咖啡污渍的素材图片，放在纸张图层上面，在图层面板把混合模式调为“整片叠底”。
menu 5 Photoshop制作一个水彩画效果的网站导航栏
接下来我们还可以用一些现成的笔刷来添加一些污渍与水迹的效果。可以从splatter与watercolor这里下载到合适的笔刷。
menu 6 Photoshop制作一个水彩画效果的网站导航栏
接下来再添加一些素描的素材上去来丰富细节的部分。你可以从我提供的网站寻找素材，或是直接从vector illustration 这里下载。
menu 7 Photoshop制作一个水彩画效果的网站导航栏
在纸张右上角做一个三角形的选区，然后选取灰色，选择渐变工具在选区画一个渐变。这样使得右上角的纸好像被折过后的效果。
menu 8 Photoshop制作一个水彩画效果的网站导航栏

4.手写字体

如果你没有合适的手写字体，我也推荐你去Dafont与 Urban Fonts去找。（这2个网站都是免费并且资源相当多。）
接下来添加你想要的文字吧。如图
menu 9 Photoshop制作一个水彩画效果的网站导航栏

5.一个在水里泡过的RSS图标

首先我们去找一个RSS图标。选择橡皮擦工具，然后选择一个上面你用过的笔刷，把不透明度调为10%后在图标边缘轻轻擦。
然后你还可以选择灰色，在图标上加一些灰色让RSS感觉有点脏。
menu 11 Photoshop制作一个水彩画效果的网站导航栏

6.铅笔风格的边框

铅笔风格的边框可以在Adobe Illustrator中很轻松的画出来。先画一个图形或是路径，然后打开画笔面板。
选择木炭画笔并把大小调为0.25pt.
menu 12 Photoshop制作一个水彩画效果的网站导航栏

7.结束

这就是最后的成果啦，你的呢？
如果你还想花更多时间在细节上面，你还可以增加一些纸屑，透明胶带，小贴纸等等。
menu sample1 Photoshop制作一个水彩画效果的网站导航栏
转载请注明来自eddie yang’s creative
Download PSD File
原文链接:http://www.webdesignerwall.com/tutorials/design-watercolor-effect-menu/

]]> http://www.ediyang.com/design-watercolor-effect-website-menu/feed/ 7