I have it where on outside click the sub-menu will be set to display: none but the sub-menu fails to reappear when hovering over the parent menu after it is hidden the first time. Is there a way to keep the JavaScript from setting the display to a permanent none state for the sub-menu? I have attempted to a JavaScript function to use the CSS selector for the :hover which opens the menu but it didn't work. Help?
Full HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mobile.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="search.css">
<link rel="stylesheet" type="text/css" href="featured_articles.css">
<link rel="stylesheet" type="text/css" href="featured_news.css">
<link rel="webpages" type="text/http" href="html/">
<link rel="icon" type="image/png" href="images/favicon.png">
<title>Webster Running</title>
<nav id="main_nav">
<a id="logo" href="http://ift.tt/1PnfNjk"><img src="images/logo.png" /></a>
<div id="menu">
<ul>
<li>
<a href="#">articles</a>
<div class="submenu">
<ul>
<li><a href="#">diet</a><div class="featured_articles" id="featured_diet"></div></li>
<li><a href="#">history</a><div class="featured_articles" id="featured_history"></div></li>
<li><a href="#">injuries</a><div class="featured_articles" id="featured_injuries"></div></li>
<li><a href="#">philosophies</a><div class="featured_articles" id="featured_philosophies"></div></li>
<li><a href="#">physiology</a><div class="featured_articles" id="featured_physiology"></div></li>
<li><a href="#">records</a><div class="featured_articles" id="featured_records"></div></li>
<li><a href="#">schedules</a><div class="featured_articles" id="featured_schedules"></div></li>
<li><a href="#">training</a><div class="featured_articles" id="featured_training"></div></li>
</ul>
</div>
</li>
<li>
<a href="#">running news</a>
<div class="submenu">
<ul>
<li><a href="#">youth</a><div class="featured_news" id="featured_youth"></div></li>
<li><a href="#">high school</a><div class="featured_news" id="featured_highschool"></div></li>
<li><a href="#">collegiate</a><div class="featured_news" id="featured_collegiate"></div></li>
<li><a href="#">professional</a><div class="featured_news" id="featured_professional"></div></li>
<li><a href="#">masters</a><div class="featured_news" id="featured_masters"></div></li>
<li><a href="#">ultra</a><div class="featured_news" id="featured_ultra"></div></li>
<li><a href="#">trail</a><div class="featured_news" id="featured_trail"></div></li>
</ul>
</div>
</li>
<li><a href="#">coaching</a></li>
<li>
<a href="#">about</a>
<div class="submenu">
<ul>
<li><a href="#">me</a></li>
<li><a href="#">training logs</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</li>
</ul>
</div>
<p id="p1">[webster running]</p>
<script>
document.onclick = closeMenu;
function parentIsSubmenu(child) {
var node = child.parentNode;
while (node != null) {
if ((node.className || '').indexOf('submenu') > -1) {
return true;
}
node = node.parentNode;
}
return false;
}
function closeMenu(event) {
if(!parentIsSubmenu(event.target)) {
var submenus = document.getElementsByClassName("submenu");
for(var i = 0; i < submenus.length; i++) {
submenus[i].style.display = 'none';
}
}
}
document.querySelector('#main_nav ul li:hover > .submenu ul').onclick = function(){
var submenus = document.getElementsByClassName("submenu");
for(var i = 0; i < submenus.length; i++) {
submenus[i].style.display = 'block';
}
};
</script>
</nav>
</head>
<body>
<div id="search">
<script>
(function() {
var cx = '005801732664854206753:wfzklpxxjoa';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</div>
</body>
Main CSS:
#main_nav {}
#logo {
float: left
}
#main_nav ul {
display: inline-block;
position: absolute;
list-style: none;
width: 220px
}
#main_nav ul a {
display: block;
padding-left: 18px;
padding-right: 10px;
color: black;
text-decoration: none;
font-size: 26px;
line-height: 36px;
font-family: Helvetica
}
#main_nav ul li {
position: relative;
border-left: solid red .5px
}
#main_nav ul li:hover > a {
background: black;
color: white;
border-radius: 7px;
margin-left: 15%
}
#main_nav ul li:hover > .submenu ul {
display: block
}
#main_nav ul ul {
display: none;
position: absolute;
left: 83%;
top: 0px;
width: 65%;
margin-left: 6%;
background: none
}
#main_nav ul ul a {
line-height: 100%;
font-size: 18px;
padding: 8px
}
#p1 {
position: absolute;
left: 28px;
top: 165px;
font-family: Helvetica;
font-size: 18px
}
Aucun commentaire:
Enregistrer un commentaire