这篇是利用JQuery手风琴插件来模仿制作apple边栏的导航菜单效果.

先看看我们要做的效果是怎样的

进入apple网站downloads栏目：http://www.apple.com/downloads

就是要做左边边栏的这个效果,用鼠标悬停实现竖向滑动.

先来看看[最终效果],是不是和apple的一样?

当然是一样,因为第一步,直接就复制了apple的html代码如下

[sourcecode language='html']

用手JQuery风琴插件打造apple边栏导航菜单

[/sourcecode]

这段就为无脚本html代码,构建了基本的导航菜单结构.

接下来就是css定义样式.
[sourcecode language='css']
BODY { margin: 10px; padding: 0; font: 1em “Trebuchet MS”, verdana, arial, sans-serif; font-size: 100%; }
DIV.container { margin: auto; width: 90%; margin-bottom: 10px;}
TEXTAREA { width: 80%;}
FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
LEGEND { color: #ccc; font-size: 120%; }
INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }
LABEL { display: block; margin-top: 10px; }
IMG { margin: 5px; }

h2 {
margin: 0;
}

.drawers-wrapper {
position: relative;
width: 188px;

}

.drawer {
background:transparent url(http://images.apple.com/downloads/images/sideboxlight_bg20070611.gif) repeat-y scroll 0pt;
color:#76797C;
font-size:11px;
line-height:1.3em;
}

.boxcap {
height:5px;
left:0pt;
position:absolute;
width:100%;
z-index:100;
background:transparent url(http://images.apple.com/downloads/images/sidenav_capbottom.png) no-repeat scroll 0%;
margin-top:-5px;
}

.captop {
background-image:url(http://images.apple.com/downloads/images/box_188captop.png);
bottom:auto;
top:0pt;
margin-top:-1px;
}

.drawers {
margin-bottom:15px;
color:#76797C;
font-size:11px;
line-height: 18px;
}

.drawers A {
color:#666666;
text-decoration:none;
font-family:”Lucida Grande”,Geneva,Arial,Verdana,sans-serif;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}

.drawer li {
border-bottom:1px solid #E5E5E5;
line-height:16px;
padding:6px 0pt;
}

UL {
list-style: none;
padding: 0;
}

UL.drawers {
margin: 0;
}

.drawer-handle {
background:#939393 url(http://images.apple.com/downloads/images/slider_handlebg188.png) no-repeat scroll 0pt;
color:#333333;
cursor:default;
font-size:12px;
font-weight:normal;
height:25px;
line-height:25px;
margin-bottom:0pt;
text-indent:15px;
width:100%;
}

.drawer-handle.open {
background-color:#72839D;
background-position:-188px 0pt;
color:#FFFFFF;
}

.drawer UL {
padding: 0 12px;
padding-bottom:0pt;
}

.drawer-content UL {
padding-top: 7px;
}

.drawer-content LI A {
display:block;
overflow:hidden;
}

.alldownloads li {
border:0pt none;
line-height:18px;
padding:0pt;
}
[/sourcecode]

定义了样式后,形状就出来了,最后一步开始加载脚本文件.

首先需要的当然是jquery库,还是一如既往的用google提供的.
[sourcecode language='php']
[/sourcecode] 再把手风琴插件需要的2段代码加载,可以从这个地址下载. 这2个都是手风琴插件中的js [sourcecode language='php']
[/sourcecode] 最后加入短短的脚本如下: [sourcecode language='php']

[/sourcecode]

这样就完成了.

[打包下载]

原文地址:http://jqueryfordesigners.com/slide-out-and-drawer-effect/