MetroNav CSS3 Plugin With Transparent Style
MetroNav – Metro Navigation Bar is a flexiable plugin to make modern and cool navigation bars/menus for your templates, fit with both light and dark styles. This plugin just use CSS for modern browsers ( some js code for IE 6 ). You can put this plugin at the top or bottom of your page, change width or height of main menu, use solid colors, transparent colors or images for menu/submenu backgrounds.
Demos:
MetroNav – Metro Navigation Bar Demo
MetroNav Features:
- 3 navigation bar styles.
- Top and Bottom Positions.
- Works on IE 6 +, FireFox, Chrome, Opera, Safari.
- CSS 3 Animation Effects ( not for all browsers ).
- Fit both bright and dark templates.
- Support Clickable Menus ( IE 9 + ).
- Many color styles for main menu and submenu.
- Easy Customization.
Change Logs:
07 Jul 2012: Support Clickable Menu ( for IE 9 + ).
02 Jul 2012: First version.
Table of Content:
- Setup MetroNav.
- Naviagtion Bar Structures.
- Clickable Menu.
[ga_res]
Section 1: Setup MetroNav.
First of all, to ensure everything works correctly, please use <!DOCTYPE html> at top of the page.
Include the following code into HEAD section of the page.
Include CSS files:
<link rel="stylesheet" href="css/metronav.css" type="text/css" />
For Internet Explorer 6 works:
<!--[if lt IE 8]>
<style>
/* Hover effect on IE 6 */
body { behavior: url("csshover3.htc"); }
/* Fix PNG images for IE 6 */
img, div, input { behavior: url("iepngfix.htc"); }
</style>
/* Fix PNG images for IE 6 */
<script type="text/javascript" src="js/iepngfix_tilebg.js"></script>
<![endif]-->
End Section 1.
Section 2: Navigation Bar Structures.
This section should be read along with the example files also contained in the download package.
Once you have included your preferred css stylesheet in your header section, you are ready to create the navigation bar.
We have three styles of Navigation Bar: Normal style and Metro style ( 2 styles ).
With Metro Style you can use two menu styles: mn-style-1 and mn-style-2.
With Normal style you can use only one menu style: mn-style-normal.
NavBar main menu structure:
<ul class="navigation-bar-style-class">
<div class="menu-body-class background-class ">
<li class="menu-style-class">
<a>
<img src="" alt=""><span>Menu Title</span>
</a>
</li>
</div>
</ul>
Example:
<ul class="mn-lvl1-menu-metro">
<div class="mn-lvl1-menu-body mn-bg4">
<li class="mn-style-1">
<a href="#">
<img src="justfordemo/demo-img/m-big-char.png " alt="">
<span>MetroNav</span>
</a>
</li>
</div>
</ul>
After create navigation bar main menu, we continue to create Metro Play ( sub menu ). Metro Play will appear when somebody hover the pointer on an item in navigation bar ( Main Menu ). We have three sizes of Metro Play: mn-play (full width), mn-play-2 (490px), mn-play-3 (255px). You can change sizes of Metro Play in metronav.css file.
Main menu and Metro Play Structure:
<ul class="navigation-bar-style-class background-class">
<div class="menu-body-class background-class ">
<li class="menu-style-class">
<a>
<img src="" alt=""><span>Menu Title</span>
</a>
<div class="metro-play-class [animation] [metroplay-position-class]">
<div class="contrast-class">
<div class="background-class">
<div class="mn-showbox">
<div class="column-class">
// Add content here
</div>
</div>
</div>
</div>
</div>
</li>
</div>
</ul>
Example:
<ul class="mn-lvl1-menu-metro">
<div class="mn-lvl1-menu-body mn-bg4">
<li class="mn-style-1">
<a href="#">
<img src="justfordemo/demo-img/m-big-char.png" alt="">
<span>Menu Title</span>
</a>
<!-- Metro Play -->
<div class="mn-play animated fadeInDown">
<div class="lightstyle">
<div class="mn-bg11">
<div class="mn-showbox">
<div class="col-1 mn-bg4"><p>Column 1</p></div>
<div class="col-4 last-col mn-bg4"><p>Column 4</p></div>
<div class="clearspace"></div>
</div>
</div>
</div>
</div>
<!-- End Metro Play -->
</li>
</div>
</ul>
End Section 2.
Section 3: Clickable Menu.
This section should be read along with the metronav-click.html files also contained in the download package.
*** Note: In this version, Clickable Menu will not work on IE8 and older.
Config to submenu can be shown when the main menu is clicked:
1. First, add an anchor to <a> tag in a main menu you want to click. Example:
<ul class="mn-lvl1-menu-metro">
<div class="mn-lvl1-menu-body mn-bg4">
<li class="mn-style-1">
<a href="#menu-id">
<img src="justfordemo/demo-img/m-big-char.png" alt="">
<span>Metro Nav</span>
</a>
</li>
</div>
</ul>
2. Add an id=”menu-id” into submenu and use metro-play-class for click event. Example:
<ul class="mn-lvl1-menu-metro">
<div class="mn-lvl1-menu-body mn-bg4">
<li class="mn-style-1">
<a href="#menu-id">
<img src="justfordemo/demo-img/m-big-char.png" alt="">
<span>Metro Nav</span>
</a>
<!-- Metro Play -->
<div id="menu1" class="mn-play-click">
// Submenu Content
</div>
</li>
</div>
</ul>
3. Add the following code into <head> tag for this item can work on IE ( with hover event ).
<!--[if IE]>
<style>
.mn-lvl1-menu li:hover .mn-play-click, .mn-lvl1-menu li:hover .mn-play-2-click, .mn-lvl1-menu li:hover .mn-play-3-click,
.mn-lvl1-menu-metro li:hover .mn-play-click, .mn-lvl1-menu-metro li:hover .mn-play-2-click, .mn-lvl1-menu-metro li:hover .mn-play-3-click,
.mn-lvl1-menu li:hover .mn-play-bottom-click, .mn-lvl1-menu li:hover .mn-play-2-bottom-click, .mn-lvl1-menu li:hover .mn-play-3-bottom-click,
.mn-lvl1-menu-metro li:hover .mn-play-bottom-click, .mn-lvl1-menu-metro li:hover .mn-play-2-bottom-click, .mn-lvl1-menu-metro li:hover .mn-play-3-bottom-click {
display:block !important;
}
.close-bt {
display:none;
}
</style>
<![endif]-->
End Section 3.
[endedwords product=””]http://talk.sonhlab.com/room/metronav-css-plugin[/endedwords]
.