CODEWITHSUNDEEP
javascripthtmlcss
Mark
Mark

Reputation: 399

How do I get navigation bar's dropdown to stay when hovering over the dropdown?

I have a simple website with a simple navigation bar, but it seems like a very daunting task after much research.
When hovering over any of the buttons, it will display a dropdown to show more options.
I have got that working fine, but how would I go about making the dropdown stay when I hover over the contents of the dropdown?

Basically when the cursor leaves the navigation's bar button and onto the dropdown menu, it doesn't disappear.

I read that it's possible with jQuery, but I want to do it in JavaScript alone if it's possible, even if it's lengthy.

The navbar's hover itself works, but whatever I tried to keep the dropdown there when hovering on it, keeps bugging everything out.

This is the code I have, and that I have tried:

document.getElementById("server").onmouseover = function() {
	serverMouseOver()
	};
document.getElementById("server").onmouseout = function() {
	serverMouseOut()
	};
function serverMouseOver() {
	document.getElementById("serverdropdownbox").className += "animated fadeIn";
	};
function serverMouseOut() {
	document.getElementById("serverdropdownbox").className += "animated fadeOut";
	};
document.getElementById("serverdropdownbox").onmouseover = function() {
	serverDropdownMouseOver()
	};
document.getElementById("serverdropdownbox").onmouseout = function() {
	serverDropdownMouseOut()
	};
function serverDropdownMouseOver() {
	document.getElementById("serverdropdownbox").style.opacity = "1";
	};
function serverDropdownMouseOut() {
	document.getElementById("serverdropdownbox").style.opacity = "0";
	};
			

#navbarbox			
			{
			clear: both;
			display: block;
			width: 100vw;
			height: 3.5vw;
			padding: 0vw 0 0 0;
			margin: 0;
			}
#navbar, #navbar ul
			{
			width: 100vw;
			height: 3.5vw;
			display: flex;
			padding: 0 0 0 0;
			margin: 0;
			}
			
#navbar span
			{
			height: 3.5vw;
			display: block;
			transform: skewX(15deg);
			}
			
#navbar li
			{
			color: white;
			list-style: none;
			display: inline-block;
			padding: 1vw 3.95vw 1vw 3.95vw;
			margin: auto;
			text-align: center;
			color: red;
			font-size: 2.3vw;
			font-family: Jura;
			height: 2.5vw;
			transform: skewX(-15deg);
			}
			
#serverdropdownbox
			{
			display: block;
			opacity: 0;
			float: left;
			color: white;
			background-color: darkblue;
			width: 0;
			}
			
#serverdropdowncontent
			{
			list-style-type: none;
			width: 16vw;
			margin: 1vw 0 0 10.1vw;
			}
			
			
#serverdropdowncontent li
			{
			border: 1px solid white;
			font-size: 25px;
			text-align: center;
			padding: 1vw 0 1vw 0;
			background-color: white;
			}
			
#server
			{
			background-color: blue;
			}
			
#communitydropdownbox
			{
			display: block;
			float: left;
			color: white;
			background-color: darkblue;
			width: 0;
			}
			
#communitydropdowncontent
			{
			list-style-type: none;
			width: 19.7vw;
			margin: 1vw 0 0 26vw;
			}
			
			
#communitydropdowncontent li
			{
			border: 1px solid white;
			font-size: 25px;
			text-align: center;
			padding: 1vw 0 1vw 0;
			}
			
#community
			{
			background-color: brown;
			}			
#storedropdownbox
			{
			display: block;
			float: left;
			color: white;
			background-color: darkblue;
			width: 0;
			}
			
#storedropdowncontent
			{
			list-style-type: none;
			width: 13.6vw;
			margin: 1vw 0 0 45.65vw;
			}
			
			
#storedropdowncontent li
			{
			border: 1px solid white;
			font-size: 25px;
			text-align: center;
			padding: 1vw 0 1vw 0;
			}
			
#store
			{
			background-color: blue;
			}			
#downloadsdropdownbox
			{
			display: block;
			float: left;
			color: white;
			background-color: darkblue;
			width: 0;
			}
			
#downloadsdropdowncontent
			{
			list-style-type: none;
			width: 19.8vw;
			margin: 1vw 0 0 59.2vw;
			}
			
			
#downloadsdropdowncontent li
			{
			border: 1px solid white;
			font-size: 25px;
			text-align: center;
			padding: 1vw 0 1vw 0;
			}
			
#downloads
			{
			background-color: brown;
			}			
#contactdropdownbox
			{
			display: block;
			float: left;
			color: white;
			background-color: darkblue;
			width: 0;
			}
			
#contactdropdowncontent
			{
			list-style-type: none;
			width: 16vw;
			margin: 1vw 0 0 78.9vw;
			}
			
			
#contactdropdowncontent li
			{
			border: 1px solid white;
			font-size: 25px;
			text-align: center;
			padding: 1vw 0 1vw 0;
			}
			
#contact
			{
			background-color: blue;
			}
			
.animated
			{
  			animation-duration: 1s;
  			animation-fill-mode: both;
			}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Jura" />
<body>


<!--Giga logo, top left-->
<img id="gigalogo"  src="images/gigalogo.png">

<!--Steam logo, top right-->
<div id="steamlogomainbox">
		<img id="steamlogo" src="images/steamlogo.png">
</div>

<!--navigation barrrrrr-->
<div id="navbarbox">
	<ul id="navbar">
		<a href="default.html"><li style="background-color: purple;"><span>Home</span></li></a>
		<a href="servers.html"><li id="server"><span>Servers</span></li></a>
		<a href="community.html"><li id="community"><span>Community</span></li></a>
		<a href="store.html"><li id="store"><span>Store</span></li></a>
		<a href="downloads.html"><li id="downloads"><span>Downloads</span></li></a>
		<a href="contact.html"><li id="contact"><span>Contact</span></li></a>
	</ul>
</div>

<div id="serverdropdownbox">
	<ul id="serverdropdowncontent">
		<a href="serverlist.html"><li id="serverdropdownli">Server List</li></a>
		<li id="serverdropdownli">GigaDB</li>
		<li id="serverdropdownli">CS:GO</li>
	</ul>
</div>

<div id="communitydropdownbox">
	<ul id="communitydropdowncontent">
		<a href="events.html"><li>Events</li></a>
		<li></li>
	</ul>
</div>

<div id="storedropdownbox">
	<ul id="storedropdowncontent">
		<li>Credits</li>
		<li>Items</li>
		<li>VIP</li>
	</ul>
</div>

<div id="downloadsdropdownbox">
	<ul id="downloadsdropdowncontent">
		<li>TF2</li>
		<li>CS:GO</li>
		<li>Minecraft</li>
	</ul>
</div>

<div id="contactdropdownbox">
	<ul id="contactdropdowncontent">
		<li>Contact Us</li>
		<li>Staff</li>
		<a href="https://steamcommunity.com/groups/gigagamings" target="_blank"><li>Steam Group</li></a>
		<li>Appeal Ban</li>
		<li>Links</li>
	</ul>
</div>

Upvotes: 0

Views: 43

Answers (1)

Justinas
Justinas

Reputation: 43451

First of all - your HTML structure is invalid. ul tag can have only li as direct child, not a. So ul > a > li must be replaced to ul > li > a.

Second - you don't need JS for such simple menu. Have ul > li > ul as sub-menu and use :hover on ul > li to show your sub-menu.

ul {
  padding: 0;
}

li {
  white-space: nowrap;
  list-style: none;
}

#menu > li {
  position: relative;
  display: inline-block;
}

#menu > li > ul {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 100%;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

#menu > li:hover > ul {
  opacity: 1;
}
<ul id="menu">
  <li><a href="home.html">Home</a></li>
  <li>
    <span>Servers</span>
    <ul>
      <li><a href="server1.html">Server 1</a></li>
      <li><a href="server2.html">Server 2</a></li>
      <li><a href="server3.html">Server 3</a></li>
    </ul>
  </li>
</ul>

Upvotes: 1

Related Questions