Onix - CSS Responsive Menu

Onix - CSS Responsive Menu - Start Guide

Created by: marcoarib
Date: 2013/03/27
Contact: marco.arib@gmail.com

Thank you for purchase this item. If you have any questions about the item, please contact by the e-mail above.

CSS reference

Place the reference to the CSS file (Attention: Be sure where you put the files shown below):

Menu Configuration

Basics

"Onix - CSS Responsive Menu" is based in unordered lists. Take a look in this example below:

				
					
					
					Item 1
					Item 2
					Item 3
					Item 4
					Item 5

With icons (Font Awesome)

"Onix - CSS Responsive Menu" can be used with icons (see more icons here):

				
					
					
					Item 1
					Item 2
					Item 3
					Item 4
					Item 5

Right alignment

"Onix - CSS Responsive Menu" supports right alignment. Use the class "right" on the item:

				
					
					
					Item 1
					Item 2
					Item 3
					Item 4
					Item 5

Styles

"Onix - CSS Responsive Menu" has 10 preset styles (click here to see the demo page). The examples below uses the "blue" (class "blue") style:

				
					
					
					Item 1
					Item 2
					Item 3
					Item 4
					Item 5

Choose your style and delete the other styles to make the css file more lighter.

Dropdown sections

"Onix - CSS Responsive Menu" supports dropdown sections:

				
					
					
					Item 1
					Item 2 
						
							Subitem
							Subitem
							Subitem 
								
									Subitem
									Subitem
									Subitem
													
												
							Subitem
						
					
					Item 3
					Item 4
					Item 5

a) The span tag with class "arrow" (lines 3 and 7) represents a arrow indicating a dropdown section.
b) The dropdown section is a normal unordered list.

Search textbox

"Onix - CSS Responsive Menu" supports search textbox. Use the class "right" on the item:

				
					
					
					Item 1
					Item 2 
						
							Subitem
							Subitem
							Subitem 
								
									Subitem
									Subitem
									Subitem
													
												
							Subitem
						
					
					Item 3
					Item 4
					Item 5

a) The last item has class "search" indicating a search item and it has a form to perform searches

Click here to see the demo page.

Thanks again to purchase this item.

marcoarib