jQuery Drop Down Navigation Tutorial
We often get asked as part of our courses how to create drop down navigation. I have never been a fan of drop down navigation as this can often be a barrier to accessibility, especially if care is not taken during implementation. As a part of the jQuery training course that we run, students build simple jQuery drop down navigation with an emphasis on it being progressive enhancement. The idea behind this is to familiarise students with the jQuery .slideUp() and .slideDown() methods and to keep them thinking about how the lack of JavaScript may affect potential navigation.
I have taken the basic code established during the course and turned it into a more flexible and portable jQuery Plugin. This tutorial is designed for those that want to take what was learned from the jQuery training and build enhanced drop down sliding navigation.
The main idea behind the code for this drop down navigation plugin is to provide a reasonable simple solution that progressive enhances the page. The plugin requires 2 very small semi-transparent .PNG images to provide the gradients. Remember that IE6 does not natively support alpha-transparency, so either provide a conditional style sheet for IE6 or run a PNG fix.
The code is explained in detail below, but a zipped up version of the navigation code with sample HTML, CSS and images is available from the download link for those that just want to get started using the drop down menus.
View Demo with no animated sub-options | View Demo with animated sub-options
If you find this code useful, please help support us to promote our work by clicking on the Facebook button on the left hand side of this page. Thank you.
jQuery Course Trainer
Bjorn has been involved in CSS based web design for nearly 20 years and has experience developing web applications in both small and large teams of developers.
Over the past few years he has closely followed the evolving standards for web development and has spent countless hours discussing appropriate markup with web designers in the industry. He has also run training courses on web standards and accessibility which stems from his vast experience with CSS web design.
