logo Send us mail:
contact@reliancewisdom.com
WhatsApp or call:
+234 (0)808 881 1560
TOGGLE NAVIGATION
Back to All Forum Posts
Creating Vertical Relative Drop-Down Menus on click with HTML, CSS and JQuery
Ishola Ayinla    May 19, 2017 at 10:06 AM    1    1189
Please I need a code snippet for creating Vertical Relative Drop-Down Menus on click using HTML, CSS and JQuery.
Back to All Forum Posts

1 Answer
Ishola Wasiu says...
May 25, 2017 at 07:16 AM
Create a new file with the name "relative_menu2.htm" then copy and paste the following codes in it: <html>
<head>
<style>
<!--
#tutor_group{font-weight:bold; 
font-size:14px;left:0px; 
margin-top:0px;
width:150px;}
#tutor_group ul{position:relative;
width:150px; padding-left:0px; 
margin-left:0px; margin-top:1px;}
#tutor_group ul li{display:inherit;
cursor:pointer;width:150px; padding-left:0px;
margin-left:0px; text-indent:5px; 
margin-top:2px; margin-bottom:1px;
background:#0000FF 
url(../../images/tutor_image/nav_down.jpg) no-repeat;
color:#FFFFFF; line-height:29px;} 
#tutor_group ul li span{width:149px; 
padding-left:0px; margin-left:0px; 
clear:both}
#tutor_group ul li.up{background:
url(../../images/tutor_image/nav_up.jpg)
no-repeat #000099;}
#tutor_group ul li a{clear:both; 
display:block; width:149px; background:#0099FF;
color:#000000; border-top:solid #FFFFAA 1px;
border-bottom:solid #FFFFAA 0px; 
text-decoration:none}
#tutor_group ul li a:hover{ background:#999999;
color:#FFFFFF}
-->
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> (Note: You can also down load this JQuery plugin and reference it locally)
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#tutor_group ul li").click(function(){ 
$(this).parents("ul").parents("div").
children("ul").children("li.up").not(this).
removeClass("up"); 
$(this).parents("ul").parents("div").
children("ul").children("li").not(this).
children("span").slideUp();
$(this).toggleClass("up");
$(this).children("span").slideToggle();
});
});
//-->
</script>
</head>
<body>
<div align="left" id="tutor_group">
<ul align="left">
<li>TUTORIALS
<span style="display:none">
<a href="#">HTML</a>
<a href="#">XHTML</a>
<a href="#">CSS</a>
<a href="#">XML</a>
<a href="#">XSL</a> </span> </li>
<li>SCRIPTING
<span style="display:none">
<a href="#">JavaScript</a>
<a href="#">VBScript</a>
<a href="#">DHTML</a>
<a href="#">ASP</a>
<a href="#">ADO</a> </span> </li>
<li>VALIDATION
<span style="display:none">
<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> </span> </li>
</ul>
</div>
</body>
</html>

Note again: You must embed jQuery plugin before this code can work perfectly. You can search for the new version from their website: jquery.com .


Full Details
Add a friend to chat
Hi ! You have not added any friend to chat with. Kindly click on the link below to add a friend. Add a friend