MoonKat Creations

I created this accordion menu rather on accident. (See my previous post, ). I was actually writing jQuery to make a show/hide question answer list, and realized it would be really easy to turn it into an accordion menu.

Here’s the result:

• Our Company
  • About Us
  • History
• Products/Services
  • Custom Web Design
  • Content Management Solutions
  • Website Optimization
  • Email Campaigns
• Portfolio
  • Static HTML
  • Wordpress Themes
  • Emails
• Contact
  • Phone
  • Email
  • Request a Quote

How to create it:

1. Include the jQuery library in your page with a script tag. Example:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js"></script>

This example links directly to the jQuery library hosted on google. You may link to your own copy.

2. Create a new .js document, and add this code:

$(document).ready(function(){
	$("ul.hidden").hide();
	$("a.toggleLink").click(function () {
		$("ul.hidden").not($(this).next("ul:first")).slideUp();
		$(this).next("ul:first").slideToggle("normal");
	});
});

Add this file using the <script> tag.

3. Add this to the body of your page:

<ul id="accordian_menu">

     <li><a href="#" class="toggleLink">Our Company</a>

     <ul class="hidden">

     <li><a href="#">About Us</a></li>

     <li><a href="#">History</a></li>

     </ul>

     </li>

     <li><a href="#" class="toggleLink">Products/Services</a>

     <ul class="hidden">

     <li><a href="#">Custom Web Design</a></li>

     <li><a href="#">Content Management Solutions</a></li>

     <li><a href="#">Website Optimization</a></li>

     <li><a href="#">Email Campaigns</a></li>

     </ul>

     </li>

     <li><a href="#" class="toggleLink">Portfolio</a>

     <ul class="hidden">

     <li><a href="#">Static HTML</a></li>

     <li><a href="#">Wordpress Themes</a></li>

     <li><a href="#">Emails</a></li>

     </ul>

     </li>

     <li><a href="#" class="toggleLink">Contact</a>

     <ul class="hidden">

     <li><a href="#">Phone</a></li>

     <li><a href="#">Email</a></li>

     <li><a href="#">Request a Quote</a></li>

     </ul>

     </li>

</ul>

4. Add these classes to your stylesheet:

a {
	text-decoration: none;
}
a.toggleLink {
	display: block;
	padding: 5px;
	background: #936;
	color: white;
	border-bottom:1px dotted #CC99CC;
	}
ul#accordian_menu {
	margin: 0;
	padding: 0;
	width: 150px;
}
ul#accordian_menu li {
	list-style-type: none;
}
ul#accordian_menu li ul {
	padding-left: 0;
	background: #FFDAEE;
}
ul#accordian_menu li ul li {
}
ul#accordian_menu li ul li a:hover {
	background: white;
}
ul#accordian_menu li ul li a {
	color: #936;
	display: block;
	border-bottom: 1px dotted #C9C;
	padding: 5px;
}

These classes could probably be refined a little, but I kept them pretty specific so they won’t conflict with any similar markup that might be in your page. Feel free to rename or change them to suit your needs.

Take it further:

Use divs or paragraphs instead of list items to make a show/hide section of content.

Note: If you’re new to jQuery, you only need to include the $(document).ready(function()) once in your javascript document–wrap it around all of your functions.

1. Firefox will put a vertical AND horizontal scrollbar on a textarea by default.

To get rid of the horizontal scrolling, use this:

overflow-y: scroll; (or overflow-y: auto if you don’t want your scrollbar to appear if it’s not needed)
overflow-x: hidden;

Not this, as I’ve seen suggested on various blogs:

overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
overflow:-moz-scrollbars-vertical;

I’m not sure what the advantage is to the extra styles, as I’ve seen no difference in rendering.

2. Firefox will not wrap a single word. Use text with spacing for testing. I’ve made the mistake of testing with one long string of keyboard gibberish, and wondered why I could only get horizontal scrolling. Also, if you have your x-scrolling disabled, the string of characters that exceeds the width of the text box will be cut off from view.

Spaces are good

Single string is bad

3. Be sure to set the height of the textarea great enough for the browser to render a scroll icon. If the textarea isn’t tall enough, all you’ll get is a gray box on the right hand side, which is still functional, but not intuitive.

With a specified height

Without a specified height

(more…)