logo Send us mail:
contact@reliancewisdom.com
WhatsApp or call:
+234 (0)808 881 1560
TOGGLE NAVIGATION
Back to All Forum Posts
How to Create Vertical Relative Drop-Down Menus on click with HTML, CSS and Javascript
Ishola Ayinla    May 19, 2017 at 09:56 AM    1    522
Please how can I create vertical relative drop-down menus with HTML, CSS and Javascript, such that when a user clicks on a menu, the sub links will be displayed underneath it vertically without overlaying the other menus?
Back to All Forum Posts

1 Answer
Ishola Wasiu says...
May 19, 2017 at 10:52 AM

Create a new file with the name "relative_menu1.htm" then copy and paste the following code snippet in it:

<html>
<head>
<style>
<!--
table.tutor{font-size:14px;font-weight:bold;}
table.tutor div{margin:0px; padding:5px; width:150px;border-top:#000000 1px solid;border-bottom:#000000 1px solid;border-left:#000000 1px solid;border-right:#000000 1px solid; background:#0066FF; color:#000000; cursor:pointer;}
table.tutor a{color:#FFFFFF;text-decoration:none;font:bold; display:block; clear:both; width:150px;border-top:#000000 1px solid;border-bottom:#000000 1px solid;border-left:#000000 1px solid;border-right:#000000 1px solid;padding:5px;background:#00CCFF;}
table.tutor a:hover{background:#FF66FF}
table.tutor td.nav{cursor:pointer; padding:0px; width:150px}
table.tutor td.menu{background:#00CCFF; padding:0px;}
table.tutor table.menu
{
font-size:14px;
position:relative;
display:none;
width:145px;
margin:0px;
}
-->
</style>
<script type="text/javascript">
<!--
function toggleMenu(what,elmnt)
{
if(document.getElementById(elmnt).style.
display!="block")
{
document.getElementById(elmnt).style.
display="block";
what.style.color="#FFFFFF";
what.style.background="#0000CC";
}
else
{
document.getElementById(elmnt).style.
display="none";
what.style.color="#000000";
what.style.background="#0066FF";
}
}
//-->
</script>
</head>
<body>
<table class="tutor">
<tr>
<td class="nav">
<div onclick="toggleMenu(this,'tutorials')">
Tutorials</div>
<table class="menu" id="tutorials">
<tr><td><a href="#">HTML</a>
<a href="#">XHTML</a>
<a href="#">CSS</a>
<a href="#">XML</a>
<a href="#">XSL</a></td></tr>
</table>
</td></tr>
<tr>
<td class="nav">
<div onclick="toggleMenu(this,'scripting')">
Scripting</div>
<table class="menu" id="scripting">
<tr><td><a href="#">JavaScript</a>
<a href="#">VBScript</a>
<a href="#">DHTML</a>
<a href="#">ASP</a>
<a href="#">ADO</a></td></tr>
</table>
</td></tr>
<tr>
<td class="nav">
<div onclick="toggleMenu(this,'validation')">
Validation</div>
<table class="menu" id="validation">
<tr><td><a href="#">Validate HTML</a>
<a href="#">Validate XHTML</a>
<a href="#">Validate CSS</a>
<a href="#">Validate XML</a>
<a href="#">Validate WML</a></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Full Details