Make navigation bar's dropdown stay
Question
I've looked around SO and Google, but I haven't found an answer for my question (though I do feel this might be a very commonly asked one, still no luck anyway). All those I found were on jQuery, but I don't want to start jQuery without grasping adequate knowledge of the main JS.
Basically, I have a simple website, and I'm now trying to make the frame of the navigation bar. The navigation bar will dropdown to display other options. My only question is how to make the dropdown STAY when I move out of the main element, that triggers the dropdown, and into the dropdown information.
I noticed it's easier and neater to use CSS's :hover instead of JS, but I prefer to use JS as I'm still starting to learn a little bit of JS, so it's just to gain more knowledge.
Please ignore all the colors and weird formatting in my code, it's just a frame for now that lets me see things better.
PS: SORRY I HAVEN'T OPTIMISED THE TEXT AND VISUALS FOR RESIZED VIEWING AND IFRAMES. SORRY!
Thanks in advance! :)
document.getElementById("server").onmouseover = function() {serverMouseOver()}; document.getElementById("server").onmouseout = function() {serverMouseOut()}; function serverMouseOver() { document.getElementById("serverdropdownbox").style.display = "block"; } function serverMouseOut() { document.getElementById("serverdropdownbox").style.display = "none"; }
.clearfix { clear: both; } body { background-color: rgb(21,14,43); background-image: url("../images/backgroundimage.jpg"); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; min-height: 100%; background-position: center center; overflow: hidden; } #gigalogomainbox { float: left; width: 30vw; height: 10vw; overflow: hidden; transform: skewX(20deg); margin: 0 0 0 -4vw; background-color: white; } #gigalogobox { margin: 0 3vw 0 2vw; padding: 0 0 0 2vw; width: 100%; height: 8vw; } #gigalogo { width: 80%; margin: 3vw 2vw 0 0; height: 7vw; } #steamlogomainbox { width: 15vw; height: 10vw; float: right; margin: 0 -4vw 0 0; background-color: white; /*000c21*/ transform: skewX(-20deg); overflow: hidden; } #steamlogobox { margin: 0 -2vw 0 3vw; padding: 0; width: 100%; height: 20%; } #steamlogo { padding: 0 0 0 2vw; margin: 3vw 0vw 0 0; transform: skewX(20deg); height: 7vw; } #placeholderbartop { float: left; width: 60%; margin: 0; padding: 0; height: 10vw; } #navbarbox { clear: both; display: block; width: 100%; height: 5vw; padding: 2vw 0 0 0; margin: auto; } #navbar, #navbar ul { width: 100vw; height: 5vw; background-color: green; margin: auto; } #navbar li { color: white; list-style: none; display: inline-block; padding: 1vw 3vw 0 3vw; color: red; font-size:35px; } #serverdropdownbox { display: none; color: white; background-color: darkblue; } #serverdropdowncontent { list-style-type: none; width: 15vw; margin: 0 0 0 15vw; transform: skewX(15deg); } #serverdropdowncontent li { border: 1px solid white; font-size: 25px; text-align: center; padding: 1vw 0 1vw 0; } .menugradient { backround: darkblue; } #server { background-color: blue; } #server:hover #serverdropdownbox { display: block; } #gigalogomainbox:hover { background-color: red }
<!DOCTYPE html> <html> <head> <link href="css/mainframe.css" type="text/css" rel=stylesheet> <script src="scripts/jquery.js"></script> </head> <body> <!--Giga logo, top left--> <div id="gigalogomainbox" class="clearfix"> <div id="gigalogobox"> <img id="gigalogo" src="images/gigalogo.png"> </div> </div> <!--Steam logo, top right--> <div id="steamlogomainbox"> <div id="steamlogobox"> <img id="steamlogo" src="images/steamlogo.png"> </div> </div> <!--navigation barrrrrr--> <div id="navbarbox"> <ul id="navbar"> <li>Home</li> <li id="server">Servers</li> <li>Community</li> <li>Store</li> <li>Download</li> <li>Contact</li> </ul> <div id="serverdropdownbox"> <ul id="serverdropdowncontent"> <a href="serverlist.html"><li>Server List</li></a> <li>GigaDB</li> <li>CS:GO</li> </ul> </div> </div> <script src="scripts/frame.js"></script> </body> </html>
1 answers
solution1
1 ACCPTED 2017-03-19 15:20:05
So, to fix this, it would be easy to fix this in jQuery. But the way to fix it in pure JS is to create multiple ids for the "Servers" content (li's,a tags). Then do the same thing you did with the "Servers" li in JS but with those id's that you created for the "Servers" content. Also, you should do that on id serverdropdowncontent.
Best of Luck, Ben AKA BlackSky
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.