Thank you for purchasing my work. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here (in the sidebar). Thanks so much!
The menu consists in an unordered list containing DIV nested within list items (like any regular drop down in a certain way).
The whole menu is wrapped in a container which is necessary, so the structure looks like :
<div id="wrapper_menu">
<ul class="menu menu_black">
</ul>
</div>
The UL must have first the "menu" class and then the color variant class (black in this case, there are 8 other colors).
Let's go a little bit further and add the structure :
<div id="wrapper_menu">
<ul class="menu menu_black">
<li><a href="#" class="drop">Item 1</a>
FIRST DROP DOWN
</li>
<li><a href="#" class="drop">Item 2</a>
SECOND DROP DOWN
</li>
<li><a href="#" class="drop">Item 3</a>
THIRD DROP DOWN
</li>
<li class="nodrop"><a href="#">Item 4</a></li>
</ul>
</div>
As you can see, it's a regular list of items, the "drop" class shows an arrow and is not necessary. The Item 4 is the markup for an item which doesn't have any drop down.
Let's see now how to add content in the first drop down, we'll start with :
<li><a href="#" class="drop">Item 1</a> FIRST DROP DOWN </li>
We'll see now how to work with columns and the full width variant.
There are 5 containers available :
<li><a href="#" class="drop">Item 1</a>
<div class="dropdown_5columns">
765 PX CONTENT (Up to 5 columns)
</div>
</li>
<li><a href="#" class="drop">Item 1</a>
<div class="dropdown_4columns">
610 PX CONTENT (Up to 4 columns)
</div>
</li>
<li><a href="#" class="drop">Item 1</a>
<div class="dropdown_3columns">
455 PX CONTENT (Up to 3 columns)
</div>
</li>
<li><a href="#" class="drop">Item 1</a>
<div class="dropdown_2columns">
300 PX CONTENT (Up to 2 columns)
</div>
</li>
<li><a href="#" class="drop">Item 1</a>
<div class="dropdown_1column">
145 PX CONTENT (1 column)
</div>
</li>
The markup is a little bit different, the parent LI item must have the "fullwidth" class in order to display the drop down correctly :
<li class="fullwidth"><a href="#" class="drop">Item 1</a>
<div class="dropdown_fullwidth">
920 PX CONTENT
</div>
</li>
And if you use the full width variant for the first menu item, there's an additional class "first_fullwidth" fixing rounded corners :
<li class="fullwidth"><a href="#" class="drop">Item 1</a>
<div class="dropdown_fullwidth first_fullwidth">
920 PX CONTENT
</div>
</li>
In all HTML examples, you'll find that the last menu item sticks to the right edge of the menu, there are some additional classes required for this specific item (there also could be several right aligned items).
For the "columns" variant :
<li class="right"><a href="#" class="drop">RIGHT ITEM</a>
<div class="dropdown_1column align_right">
</div>
</li>
And the "full width" variant :
<li class="right fullwidth"><a href="#" class="drop">RIGHT ITEM</a>
<div class="dropdown_fullwidth align_right">
</div>
</li>
First the LI parent element must have the "right" class and then the container DIV the "align_right" class.
Now that we have seen all available containers, the content itself can be organized into columns. The different HTML pages come with a lot of examples showing all the possibilities.
Within each type of container, all your content can be organized easily into columns (up to 6) but make sure that the parent container is adapted to the sizes you want to use. Here are the possibilities :
<div class="col_6"> 920 PX CONTENT </div> <div class="col_5"> 765 PX CONTENT </div> <div class="col_4"> 610 PX CONTENT </div> <div class="col_3"> 455 PX CONTENT </div> <div class="col_2"> 300 PX CONTENT </div> <div class="col_1"> 145 PX CONTENT </div>
Each time you have a column that sticks to the left edge of the parent container, you must use the "firstcolumn" class in order to remove the left margin spacing the columns :
<div class="col_6 firstcolumn"> 920 PX CONTENT </div>
In each variant or subfolder, there's only 1 CSS file which differ according to the layout variant (horizontal, vertical) and the color theme (light or dark) : megamenu.css is the only necessary file and follows the same structure for each variant :
01 MENU BAR 02 DROP DOWN MENU 03 CONTENT STYLING 04 CONTACT FORM 05 COLORS
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
The "Menu Bar" section contains the styling necessary for the menu container and the menu items.
The "Drop Down Menu" part defines all drop down containers as well as the columns used to organize the content.
The "Content Styling" styles all the HTML elements within the drop downs such as : paragraphs, headings, list items, images, etc.
The "Contact Form" section is used to style the form elements only.
And the "Colors" section contains all colored elements : the navigation bar gradient, and the links within the drop downs.
To switch from a color to another, it's now much easier than in the previous versions of this menu, simply open the HTML and change the class of the UL container at the top :
<div id="wrapper_menu">
<ul class="menu menu_black">
</ul>
</div>
In the above code, we have the black variant enabled thanks to the class "menu_black", there are other options available :
As the colors are grouped at the end of the CSS, you can easily modify or create your own color scheme by customizing the elements there. It's also overwriting any previous styling for the concerned elements.
Since the version 4.0, a fully working contact form has been added.
To enable it, the only modification you'll need to do is to add your email address. For that, open the file sendmail.php situated in the folder form and scroll down until you find the line : $sendto = 'youremail@example.com'; where you replace the example email by yours.
If you don't need the contact form at all, you can get rid of it by :
Removing the folder form
Removing the links to the javascript files in the HTML (if applicable) :
<script type="text/javascript" src="form/jquery.js"></script> <script type="text/javascript" src="form/jquery.form.js"></script>
You can then delete the HTML lines of code of the contact form (if applicable) which begins at :
<div id="contact_form">
This menu has been tested and optimized for Internet Explorer (from the version 6). You'll find all the necessary files in the "ie" subfolder.
First there is the csshover3.htc which enables the "hover" function on non-anchor elements for Internet Explorer 6. If you remove it, the menu won't work at all under IE6.
There are 2 CSS files :
And a few images used by IE6 only (because this browser doesn't support PNG transparency).
This menu has been tested in all the following browsers, the only major difference is the rendering of CSS3 effects such as rounded corners or gradients. There are some fixes available on the web to enable CSS3 on older browsers but after a lot of testing, I found out that many of these scripts break the menu.
The browsers tested are :
If you have a problem and want to contact me, please make sure that :
Support can take up to 48 hours (except during holidays, it can be more during those periods), and I usually need to see the problem so don't hesitate to send me a link with a description of your problem.
Thanks for reading :)
I've used the following images, icons or other files as listed.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. 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.
Pixelworkshop