A website's Header section which includes mainly the logo and navigation menu, is the region that attracts a visitor the most. It's the first section of your entire layout that catches reader attention. Therefore with time designers introduced non-traditional versions of drop down menus using Jquery and CSS3. Most of you probably know how to customize a menu but you often find it difficult to add Jquery effects to an existing menu, add CSS3 transitions for rollover effects and especially to turn a simple horizontal menu into a multi-level drop down menu. In order to understand the core basics of a Menu's HTML and CSS structure we will be publishing series of tutorials on this topic to make it extremely easy for most of you to create and design Menus by your own.What's different about this Series?
In this series we will release some of our project codes for the first time. You wont find simple HTML menus here. You will learn how to create a fancy drop down menu, convert a horizontal menu into drop down, add jquery smooth sliding effect, add CSS3 animation effects and much more. If you were able to understand how a menu is structured and designed then you will surely become a better Web designer. These tutorials are not limited to Blogger and Wordpress users but can be implemented in any platform.
Navigation Menu Tutorials
2. Convert any Horizontal Menu into a Drop Down Menu
3. Add CSS3 Transitions To a Drop Down Menu - Coming Soon..
4. Create Animated Drop Down Menu With CSS3 Transitions - Coming Soon..
5. Add Jquery Slide Toggle Effect To a Drop Down Menu - Coming Soon..
6. Surprise...
Finding the Menu Class and ID
In CSS every HTML tag is styled using either a class that starts with a dot(.) or an ID that starts with a hash (#). The only difference between a class and ID is that a class can be used multiple times but an ID can be used only once.
Note: You don't need to learn Code structure just give it a quick view to understand the basics.Your job is to look at your Menu code inside your blog or website and find out its class name. This is all you need to do.
Your Menu will consist of two parts i.e CSS (stylesheet) and HTML. Since we are designing a Menu so its structure would look slightly similar to this one:
CSS Part:
In the above code the Menu has a class name called: .navigation . So in the HTML code which will cause the menu to appear the class will be called using the attribute class="navigation"
HTML Part:
This exact same concept is applied to all menus, only the class names and the code structure differs.
Adding the Drop Down Container
We Assume that your menu contains simple horizontally aligned links list and you do not have a Colum that drops vertically downwards on mouse hover. In order to create this column all you need to do is insert the following code inside the CSS part of your menu and it will play wonders!
Make these changes:
- Replace navigation with your Menu Class name
- To change drop down container colour in active mode edit #C70D0D for background and #FFFFFF for font colour
- To change drop down container colour on mouse hover edit #060505for background and #FFFFFF for font colour
Creating Multi Level Drop Down List
You are all done with the design work. Now you just need to create the list in HTML part. Any tab or link in your menu will have this structure:
To add a drop down list to this tab all you need to do is to paste the following code just before the closing li tag. See below:
To add a second drop down list within this vertical list, simply use the same concept. I will add the second vertical list after the tab: "FIRST LIST 2"
Rest follows the same pattern.
Practice Now
You can use the following simple horizontal menus that we designed two years back. You need to add the effect precisely using our HTML editor for interesting practice:
No comments:
Post a Comment