“CSS Navigation Menu” Documentation by “eucalyptuss” v1.6


“CSS Navigation Menu”

Created: 15/07/2012
By: Mikolaj "eucalyptuss" Dobrucki
Email: eucalyptuss

Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email me via my user page contact form here. Thanks so much!


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure

A) HTML Structure - top

HTML is a valid HTML 5 and should work perfectly in all modern browsers.
The basic structure of navigation menu looks like this:

			
<ul class="navigation color">
	<li><a href="#">Option 1</a></li>
	<li><a href="#">Option 2</a></li>
	<li><a href="#">Option 3</a></li>
</ul>
			

In this structure each li tag determinates one option of the menu. To customize it you need to type the right names in the a tag and replace # mark with the right path, to make the link working.

If you want to extend the menu with a dropdown, add a div container to the li tag.

			
<li>
	<a href="#">Menu</a>
	<div class="color"></div>
</li>
			

The dropdown structure is based on the columns, created according to the principles of 960 grid system. Each column needs to be placed in the separated div with the appreciate CSS class (more information in the next section). When formating the dropdown you can use img tags for images, h2 and h3 tags for headings and a tags for links.

To add a search field to the menu use the input element, placing it inside a div container with the class 'search', instead of li tag.

			
<ul class="navigation color">
	<div class="search"> <input type="text"> </div>
</ul>
			


B) CSS Files and Structure - top

CSS file is well-organised and should be very easy to follow. Always make sure that you linked the css file in the <head> section of html file properly, providing the correct path to the css file.

There are 3 css files to choose for different alignments. Fox example, if you want to make your menu bar stick to the left side, this link should look like this:

			
<link rel="stylesheet" href="css/left.css" />
			

To set the colors of the menu bar and the dropdowns replace the "color" class with the name of the appreciate color. There are 8 colors available for the bar (red, orange, yellow, green, blue, purple, black, grey) and two for the dropdown (dark and light).

When building the dropdown, there are twelve CSS classes to your disposition (.grid_1, .grid_2, grid_3, ... , grid_12). You can read more about this project and how to use it here.
For example, if you want to divide the dropdown into three equal columns, it should look like like this:

<div class="light">	
	<div class="grid_4">	
	</div>
	<div class="grid_4">	
	</div>
	<div class="grid_4">	
	</div>
</div>
		

Using the images in the dropdown, you can add the .left or .right class to the img tag to make the image sticking to the left or right side. The styling for images' borders, headings, links and parapgraphs are contained in the CSS file, and they applied automatically.

To stick one or a few of the menu options to the right side of the bar add the .right class to the li tag.

		
<li class="right"></li>
		
Other classes you might need:

If you want to highlight some part of your content in a special box you can put it inside a div container with a class 'box':

		
<li> <div class="box"></div> </li>
		

You can also highlight links with a special class 'link':

		
<a class="link" href="#">Some link</a>
		

Once again, thank you so much for purchasing this item. As I said at the beginning, I'd be glad to help you if you have any questions relating to this item. No guarantees, but I'll do my best to assist. If you have a more general question relating to the items on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

eucalyptuss

Go To Table of Contents