How to Make Menu and Sub-menu Tab

5:05 AM | Labels: Tutorial, Widget/HTML/JavaScript

How to make menu and sub menu tab without jQuery? If you are interested in making menu and sub menu tab just like menu bar of this blog, or see demo, just do these following steps:

Go to your dashboard => Template => choose Edit HTML => select proceed => check expand widget templates (above right side);

Find this below inside the box code (if you face difficulty in finding it just press F3 if your browser is Chrome or Ctrl+F for Firefox, and copy paste one of below codes, press enter);

Copy and paste these below code right before the above code;

<style> /* -- Menu Horizontal + Sub Menu-- */ #cat-nav {background:#000;margin:0 15px;padding:0;height:35px;} #cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #fffff;} #cat-nav a:hover { color:#fff; } #cat-nav li:hover { background:#787876; } #cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:12px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;} #cat-nav .nav-description { display:block; } #cat-nav a:hover span { color:#fff; } #secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#000; } #secnav a { font-family:Trebuchet MS, "Trebuchet MS",Helvetica,Jamrul,sans-serif; font-style:normal; font-weight:700; font-size:17px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;} #secnav li { float:left; width: auto; height:35px;} #secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px} #secnav li ul li  { height:30px; border-top:1px solid #fff; } #secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:12px; font-style:normal; font-weight:400; color:#eee; } #secnav li ul ul  { margin: -30px 0 0 180px; } #secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; } #secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; } #secnav li:hover,#secnav li.hover  { position:static; } #cat-nav #secnav {width:100%;margin:0 auto;} </style> <br /> <div id="cat-nav"> <ul class="fl" id="secnav"> <li><a href="#YOUR LINK#">TITLE 1</a></li> <li><a href="#YOUR LINK#">TITLE 2</a> <ul id="sub-custom-nav"> <li><a href="#YOUR LINK#">SUB MENU TITLE 1</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 2</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 3</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 4</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 5</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 6</a> </li> </ul> </li> <li><a href="#YOUR LINK#">TITLE 3</a> <ul id="sub-custom-nav"> <li><a href="#YOUR LINK#">SUB MENU TITLE 1</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 2</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 3</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 4</a></li> </ul> </li> <li><a href="#YOUR LINK#">TITLE 4</a> <ul id="sub-custom-nav"> <li><a href="#YOUR LINK#">SUB MENU TITLE 1</a> </li> </ul> </li> <li><a href="#YOUR LINK#">TITLE 5</a></li> </ul> </div>

Note:
#cat-nav {background:#000;margin:0 1px;padding:0;height:35px;}	change the 000 with any kinds of color you desire for the background color.
#cat-nav li:hover { background:#787876; }	color when menu or sub menu is pointed
TITLE	change with title whatever you want
#YOUR LINK#	change with link whatever you want (page, posting, or label link, etc)