Posted on by & filed under Content - Highlights and Reviews, Web Development.

jQuery makes it easy to turn your site’s existing sidebar into a customizable user experience, allowing you to click on menu options and hide them. To do this, you’ll need to incorporate the jQuery cookies plugin, which you can get at: https://github.com/carhartl/jquery-cookie.

Here is a sample sidebar menu, using nested unordered lists:

With this setup, you can write code to cause each list of options on each submenu to toggle between hiding and showing when the title of that menu is clicked. What you’ll need to do is determine which submenu was clicked and what state the submenu is in, so that you can populate the created cookie.

This code is applicable to other structures. The key pieces for this code are: the main container’s id, menu; each menu’s title, with the class menu-title; and the container for the menu options, with the class menu-submenu.

Note: if you’re familiar with .toggle(), you might be tempted to collapse some of this code. Definitely give it a try! When I first implemented this, I used toggle, only to find occasional glitches when users double-clicked quickly on a submenu before the animation collapsed. Since the test for visible still passes before the hiding animation is complete, the cookie state may not reflect what’s on the screen.

Feel free to implement this feature on your own site!

Safari Books Online has the content you need

Check out these jQuery books available from Safari Books Online:

Want to add more interactivity and polish to your websites? Discover how jQuery can help you build complex scripting functionality in just a few lines of code Head First jQuery shows you how to navigate HTML documents while handling events, effects, callbacks, and animations. By the time you’ve completed the book, you’ll be incorporating Ajax apps, working seamlessly with HTML and CSS, and building your own plug-ins.
jQuery in Action, Second Edition is a fast-paced introduction and guide. It shows you how to traverse HTML documents, handle events, perform animations, and add Ajax to your web pages. The book’s unique “lab pages” anchor the explanation of each new concept in a practical example.
With these recipes, you’ll learn patterns and practices from 19 leading developers who use jQuery for everything from integrating simple components into websites and applications to developing complex, high-performance user interfaces. Ideal for newcomers and JavaScript veterans alike, jQuery Cookbook starts with the basics and then moves to practical use cases with tested solutions to common web development hurdles.

About the Author

  Ryan Macklin is freelance front-end developer, specializing in jQuery, JavaScript, PHP, HTML and CSS. He spends his off-hours as a freelance writer, editor and game designer, and maintains a blog revolving around game design and being a freelance writer & editor at http://RyanMacklin.com.

.

Tags: collapsible menus, jQuery, persistence,

Trackbacks/Pingbacks

  1.  jQuery Tip: Collapsible Menus, Adding No-Hide « Safari Books Online's Official Blog