kveerendrareddy Posted August 22, 2007 Share Posted August 22, 2007 can any one help me in creating HTML menubar using HTML without using any tools(used for creation of menubar e.g. DreamWeaver, MenuBar creator etc). Link to comment Share on other sites More sharing options...
vijay Posted August 22, 2007 Share Posted August 22, 2007 hi.. for that you have to go through html and some basic javascript.. via this you can easily make simple menu.. see the sample code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Menu2</title><style type="text/css">body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; }td { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; padding:2px; }th { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight:bold;}#coolmenu{border: 1px solid #000000;border-collapse:collapse; text-align:center;font-weight:bold; color:#000000;background-color: #CCCCCC;}#submenu{border: 1px solid #; border-collapse:collapse;width: 180px;padding-left:25px;background-color: #EFEFEF;}#coolmenu a{font: bold 13px Verdana;padding: 2px;padding-left: 4px;display: block;width: 100%;color: black;text-decoration: none;}#submenu a{font: bold 13px Verdana;padding: 2px;padding-left: 4px;display: block;width: 100%;color: black;text-decoration: none;}html>body #coolmenu a{ /*Non IE rule*/width: auto;}#submenu a:hover{background-color: black;color: white;}#coolmenu a:hover{background-color: black;color: white;}.blackborder{ border-collapse:collapse; border: 1px solid #000000;}</style><script language="javascript" type="text/javascript">function openMenu(id,val){ document.getElementById('menu1').style.display='none'; document.getElementById('menu2').style.display='none'; document.getElementById('menu3').style.display='none'; document.getElementById('menu4').style.display='none'; menuObj=document.getElementById(id); menust=menuObj.style.display; if(val == '1') { menuObj.style.display=''; } else if (val == '0') { menuObj.style.display='none'; }}</script></head><body><table border="1" align="left" cellpadding="0" cellspacing="0" id="coolmenu"> <tr> <td width="180px" height="22px" align="center" valign="middle" class="blackborder" onclick="openMenu('menu1','1')" onmouseover="openMenu('menu1','1')"> Menu1 </td> <td width="180px" height="22px" align="center" valign="middle" class="blackborder" onclick="openMenu('menu2','1')" onmouseover="openMenu('menu2','1')"> Menu2 </td> <td width="180px" height="22px" align="center" valign="middle" class="blackborder" onclick="openMenu('menu3','1')" onmouseover="openMenu('menu3','1')"> Menu3 </td> <td width="180px" height="22px" align="center" valign="middle" class="blackborder" onclick="openMenu('menu4','1')" onmouseover="openMenu('menu4','1')"> Menu4 </td> </tr> </table> <div id="menu1" style="display:none;padding-top:2px;position:absolute;top:40px;left:10px;" onmouseout="openMenu('menu1','0')" onmouseover="openMenu('menu1','1')" > <table align="left" width="100%" cellspacing="0" border="1" id="submenu" class="blackborder"> <tr><td class="blackborder"><a href="#">Menu1 - Sub Menu1</a></td></tr> <tr><td class="blackborder"><a href="#">Menu1 - Sub Menu2</a></td></tr> <tr><td class="blackborder"><a href="#">Menu1 - Sub Menu3</a></td></tr> <tr><td class="blackborder"><a href="#">Menu1 - Sub Menu4</a></td></tr> <tr><td class="blackborder"><a href="#">Menu1 - Sub Menu5</a></td></tr> </table></div><div id="menu2" style="display:none;padding-top:2px;position:absolute;top:40px;left:195px;" onmouseout="openMenu('menu2','0')" onmouseover="openMenu('menu2','1')"> <table align="left" width="100%" cellspacing="0" border="1" id="submenu" class="blackborder"> <tr><td class="blackborder"><a href="#">Menu2 - Sub Menu1</a></td></tr> <tr><td class="blackborder"><a href="#">Menu2 - Sub Menu2</a></td></tr> <tr><td class="blackborder"><a href="#">Menu2 - Sub Menu3</a></td></tr> <tr><td class="blackborder"><a href="#">Menu2 - Sub Menu4</a></td></tr> <tr><td class="blackborder"><a href="#">Menu2 - Sub Menu5</a></td></tr> </table> </div><div id="menu3" style="display:none;padding-top:2px;position:absolute;top:40px;left:380px;" onmouseout="openMenu('menu3','0')" onmouseover="openMenu('menu3','1')"> <table align="left" width="100%" cellspacing="0" border="1" class="blackborder" id="submenu"> <tr><td class="blackborder"><a href="#">Menu3 - Sub Menu1</a></td></tr> <tr><td class="blackborder"><a href="#">Menu3 - Sub menu3</a></td></tr> <tr><td class="blackborder"><a href="#">Menu3 - Sub Menu3</a></td></tr> <tr><td class="blackborder"><a href="#">Menu3 - Sub Menu4</a></td></tr> <tr><td class="blackborder"><a href="#">Menu3 - Sub Menu5</a></td></tr> </table> </div> <div id="menu4" style="display:none;padding-top:5px;position:absolute;top:37px;left:565px;" onmouseout="openMenu('menu4','0')" onmouseover="openMenu('menu4','1')"> <table align="left" width="100%" cellspacing="0" border="1" class="blackborder" id="submenu"> <tr><td class="blackborder"><a href="#">Menu4 - Sub Menu1</a></td></tr> <tr><td class="blackborder"><a href="#">Menu4 - Sub menu4</a></td></tr> <tr><td class="blackborder"><a href="#">Menu4 - Sub menu4</a></td></tr> <tr><td class="blackborder"><a href="#">Menu4 - Sub Menu4</a></td></tr> <tr><td class="blackborder"><a href="#">Menu4 - Sub Menu5</a></td></tr> </table> </div> </body></html> Regards,Vijay Link to comment Share on other sites More sharing options...
kveerendrareddy Posted August 23, 2007 Author Share Posted August 23, 2007 Thanq boss.U helped me a lot.bye hi.. for that you have to go through html and some basic javascript.. via this you can easily make simple menu.. see the sample code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Menu2</title><style type="text/css">body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; }td { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; padding:2px; }th { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight:bold;}#coolmenu{border: 1px solid #000000;border-collapse:collapse; text-align:center;font-weight:bold; color:#000000;background-color: #CCCCCC;}#submenu{border: 1px solid #; border-collapse:collapse;width: 180px;padding-left:25px;background-color: #EFEFEF;}#coolmenu a{font: bold 13px Verdana;padding: 2px;padding-left: 4px;display: block;width: 100%;color: black;text-decoration: none;}#submenu a{font: bold 13px Verdana;padding: 2px;padding-left: 4px;display: block;width: 100%;color: black;text-decoration: none;}html>body #coolmenu a{ /*Non IE rule*/width: auto;}#submenu a:hover{background-color: black;color: white;}#coolmenu a:hover{background-color: black;color: white;}.blackborder{ border-collapse:collapse; border: 1px solid #000000;}</style><script language="javascript" type="text/javascript">function openMenu(id,val){ document.getElementById('menu1').style.display='none'; document.getElementById('menu2').style.display='none'; document.getElementById('menu3').style.display='none'; document.getElementById('menu4').style.display='none'; menuObj=document.getElementById(id); menust=menuObj.style.display; if(val == '1') { menuObj.style.display=''; } else if (val == '0') { menuObj.style.display='none'; }}</script></head><body><table border="1" align="left" cellpadding="0" cellspacing="0" id="coolmenu"> <tr> <td width="180px" height="22px" align="center" valign="middle" class="blackborder" onclick="openMenu('menu1','1')" onmouseover="openMenu('menu1','1')"> Menu1 </td> <td width="180px" height="22px" align="center" valign="middle" class="blackborder" onclick="openMenu('menu2','1')" onmouseover="openMenu('menu2','1')"> Menu2 </td> <td width="180px" height="22px" align="center" valign="middle" class="blackborder" onclick="openMenu('menu3','1')" onmouseover="openMenu('menu3','1')"> Menu3 </td> <td width="180px" height="22px" align="center" valign="middle" class="blackborder" onclick="openMenu('menu4','1')" onmouseover="openMenu('menu4','1')"> Menu4 </td> </tr> </table> <div id="menu1" style="display:none;padding-top:2px;position:absolute;top:40px;left:10px;" onmouseout="openMenu('menu1','0')" onmouseover="openMenu('menu1','1')" > <table align="left" width="100%" cellspacing="0" border="1" id="submenu" class="blackborder"> <tr><td class="blackborder"><a href="#">Menu1 - Sub Menu1</a></td></tr> <tr><td class="blackborder"><a href="#">Menu1 - Sub Menu2</a></td></tr> <tr><td class="blackborder"><a href="#">Menu1 - Sub Menu3</a></td></tr> <tr><td class="blackborder"><a href="#">Menu1 - Sub Menu4</a></td></tr> <tr><td class="blackborder"><a href="#">Menu1 - Sub Menu5</a></td></tr> </table></div><div id="menu2" style="display:none;padding-top:2px;position:absolute;top:40px;left:195px;" onmouseout="openMenu('menu2','0')" onmouseover="openMenu('menu2','1')"> <table align="left" width="100%" cellspacing="0" border="1" id="submenu" class="blackborder"> <tr><td class="blackborder"><a href="#">Menu2 - Sub Menu1</a></td></tr> <tr><td class="blackborder"><a href="#">Menu2 - Sub Menu2</a></td></tr> <tr><td class="blackborder"><a href="#">Menu2 - Sub Menu3</a></td></tr> <tr><td class="blackborder"><a href="#">Menu2 - Sub Menu4</a></td></tr> <tr><td class="blackborder"><a href="#">Menu2 - Sub Menu5</a></td></tr> </table> </div><div id="menu3" style="display:none;padding-top:2px;position:absolute;top:40px;left:380px;" onmouseout="openMenu('menu3','0')" onmouseover="openMenu('menu3','1')"> <table align="left" width="100%" cellspacing="0" border="1" class="blackborder" id="submenu"> <tr><td class="blackborder"><a href="#">Menu3 - Sub Menu1</a></td></tr> <tr><td class="blackborder"><a href="#">Menu3 - Sub menu3</a></td></tr> <tr><td class="blackborder"><a href="#">Menu3 - Sub Menu3</a></td></tr> <tr><td class="blackborder"><a href="#">Menu3 - Sub Menu4</a></td></tr> <tr><td class="blackborder"><a href="#">Menu3 - Sub Menu5</a></td></tr> </table> </div> <div id="menu4" style="display:none;padding-top:5px;position:absolute;top:37px;left:565px;" onmouseout="openMenu('menu4','0')" onmouseover="openMenu('menu4','1')"> <table align="left" width="100%" cellspacing="0" border="1" class="blackborder" id="submenu"> <tr><td class="blackborder"><a href="#">Menu4 - Sub Menu1</a></td></tr> <tr><td class="blackborder"><a href="#">Menu4 - Sub menu4</a></td></tr> <tr><td class="blackborder"><a href="#">Menu4 - Sub menu4</a></td></tr> <tr><td class="blackborder"><a href="#">Menu4 - Sub Menu4</a></td></tr> <tr><td class="blackborder"><a href="#">Menu4 - Sub Menu5</a></td></tr> </table> </div> </body></html> Regards,Vijay Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.