2008-09-20 17:30:51 +00:00
<!doctype html>
2008-06-04 02:34:33 +00:00
< html lang = "en" >
< head >
< meta http-equiv = "Content-type" content = "text/html; charset=utf-8" / >
< title > Slide Demo - Fixed Drawer< / title >
< style type = "text/css" media = "screen" >
<!--
/*************************************/
/* Blueprint: reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* Remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
/* Remove possible quote marks (") from < q > , < blockquote > . */
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/*************************************/
/* Demo Styles */
.capt,
.capb {
background: url("images/caps.gif") no-repeat;
height:4px;
width:100%;
/*position:absolute;*/
z-index:100;
margin:0px;
padding:0px;
}
.capt {
position:absolute;
background-position:0 -4px;
}
.capb {
margin-top:-19px;
}
#content {
float:left;
}
.drawers-wrapper {
position: relative;
width: 188px;
float:left;
margin:10px;
}
.drawers {
margin-bottom:15px;
color:#76797C;
font-size:11px;
line-height: 18px;
}
.drawer {
background:transparent url(images/sideboxlight_bg.gif) repeat-y scroll 0pt;
color:#76797C;
font-size:11px;
line-height:1.3em;
2008-09-27 04:23:14 +00:00
height: 1%; /* for IE6 & 7 */
2008-06-04 02:34:33 +00:00
}
2008-09-27 04:23:14 +00:00
2008-06-04 02:34:33 +00:00
.drawer-handle {
background:#939393 url(images/slider_handlebg.png) no-repeat scroll 0pt;
color:#333333;
cursor:default;
height:25px;
line-height:25px;
text-indent:15px;
font-size:12px;
width:100%;
}
.drawer-handle.open {
background-color:#72839D;
background-position:-188px 0pt;
color:#FFFFFF;
}
/* nasty, but it fixes the indent on the first one. */
h2.drawer-handle span {
}
.drawer ul {
padding: 0 12px;
padding-bottom:0pt;
}
2008-09-27 04:23:14 +00:00
/* for IE6 - to override the colour set by .drawer-handle.open (IE6 cannot handle class concatinations) */
* html .drawer ul {
background-color: #FFFFFF;
margin: 0 1px;
}
2008-06-04 02:34:33 +00:00
.drawer li {
border-bottom:1px solid #E5E5E5;
line-height:16px;
padding:6px 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;
}
.drawers a {
color:#666666;
text-decoration:none;
font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
}
-->
< / style >
2008-06-07 18:03:19 +00:00
< script type = "text/javascript" src = "../../../jquery-1.2.6.js" > < / script >
2008-06-04 02:34:33 +00:00
2008-06-07 18:44:32 +00:00
< script type = "text/javascript" src = "../../../ui/ui.core.js" > < / script >
< script type = "text/javascript" src = "../../../ui/ui.accordion.js" > < / script >
2008-09-30 02:50:23 +00:00
< script type = "text/javascript" src = "../../../ui/effects.core.js" > < / script >
2008-06-04 02:34:33 +00:00
< script type = "text/javascript" >
<!--
$(function () {
$('ul.drawers').accordion({
header: 'h2.drawer-handle',
selectedClass: 'open',
2008-09-30 02:50:23 +00:00
//animated: 'easeOutBounce',
//animated: 'bounceslide',
//animated: 'easeslide',
animated: function(options) {
return options.down ? "easeOutBounce" : "easeInOutCubic";
},
//duration: 500,
duration: function(options) {
return options.down ? 700 : 400;
},
2008-06-04 02:34:33 +00:00
event: 'mouseover'
});
});
//-->
< / script >
< / head >
< body id = "page" >
< div id = "content" >
< h1 > Fixed drawer slide out demo (using accordion plugin)< / h1 >
< p > This example demonstrates the Apple downloads slider/accordion effect using the jQuery Accordion plugin.< / p >
< p > Mouse over the headings to reveal the list of available links.< / p >
< p >
< a href = "http://jqueryfordesigners.com/slide-out-and-drawer-effect/" > Read the article this demonstration relates to< / a >
< / p >
< / div >
< div class = "drawers-wrapper" >
2008-09-27 04:23:14 +00:00
< div class = "capt" > < / div >
2008-06-04 02:34:33 +00:00
< ul class = "drawers" >
< li class = "drawer" >
< h2 class = "drawer-handle open" >
< span > Downloads< / span >
< / h2 >
< ul class = "alldownloads" >
< li id = "sn-downloadsmacosx" > < a href = "/downloads/macosx/" > All Categories< / a > < / li >
< li id = "sn-aperture" > < a href = "/downloads/macosx/aperture/" > Aperture< / a > < / li >
< li id = "sn-apple" > < a href = "/downloads/macosx/apple/" > Apple< / a > < / li >
< li id = "sn-audio" > < a href = "/downloads/macosx/audio/" > Audio< / a > < / li >
< li id = "sn-automator" > < a href = "/downloads/macosx/automator/" > Automator Actions< / a > < / li >
< li id = "sn-businessfinance" > < a href = "/downloads/macosx/business_finance/" > Business & Finance< / a > < / li >
< li id = "sn-calendars" > < a href = "/downloads/macosx/calendars/" > Calendars< / a > < / li >
< li id = "sn-developmenttools" > < a href = "/downloads/macosx/development_tools/" > Development Tools< / a > < / li >
< li id = "sn-drivers" > < a href = "/downloads/macosx/drivers/" > Drivers< / a > < / li >
< li id = "sn-emailchat" > < a href = "/downloads/macosx/email_chat/" > Email & Chat< / a > < / li >
< li id = "sn-finalcutstudio" > < a href = "/downloads/macosx/finalcutstudio/" > Final Cut Studio< / a > < / li >
< li id = "sn-games" > < a href = "/downloads/macosx/games/" > Games< / a > < / li >
< li id = "sn-homelearning" > < a href = "/downloads/macosx/home_learning/" > Home & Learning< / a > < / li >
< li id = "sn-iconsscreensavers" > < a href = "/downloads/macosx/icons_screensavers/" > Icons, Screensavers, etc.< / a > < / li >
< li id = "sn-imaging3d" > < a href = "/downloads/macosx/imaging_3d/" > Imaging & 3D< / a > < / li >
< li id = "sn-internetutilities" > < a href = "/downloads/macosx/internet_utilities/" > Internet Utilities< / a > < / li >
< li id = "sn-ipoditunes" > < a href = "/downloads/macosx/ipod_itunes/" > iPod + iTunes< / a > < / li >
< li id = "sn-mathscience" > < a href = "/downloads/macosx/math_science/" > Math & Science< / a > < / li >
< li id = "sn-networkingsecurity" > < a href = "/downloads/macosx/networking_security/" > Networking & Security< / a > < / li >
< li id = "sn-productivitytools" > < a href = "/downloads/macosx/productivity_tools/" > Productivity Tools< / a > < / li >
< li id = "sn-spotlight" > < a href = "/downloads/macosx/spotlight/" > Spotlight Plugins< / a > < / li >
< li id = "sn-systemdiskutilities" > < a href = "/downloads/macosx/system_disk_utilities/" > System/Disk Utilities< / a > < / li >
< li id = "sn-unixopensource" > < a href = "/downloads/macosx/unix_open_source/" > UNIX & Open Source< / a > < / li >
< li id = "sn-video" > < a href = "/downloads/macosx/video/" > Video< / a > < / li >
< li id = "sn-dashboard" > < a href = "/downloads/dashboard/" class = "bottom" > Widgets< / a > < / li >
< / ul >
< / li >
< li class = "drawer" >
< h2 class = "drawer-handle" > Top Downloads< / h2 >
< ul >
< li > < a title = "iTunes 7.5" href = "http://www.apple.com/itunes/download/" > 1. iTunes 7.5< / a > < / li >
< li > < a title = "QuickTime 7.3.1" href = "http://www.apple.com/quicktime/download/" > 2. QuickTime 7.3.1< / a > < / li >
< li > < a title = "Safari 3 Public Beta" href = "http://www.apple.com/safari/download/" > 3. Safari 3 Public Beta< / a > < / li >
< li > < a title = "MacPool" href = "/downloads/macosx/games/simulation_and_sports/macpool.html" > 4. MacPool Realistic and easy to play computer simu…< / a > < / li >
< li > < a title = "Guitar Hero III: Legends of Rock" href = "/downloads/macosx/games/demos_updates/guitarheroiiilegendsofrock.html" > 5. Guitar Hero III: L…< / a > < / li >
< li > < a title = "Messenger for Mac" href = "/downloads/macosx/email_chat/messengerformac.html" > 6. Messenger for Mac< / a > < / li >
< li > < a title = "Google Earth" href = "/downloads/macosx/home_learning/googleearth.html" > 7. Google Earth< / a > < / li >
< li > < a title = "Monopoly" href = "/downloads/macosx/games/cards_puzzle/monopoly.html" > 8. Monopoly< / a > < / li >
< li > < a title = "Litho System Icons" href = "/downloads/macosx/icons_screensavers/lithosystemicons.html" > 9. Litho System Icons< / a > < / li >
< li > < a title = "Battlefield 2142" href = "/downloads/macosx/games/demos_updates/battlefield2142.html" > 10. Battlefield 2142< / a > < / li >
< li > < a title = "More iChat Effects" href = "/downloads/macosx/email_chat/moreichateffects.html" > 11. More iChat Effects< / a > < / li >
< li > < a title = "Dragster" href = "/downloads/macosx/internet_utilities/dragster.html" > 12. Dragster< / a > < / li >
< li > < a title = "iSquint" href = "/downloads/macosx/ipod_itunes/isquint.html" > 13. iSquint< / a > < / li >
< li class = "last" > < a title = "US Holiday Calendar" href = "/downloads/macosx/calendars/usholidaycalendar.html" > 14. US Holiday Calendar< / a > < / li >
< / ul >
< / li >
< li class = "drawer last" >
< h2 class = "drawer-handle" > Top Apple Downloads< / h2 >
< ul >
< li > < a title = "iTunes 7.5" href = "http://www.apple.com/itunes/download/" > 1. iTunes 7.5< / a > < / li >
< li > < a title = "QuickTime 7.3.1" href = "http://www.apple.com/quicktime/download/" > 2. QuickTime 7.3.1< / a > < / li >
< li > < a title = "Safari 3 Public Beta" href = "http://www.apple.com/safari/download/" > 3. Safari 3 Public Beta< / a > < / li >
< li > < a title = "Mac OS X 10.5.1 Update" href = "/downloads/macosx/apple/macosx_updates/macosx1051update.html" > 4. Mac OS X 10.5.1 Up…< / a > < / li >
< li > < a title = "Java for Mac OS X 10.4 Release 5" href = "/downloads/macosx/apple/macosx_updates/javaformacosx104release5.html" > 5. Java for Mac OS X …< / a > < / li >
< li > < a title = "iPod Reset Utility 1.0.2 for Windows" href = "/downloads/macosx/apple/ipod_itunes/ipodresetutility102forwindows.html" > 6. iPod Reset Utility…< / a > < / li >
< li > < a title = "iPhoto 7.1.1" href = "/downloads/macosx/apple/application_updates/iphoto711.html" > 7. iPhoto 7.1.1< / a > < / li >
< li > < a title = "Bonjour for Windows" href = "/downloads/macosx/apple/windows/bonjourforwindows.html" > 8. Bonjour for Windows< / a > < / li >
< li > < a title = "Mac OS X 10.4.11 Combo Update (PPC)" href = "/downloads/macosx/apple/macosx_updates/macosx10411comboupdateppc.html" > 9. Mac OS X 10.4.11 C…< br / > The 10.4.11 Update is recommended for al…< / a > < / li >
< li > < a title = "Java for Mac OS X 10.4, Release 6" href = "/downloads/macosx/apple/macosx_updates/javaformacosx104release6.html" > 10. Java for Mac OS X …< / a > < / li >
< li > < a title = "GarageBand 4.1.1" href = "/downloads/macosx/apple/application_updates/garageband411.html" > 11. GarageBand 4.1.1< / a > < / li >
< li > < a title = "iPod Updater 2006-06-28 for Windows" href = "/downloads/macosx/apple/ipod_itunes/ipodupdater20060628forwindows.html" > 12. iPod Updater 2006-…< / a > < / li >
< li > < a title = "Security Update 2007-009 1.1 (10.4.11 Universal)" href = "/downloads/macosx/apple/security_updates/securityupdate20070091110411universal.html" > 13. Security Update 20…< / a > < / li >
< li class = "last" > < a title = "Security Update 2007-009 1.1 (10.5.1)" href = "/downloads/macosx/apple/security_updates/securityupdate2007009111051.html" > 14. Security Update 20…< / a > < / li >
< / ul >
< / li >
< / ul >
< div class = "capb" > < / div >
< / div >
< / body >
< / html >
