Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

jquery simple implementation of sidebar

  • Loading branch information...
commit a25f9166d084a5f9c4d23b334496f954eb5f8dad 1 parent 96cec58
Vidyasagar authored
Showing with 359 additions and 0 deletions.
  1. +359 −0 jquery_sidebar.html
359 jquery_sidebar.html
View
@@ -0,0 +1,359 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+
+
+<html>
+
+<head>
+
+ <title>HeHe</title>
+
+
+
+ <style type="text/css">
+
+ /* A few IE bug fixes */
+
+ * { margin: 0; padding: 0; }
+
+ * html ul ul li a { height: 100%; }
+
+ * html ul li a { height: 100%; }
+
+ * html ul ul li { margin-bottom: -1px; }
+
+
+
+ body { padding-left: 10em; font-family: Arial, Helvetica, sans-serif; }
+
+ #theMenu { width: 200px; height: 350px; margin: 30px 0; padding: 0; }
+
+
+
+ /* Some list and link styling */
+
+ ul li { width: 200px; }
+
+ ul ul li { border-left: 25px solid #69c; padding: 0; width: 175px; margin-bottom: 0; }
+
+ ul ul li a { display:block; color: #000; padding: 3px 6px; font-size: small; }
+
+ ul ul li a:hover { display:block; color: #369; background-color: #eee; padding: 3px 8px; font-size: small; }
+
+ /* For the xtra menu */
+
+ ul ul ul li { border-left: none; border-bottom: 1px solid #eee; padding: 0; width: 175px; margin-bottom: 0; }
+
+ ul ul ul li a { display:block; color: #000; padding: 3px 6px; font-size: small; }
+
+ ul ul ul li a:hover { display:block; color: #369; background-color: #eee; padding: 3px 8px; font-size: small; }
+
+
+
+
+
+ li { list-style-type: none; }
+
+ h2 { margin-top: 1.5em; }
+
+
+
+ /* Header links styling */
+
+ h3.head a {
+
+ color: #333;
+
+ display:block;
+
+ border-top: 1px solid #36a;
+
+ border-right: 1px solid #36a;
+
+ background: #ddd url(down.gif) no-repeat;
+
+ background-position: 98% 50%;
+
+ padding: 3px 6px;
+
+ }
+
+ h3.head a:hover {
+
+ color: #000;
+
+ background: #ccc url(down.gif) no-repeat;
+
+ background-position: 98% 50%;
+
+ }
+
+ h3.selected a {
+
+ background: #69c url(up.gif) no-repeat;
+
+ background-position:98% 50%;
+
+ color: #fff;
+
+ padding: 3px 6px;
+
+ }
+
+ h3.selected a:hover {
+
+ background: #69c url(up.gif) no-repeat;
+
+ background-position:98% 50%;
+
+ color: #36a;
+
+ }
+
+
+
+ /* Xtra Header links styling */
+
+ h4.head a {
+
+ color: #333;
+
+ display:block;
+
+ border-top: 1px solid #36a;
+
+ border-right: 1px solid #36a;
+
+ background: #eee url(down.gif) no-repeat;
+
+ background-position: 98% 50%;
+
+ padding: 3px 6px;
+
+ }
+
+ h4.head a:hover {
+
+ color: #000;
+
+ background: #ddd url(down.gif) no-repeat;
+
+ background-position: 98% 50%;
+
+ }
+
+ h4.selected a {
+
+ background: #6c9 url(up.gif) no-repeat;
+
+ background-position:98% 50%;
+
+ color: #fff;
+
+ padding: 3px 6px;
+
+ }
+
+ h4.selected a:hover {
+
+ background: #6c9 url(up.gif) no-repeat;
+
+ background-position:98% 50%;
+
+ color: #36a;
+
+ }
+
+ </style>
+
+
+
+</head>
+
+<body>
+
+
+
+ <p><a href="index.php">The original example is found here</a>.</p>
+
+
+
+<script type="text/javascript" src="jquery.js"></script>
+
+<script type="text/javascript" src="accordion.js"></script>
+
+<script type="text/javascript">
+
+jQuery().ready(function(){
+
+ // applying the settings
+
+ jQuery('#theMenu').Accordion({
+
+ active: 'h3.selected',
+
+ header: 'h3.head',
+
+ alwaysOpen: false,
+
+ animated: true,
+
+ showSpeed: 400,
+
+ hideSpeed: 800
+
+ });
+
+ jQuery('#xtraMenu').Accordion({
+
+ active: 'h4.selected',
+
+ header: 'h4.head',
+
+ alwaysOpen: false,
+
+ animated: true,
+
+ showSpeed: 400,
+
+ hideSpeed: 800
+
+ });
+
+});
+
+</script>
+
+
+
+ <ul id="theMenu">
+
+ <li>
+
+ <h3 class="head"><a href="javascript:;">Title 1</a></h3>
+
+ <ul>
+
+ <li><a href="index-multi.php">Content 1 1</a></li>
+
+ <li><a href="index-multi.php">Content 1 2</a></li>
+
+ <li><a href="index-multi.php">Content 1 3</a></li>
+
+ </ul>
+
+ </li>
+
+ <li>
+
+ <h3 class="head"><a href="javascript:;">Title 2</a></h3>
+
+ <ul>
+
+ <li>
+
+ <ul id="xtraMenu">
+
+ <li>
+
+ <h4 class="head"><a href="javascript:;">Content xtra 2 1a</a></h4>
+
+ <ul>
+
+ <li><a href="index-multi.php">Content 2 1 1</a></li>
+
+ <li><a href="index-multi.php">Content 2 1 2</a></li>
+
+ <li><a href="index-multi.php">Content 2 1 3</a></li>
+
+ </ul>
+
+ </li>
+
+ <li>
+
+ <h4 class="head"><a href="javascript:;">Content xtra 2 1b</a></h4>
+
+ <ul>
+
+ <li><a href="index-multi.php">Content 2 2 1</a></li>
+
+ <li><a href="index-multi.php">Content 2 2 2</a></li>
+
+ <li><a href="index-multi.php">Content 2 2 3</a></li>
+
+ </ul>
+
+ </li>
+
+ </ul>
+
+ </li>
+
+ <li><a href="index-multi.php">Content 2 2</a></li>
+
+ <li><a href="index-multi.php">Content 2 3</a></li>
+
+ </ul>
+
+ </li>
+
+ <li>
+
+ <h3 class="head"><a href="javascript:;">Title 3</a></h3>
+
+ <ul>
+
+ <li><a href="index-multi.php">Content 3 1</a></li>
+
+ <li><a href="index-multi.php">Content 3 2</a></li>
+
+ <li><a href="index-multi.php">Content 3 3</a></li>
+
+ </ul>
+
+ </li>
+
+ <li>
+
+ <h3 class="head"><a href="javascript:;">Title 4</a></h3>
+
+ <ul>
+
+ <li><a href="index-multi.php">Content 4 1</a></li>
+
+ <li><a href="index-multi.php">Content 4 2</a></li>
+
+ <li><a href="index-multi.php">Content 4 3</a></li>
+
+ </ul>
+
+ </li>
+
+ <li>
+
+ <h3 class="head"><a href="javascript:;">Title 5</a></h3>
+
+ <ul>
+
+ <li><a href="index-multi.php">Content 5 1</a></li>
+
+ <li><a href="index-multi.php">Content 5 2</a></li>
+
+ <li><a href="index-multi.php">Content 5 3</a></li>
+
+ </ul>
+
+ </li>
+
+ </ul>
+
+
+
+
+
+
+
+ </body>
+
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.