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
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.
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.