轻松地创建动画导航菜单| jQuery的魔术：做与jQuery的魔法

05年5月，2009

轻松地创建一个动画导航菜单

发布者：马赫布卜： MISC

这是一个很短的后如何，我们可以很容易地创建一个没有任何插件使用jQuery的动画导航菜单。你一定见过他，卧式或立式导航菜单，扩大或缩小其规模上翻滚。这些javascript框架来之前，我们不得不这样做相当大量的代码来完成的事情。为什么呢？那个愚蠢的跨浏览器的处理。我不想在IE浏览器启动。

好吧，这里的东西。我们只需使用一个无序列表横向菜单扩展和合同。代码是死的简单。我们先看看在标记。

  <div id="navcontainer">
 <ul id="navlist">
	 <LI> <a href="http://www.google.com">谷歌</ A> </ LI>
	 <LI> <a href="http://www.yahoo.com">雅虎</ A> </ LI>
	 <LI> <a href="http://www.msn.com">的MSN </ A> </ LI>
	 <LI> <a href="http://www.lycos.com"> Lycos的</ A> </ LI>
	 <LI> <a href="http://www.baidu.com">百度</ A> </ LI>
 </ UL>
 </ DIV>

因此，我们必须有一些列表项。因此，要使他们像横向菜单中出现，我们就需要一些看起来像这样的CSS

  * {
 arial , helvetica , sans-serif ; 字体家庭 ：宋体，黑体， 无衬线 ;
 }
 ＃navcontainer UL
 {
 0 ; 填充左 ：0;
 0 ; 保证金左 ：0;
 #222 ; 背景颜色 ：＃222;
 White ; 颜色 ：白色;
 left ; 浮动 ： 左 ;
 100% ; 宽度 ：100％;
 13px ; 字体大小 ：13px;
 uppercase ; 文本转换 ： 大写 ;
 bold ; 字体重量 ： 大胆 ;
 }

 display : inline ; } ＃navcontainer UL李{ 显示 ：内 联 ;}

 ＃navcontainer UL李一
 {
 0.7em 1.8em ; 填充 ：0.7em 1.8em;
 #222 ; 背景颜色 ：＃222;
 White ; 颜色 ：白色;
 none ; 文字装饰 ： 无 ;
 left ; 浮动 ： 左 ;
 100px ; 宽度 ：100像素 ;
 1px solid #fff ; 边界右 ：1px 固体 ＃FFF
 }

和最后的一部分...... 使他们在鼠标悬停的舞蹈。相当简单的动画功能。只是下面这些行的情侣会做的伎俩。一看。

  ( ) { $（ 函数 （）{
		 ) . hover ( function ( ) { $（“＃navlist”）。 悬停 （ 函数 （）{
			 ) . css ( "background-color" , "#369" ) ; $（ 本 ）CSS（“背景颜色”，“369”）。
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $（ 本 ）， 动画 （{宽度：'200px“}，{工期：200，队列： 虚假 }）;
		 }，
		 函数 （）{
			 ) . css ( "background-color" , "#222" ) ; $（ 本 ）CSS（“背景颜色”，“222”）。
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $（ 本 ）， 动画 （{宽度：'100px“}，{工期：200，队列： 虚假 }）;
		 }）;		
	 }）;