Open / close menu On click, using only javascript no jquery
This is my html file
<form id="form1" runat="server">
<div class ="mvbar">
<ul>
<li><a href ="m">Home</a></li>
<li><a href ="m">About</a></li>
<li class="pjlist" onclick="load"><a href ="m">Projects</a>
<div class="sub1">
<ul>
<div class="arrow1"></div>
<li><a href ="m">Projects1</a></li>
<li><a href ="m">Projects2</a></li>
<li><a href ="m">Projects3</a></li>
</ul>
</div>
</li>
<li class="svlist" onclick="load"><a href ="m">Services</a>
<div class="sub2">
<ul>
<div class="arrow2"></div>
<li><a href ="m">Services1</a></li>
<li><a href ="m">Services2</a></li>
<li><a href ="m">Services3</a></li>
<li><a href ="m">Services4</a></li>
<li><a href ="m">Services5</a></li>
</ul></div>
</li>
<li><a href ="m">Contact Us</a></li>
</ul>
</div>
</form>
and this is my css class
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top:30px;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.arrow2 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1 {
visibility:hidden;
}
.sub2 {
visibility:hidden;
}
I can do the same in css, but it requires adding a few exceptions to work in every browser, but javascript is something I haven't used before and it was suggested to me that it be fairly easy to do with this. So please someone tell me how to open / close submenu using only javascript.
Thanks in advance!
+3
source to share
2 answers
Try this, it will work on 'hover' event but not on 'click' but on full css.
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top: 100%;
width: 50%;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow2,
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1,
.sub2
{
visibility:hidden;
}
ul li:hover div
{
visibility: visible;
}
ul li:hover ul
{
visibility: visible;
}
0
source to share
Try the following:
<style>
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top: 100%;
width: 50%;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow2,
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1,
.sub2
{
visibility: hidden;
}
</style>
<form id="form1" runat="server">
<div class ="mvbar">
<ul>
<li><a href ="m">Home</a></li>
<li><a href ="#">About</a></li>
<li id="pjlist"><a href ="#">Projects</a>
<div class="sub1">
<ul>
<div class="arrow1"></div>
<li><a href ="m">Projects1</a></li>
<li><a href ="m">Projects2</a></li>
<li><a href ="m">Projects3</a></li>
</ul>
</div>
</li>
<li id="svlist" onclick="load"><a href ="m">Services</a>
<div class="sub2">
<ul>
<div class="arrow2"></div>
<li><a href ="m">Services1</a></li>
<li><a href ="m">Services2</a></li>
<li><a href ="m">Services3</a></li>
<li><a href ="m">Services4</a></li>
<li><a href ="m">Services5</a></li>
</ul></div>
</li>
<li><a href ="m">Contact Us</a></li>
</ul>
</div>
</form>
</body>
</html>
<script>
var myMenu = document.getElementById("pjlist");
var open = false;
myMenu.addEventListener("click", function()
{
if(open)
{
//then close
open = !open;
var mySubMenu = myMenu.getElementsByTagName('div');
mySubMenu[0].style.visibility = 'hidden';
}
else
{
//open
open = !open;
var mySubMenu = myMenu.getElementsByTagName('div');
mySubMenu[0].style.visibility = 'visible';
}
});
</script>
you can use
var myMenus = document.getElementsByClassName()
to add a list of events for all children of your menu.
Luck
0
source to share