jquery-ui/demos/real-world/accordion-drawers/index.html

258 lines
12 KiB
HTML
Raw Normal View History

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;
}
.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;
}
.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-06-04 02:34:33 +00:00
<script type="text/javascript">
<!--
$(function () {
$('ul.drawers').accordion({
header: 'h2.drawer-handle',
selectedClass: 'open',
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">
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">
<div class="capt"></div>
<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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; Science</a></li>
<li id="sn-networkingsecurity"><a href="/downloads/macosx/networking_security/">Networking &amp; 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 &amp; 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>