Create an Awesome Drop Down Menu for Your WordPress Blog Without Using Plugins
Plugins and Coding
Plugins, of course, are always the easiest route to take. They require no coding knowledge and can be easily added to your WordPress blog with little effort. However, choosing to manually add elements to your blog will not only teach you more about coding, but also give you a better understanding of your site so that future modifications can be done easily.
There is one decent plugin out there that adds drop down menus to WordPress. It is the Suckerfish plugin. You can find out more info on that here.
Examples
Before we get started, take a look at some of these sites that are using mega drop down menus. You will notice that they are multi level, two tier drop downs with a high degree of flexibility and customization.
Food Network uses mega drop down menus
Newegg uses mega drop down menus
As you can see, the main difference between a mega drop down menu and a normal drop down menu is the multiple line list items and the high degree of customization. If you are looking to create just a simple drop down menu, this tutorial will work for you, you can just remove list items.
Create the List
The first thing that you will need to do is create the actual markup for your drop down menu. For this tutorial we will be using some very basic html incorporating unordered lists and list items. Below will be an example of what the list should look like. Change the item headings and paragraphs to fit your own needs.
Home
Part 2
The above code will give you a mega menu with a home button, a wine button, and a beer button. The wine and beer buttons will feature drop down options in mega menu format. Be sure to check out part 2 to which will cover the CSS and JavaScript.
References
- Image Credit: WordPress Logo - http://wordpress.org
- Suckerfish Plugin - http://wordpress.org/extend/plugins/ryans-suckerfish-wordpress-dropdown-menu/
This post is part of the series: How To Add A Mega Drop Down Menu To Your WordPress Blog
This two part series tutorial will teach you how to add a basic drop down menu to WordPress using CSS, HTML, JavaScript, and jQuery.
