1 Sep 2013

AWESOME PREMIUM Z WHITE MENU

This is the first Css style menu that we are sharing at My blogger skill. This widget is completely controlled by CSS as well as HTML. It is also easily customizable, if you know a little bit of HTML and CSS




STEPS TO ADD THIS WIDGET

HERE IS CSS CODE
JUST ADD THIS CSS CODE BEFORE -]]></b:skin>


nav.primary {
position: absolute;
right: 0;
top: 0;
padding: 0px;
z-index: 99;
}
#topnav {
margin: 0;
}
.sf-menu {
padding: 0px 0px 0px 0px;
position: relative;
background: none;
text-align: left;
}
.sf-menu li {
position: relative;
list-style: none;
}
.sf-menu>li {
display: block;
float: left;
text-align: center;
position: relative;
margin: 0;
padding: 0;
background: url(images/menu-separator.png) 0 0 repeat-y;
}
.sf-menu>li.last, .sf-menu>li.last .bg-menu {
border-radius: 0 0px 4px 0;
}
.sf-menu .bg-menu {
background: url(images/bg-menu.gif) 0 bottom repeat-x #dd2a0b;
cursor: pointer;
bottom: 50%;
left: 50%;
right: 50%;
top: 50%;
opacity: 0;
position: absolute;
z-index: 2;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sf-menu>li:hover .bg-menu, .sf-menu>li.sfHover .bg-menu, .sf-menu>li.current-menu-item .bg-menu {
bottom: 0;
left: 0;
opacity: 1.0;
right: 0;
top: 0;
}
.sf-menu>li>a>.menu-marker {
display: inline-block;
width: 7px;
height: 4px;
position: absolute;
bottom: 36px;
left: 50%;
margin-left: -3px;
background: url(images/main-menu-marker.png) center 0 no-repeat;
z-index: 4;
}
.sf-menu>li:hover>a>.menu-marker, .sf-menu>li.sfHover>a>.menu-marker, .sf-menu>li.current-menu-item>a>.menu-marker {
background-position: 0 -4px;
}
.sf-menu li a {
display: block;
text-decoration: none;
position: relative;
z-index: 3;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sf-menu>li>a {
font-size: 16px;
line-height: 20px;
background: none;
padding: 52px 21px 51px 22px;
color: #656464;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: 400;
}
.sf-menu>li:hover>a, .sf-menu>li.sfHover>a, .sf-menu>li.current-menu-item>a {
color: #fff;
}
.sf-menu ul {
position: absolute;
width: 213px;
padding: 0px 0 0px 0;
z-index: 200;
display: none;
margin: 0;
background: #2f2f2f;
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
left: 0;
top: 123px;
z-index: 99;
}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {
width: 213px;
padding: 0;
margin: 0;
background: #2f2f2f;
}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
left: -213px;
top: 0px;
z-index: 99;
}
.sf-menu ul li, .sf-menu ul li li {
margin: 0;
padding: 0;
text-align: left;
background: none;
display: block;
border-top: 1px solid #3c3b3b;
}
.sf-menu ul li:first-child, .sf-menu ul li li:first-child {
border-top: none;
}
.sf-menu li li a {
text-align: left;
color: #fafafa;
font-size: 12px;
line-height: 18px;
padding: 8px 5px 8px 23px;
background: url(images/menu-marker.png) 88% 51% no-repeat;
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sf-menu li li.current-menu-item>a, .sf-menu li li.sfHover>a, .sf-menu li li:hover>a {
color: #e50f0f;
}
.select-menu {
border: 1px solid #c8c8c8;
background-color: #e4e4e4;
width: 100%;
height: 30px;
padding: 5px;
cursor: pointer;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.select-menu:focus {
border-color: #999;
}
.select-menu option {
padding: 5px;
cursor: pointer;
}
.select-menu option.main_item {
font-weight: bold;
}

NOW HTML CODE-ADD THIS ANYWHERE YOU WANT TO APPEAR YOUR MENU

<nav class="primary"><ul id="menu-mainmenu" class="sf-menu sf-js-enabled"><li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a title="CMS Themes" href="#">CMS Themes</a>
<ul class="sub-menu" style="visibility: hidden; display: none;">
<li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-26"><a title="WordPress Themes" href="http://fxtheme.com/categories/wordpress">WordPress</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-17"><a title="joomla template premium" href="http://fxtheme.com/categories/joomla">Joomla</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-9"><a title="drupal best responsive theme" href="http://fxtheme.com/categories/drupal">Drupal</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-7"><a title="concrete5 templates" href="http://fxtheme.com/categories/concrete5">Concrete5</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-11"><a title="expressionengine templates" href="http://fxtheme.com/categories/expressionengine">ExpressionEngine</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-8"><a href="http://fxtheme.com/categories/custom">Custom</a></li>
</ul>
<span class="bg-menu"></span></li>
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a href="#">eCommerce</a>
<ul class="sub-menu" style="visibility: hidden; display: none;">
<li id="menu-item-19" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-19"><a title="magento themes responsive" href="http://fxtheme.com/categories/magento">Magento</a></li>
<li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-24"><a title="shopify themes free" href="http://fxtheme.com/categories/shopify">Shopify</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-20"><a title="opencart premium themes" href="http://fxtheme.com/categories/opencart">OpenCart</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-21"><a title="oscommerce premium themes" href="http://fxtheme.com/categories/oscommerce">osCommerce</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-22"><a title="prestashop premium themes" href="http://fxtheme.com/categories/prestashop">PrestaShop</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-27"><a title="zen cart templates premium" href="http://fxtheme.com/categories/zen-cart">Zen Cart</a></li>
</ul>
<span class="bg-menu"></span></li>
<li id="menu-item-23" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-23"><a href="#">PSD Templates</a>
<ul class="sub-menu" style="display: none; visibility: hidden;">
<li id="menu-item-50" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-50"><a href="http://fxtheme.com/categories/technology-psd-templates">Technology</a></li>
<li id="menu-item-45" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-45"><a href="http://fxtheme.com/categories/entertainment-psd-templates">Entertainment</a></li>
<li id="menu-item-43" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-43"><a href="http://fxtheme.com/categories/corporate-psd-templates">Corporate</a></li>
<li id="menu-item-44" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-44"><a href="http://fxtheme.com/categories/creative-psd-templates">Creative</a></li>
<li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-47"><a href="http://fxtheme.com/categories/nonprofit-psd-templates">Nonprofit</a></li>
<li id="menu-item-48" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-48"><a href="http://fxtheme.com/categories/personal-psd-templates">Personal</a></li>
<li id="menu-item-49" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-49"><a href="http://fxtheme.com/categories/retail-psd-templates">Retail</a></li>
<li id="menu-item-46" class="menu-item menu-item-type-taxonomy menu-item-object-categories menu-item-46"><a href="http://fxtheme.com/categories/miscellaneous-psd-templates">Miscellaneous</a></li>
</ul>
<span class="bg-menu"></span></li>

<ul class="sub-menu" style="display: none; visibility: hidden;">
<span class="bg-menu"></span></li>
</ul>

FINAL WORDS

now you ca save your template,And cutomize it according to your need

No comments:

Post a Comment

Ads Inside Post