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