We Keep Coding

How to stop :hover and have onClick on navigation sub menu

I am trying to make a responsive navigation on my Wordpress site where I am building a template from scratch. I have decent experience with HTML and CSS(SCSS) some PHP but not so much Javascript or the Wordpress way.
I am looking to remove the :hover element on my sub menu under the 'services' li and instead have it trigger on click on tablet and mobile devices. I understand it will be similar to how I have done the mobile menu button but I am struggling to figure out the best way to do it.
Can anyone give me an idea please? Thanks in advance.
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
header {
height: 128px;
border-bottom: 1px solid #f0f0f0;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 4000;
background: white;
}
header .nav-container {
max-width: 100em;
margin: auto;
display: flex;
justify-content: space-between;
z-index: 45;
padding: 0 1.5rem;
}
header .nav-container .logo {
width: 14%;
padding-top: 2.8rem;
}
header .nav-container p {
display: none;
}
#media only screen and (max-width: 600px) {
header .nav-container p {
display: flex;
}
}
header .nav-container nav {
padding-top: 2rem;
}
#media only screen and (max-width: 600px) {
header .nav-container nav {
display: none;
}
}
#media only screen and (max-width: 600px) {
header .nav-container nav ul {
flex-direction: column;
display: flex;
}
}
header .nav-container nav ul li {
position: relative;
display: inline-block;
}
header .nav-container nav ul li a {
display: inline-block;
transition: all 0.5s linear;
text-decoration: none;
padding: 16px 10px;
color: #00458B;
}
header .nav-container nav ul li a:hover {
color: #00458B;
}
header .nav-container nav ul li ul {
display: none;
background: white;
position: absolute;
top: 100%;
width: 160px;
padding: 0;
z-index: 500;
}
header .nav-container nav ul li ul li, header .nav-container nav ul li ul a {
width: 100%;
}
header .nav-container nav ul li:hover ul {
display: block;
}
header .nav-container nav ul .menu-item-40 a {
padding: 0;
}
<header>
<div class="nav-container">
<p onclick="myFunction()"> Click</p>
<nav class="nav" role="navigation" id="myDIV">
<ul>
<li class="nav-item">Home
</li>
<li class="nav-item">About us
</li>
<li class="nav-item">Services
<ul class="sub-menu">
<li class="nav-item ">Windows
</li>
<li class="nav-item">Glass
</li>
<li class="nav-item">Doors
</li>
<li class="nav-item">Roofline
</li>
</ul>
</li>
<li class="nav-item">Our Work
</li>
<li class="nav-item">Contact Us
</li>
</ul>
</nav>
</div>
</header>

Wrap it with Media Query so it doesn't work on Mobile and tablet.
header .nav-container nav ul li:hover ul {
display: block;
}

This is only one of many possible solutions, but I think it gives you an idea off how to solve the problem.
First you have to wrap following selector with a media query to disable the hover when your mobile button shows up. In your case it would look like this:
#media only screen and (min-width: 601px) {
header .nav-container nav ul li:hover ul {
display: block;
}
}
To attach the toggle functionality I would suggest to add a js-submenu-toggle class to all a elements which have a submenu as sibling. I prefer to add a js prefix to my classes to mark them as classes that are only used in combination with javascript and have no styling attached to them:
<ul>
...
<li class="nav-item">
Services
<ul class="sub-menu">
...
</ul>
</li>
...
</ul>
For the actual functionality use the toggle function to add and remove an is-active class on click to the submenu element and the matchMedia function to make the toggle functionality only available when your mobile menu button is visible:
document.addEventListener('click', event => {
const element = event.target;
const mediaQuery = window.matchMedia('(max-width: 600px)');
if(element.matches('.js-submenu-toggle') && mediaQuery.matches) {
// Prevents the default behaviour of the `a`-tag with an `href`-attribute
event.preventDefault();
element.nextElementSibling.classList.toggle('is-active');
}
});
The is-active class should look like this:
.is-active {
display: block;
}

Highlight active menu and submenu using JavaScript

I have mostly got this work, however I have 2 issues:
The Home menu link always remains active
When I select a sub-menu item, the sub-menu item shows as active, however I also require the parent to remain active.
See the live site here - http://www.lync.geek.nz/
JavaScript:
<script type='text/javascript'>
//<![CDATA[
function setActive() {
aObj = document.getElementById('nav').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}
}
}
//]]>
</script>
HTML Menu:
<!-- start navmenu -->
<ul id='nav'>
<li><a href='/'>Home</a></li>
<li><a href='/p/tools.html'>Tools</a>
<ul>
<li><a href='/p/admin-tools.html'>Admin Tools</a></li>
<li><a href='/p/call-accounting.html'>Call Accounting/Reporting</a></li>
<li><a href='/p/lync-phone-edition-log-viewer.html'>Phone Edition Log Viewer</a></li>
<li><a href='/p/sonus-sbc-5kswe-log-viewer.html'>Sonus SBC 5k/SWe Log Viewer</a></li>
<li><a href='/p/customer-support-tool.html'>Customer Support Tool</a></li>
<li><a href='/p/powershell-scripts.html'>PowerShell Scripts</a></li>
<li><a href='/p/powershell-one-liners.html'>PowerShell One-Liners</a></li>
</ul>
</li>
<li><a href='/p/lync-updates.html'>Lync Updates</a>
<ul>
<li><a href='/p/lync-updates.html#Lync2013Server'>Lync 2013 Server</a></li>
<li><a href='/p/lync-updates.html#Lync2010Server'>Lync 2010 Server</a></li>
<li><a href='/p/lync-updates.html#Lync2013WinClient'>Lync 2013 Client</a></li>
<li><a href='/p/lync-updates.html#Lync2010WinClient'>Lync 2010 Client</a></li>
<li><a href='/p/lync-updates.html#LyncMacClient'>Lync for Mac</a></li>
<li><a href='/p/lync-updates.html#LyncStoreApp'>Lync Store App</a></li>
<li><a href='/p/lync-updates.html#LyncRoomSystem'>Lync Room System</a></li>
<li><a href='/p/lync-updates.html#LyncPhoneEdition'>Lync Phone Edition</a></li>
</ul>
</li>
<li><a href='#'>Training</a>
<ul>
<li><a href='/p/end-user-training.html'>End User</a></li>
<li><a href='/p/troubleshooting.html'>Troubleshooting</a></li>
<li><a href='/p/sip.html'>SIP</a></li>
</ul>
</li>
<li><a href='/p/deployment.html'>Deployment</a></li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/contact.html'>Contact</a></li>
</ul>
<!-- end navmenu -->
CSS:
/*DROPDOWN MENU MOD*/
/* ----- CSS Nav Menu Styling ----- */
#nav {
margin: 0px 0 0 0px;
padding: 0px 0px 0px 0px;
width: 1148px; /* Set your width to fit your blog */
/*font: $(tabs.font); Template Designer - Change Font Type, Size, Etc */
/*color: $(tabs.text.color); Template Designer - Change Font Size */
}
ul#nav li a.active {
position: relative;
z-index: 1;
background: #dd7700 none repeat scroll bottom;
color: #ffffff;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
box-shadow: 0 0 0 rgba(0, 0, 0, .15);
}
#nav ul {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}
#nav li {
float: left;
padding: 0px;
}
#nav li a {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
/*font: $(tabs.font); Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}
#nav > ul > li > a {
/*color: $(tabs.text.color); Template Designer - Change Font Color */
}
#nav ul ul a {
/*color: $(tabs.text.color); Template Designer - Change Color */
}
#nav li > a:hover, #nav ul li:hover {
*/color: $(tabs.selected.text.color); Template Designer - Change Font Color on Hover */
/*background-color: $(tabs.selected.background.color); Template Designer - Change Font Background on Hover */
text-decoration: none;
}
#nav li ul {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 300px; /* Change Width Of DropDown Menu */
z-index:9999;
}
#nav li:hover ul {
display: block;
}
#nav li li {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 300px; /* Change Width Of DropDown Menu */
}
#nav li:hover li a {
/*background: $(tabs.selected.background.color); Template Designer - Change Background of Link on Hover */
}
#nav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}
#nav li ul a:hover, #nav li ul li:hover > a {
/*color: $(tabs.selected.text.color); Template Designer - Change Text Color on Hover */
/*background-color: $(tabs.selected.background.color); Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
/*DROPDOWN MENU MOD*/
Heres an example of what happens:
Any guidance would be much appreciated.

You might want to rethink your link hierarchy/architecture and restructure your links with folders:
<li><a href='/p/tools/'>Tools</a>
<ul>
<li><a href='/p/tools/admin-tools'>
and have your pages be "index.html" files in those folders,
(I am assuming a dynamic page is outside your limitations for now)
and for the home page: simply call the index.html there (or what ever it is called) in the link

The reason your home link is always active is that "/" is ALWAYS going to appear in the url. I think you want to use document.location.pathname, and test for equality instead.
For the second problem, why not just walk up the parent tree until you are no longer in a link? Here is an example to fix both problems:
if (document.location.pathname == aObj[i].href) {
var link = aObj;
while (link.tagName === 'a') {
link.className = 'active';
link = link.parentElement;
}
}
Just be sure to remove the active class up the chain in your onmouseout event handler as well.

Thanks to everyone for their input. I managed to get this working, and have fully documented the process on my blog, where you can also see the result.
http://www.lync.geek.nz/2015/02/highlight-current-active-menu-using-jquery-or-javascript.html

How to display a div outside of multi-leveled menu when hovering on sub-level item

I have a menu comprised of HTML and CSS and I'm trying to get it so that once the user hovers over the sub level item within the menu, the div info1 will appear to the right of the menu. Ideally, I would like to do this with HTML and CSS if possible, but if there is a simpler fix with jQuery or JavaScript, that would work too. I would certainly appreciate the help.
Here's the HTML:
<body>
<div id="navigation">
<nav>
<ul class="top-level">
<li>Top-level Item
<ul class="sub-level">
<li>Sub-level Item</li>
<li>Sub-level Item</li>
<li>Sub-level Item</li>
</ul>
</li>
<li>Top-level Item
<ul class="sub-level">
<li>Sub-level Item
<li>Sub-level Item</li>
<li>Sub-level Item</li>
<li>Sub-level Item</li>
</ul>
</li>
</nav>
</div>
<div ID="info1">
<center><img src="image.jpg" border="0" height=170 width=250 ></center><br><center><table BORDER=4 CELLPADDING=6 ><tr><td><br>I want this div to display on the right side of the screen once the mouse has hovered over a sub-level menu item.<br><br></td></tr></table></center>
</div>
</body>
and here's the CSS:
#navigation
{
width: 200px;
font-size: 0.75em;
}
#navigation ul
{
margin: 0px;
padding: 0px;
}
#navigation li
{
list-style: none;
}
ul.top-level li
{
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}
#navigation a
{
color: #fff;
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#navigation li:hover
{
background: #f90;
position: relative;
}
ul.sub-level
{
display: none;
}
li:hover .sub-level
{
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 200px;
top: -1px;
}
ul.sub-level li
{
border: none;
float:left;
width:200px;
}
#info1
{
font-family: "Verdana,Arial,Helvetica";
size: -1;
display: none;
}
*/ I thought this might work*/
li:hover .top-level li:hover .sub-level + #info1
{
display: block;
}
The code can be viewed at http://jsfiddle.net/brisket27/C5Pn9/7/

You can not go back or traverse the dom up with CSS. "There are no parent selectors in CSS, not even in CSS3" via CSS-Tricks
You can solve your problem with some basic jquery:
Demo: jsFiddle
$('.top-level li .sub-level li').on('mouseover', function() {
// Position #info1 off to the side of the .sub-level
$('#info1').css({
'top': $(this).parent('.sub-level').position().top,
'left': $(this).parent('.sub-level').position().left + $(this).parent('.sub-level').outerWidth(),
});
$('#info1').show();
}).on('mouseleave', function() {
$('#info1').hide();
});
The current code puts #info1 next to the sub-level. If you want #info1 always on the absolute right side of the screen, remove the position code in the js and just apply right: 0; to #info1 in CSS.

Your approach was in a correct direction. I'll try to explain why this code did not work -
*/ I thought this might work*/
li:hover .top-level li:hover .sub-level + #info1 {
display: block;
}
This is Adjacent sibling combinator, applicable to only the 'Adjacent' siblings.
In your case, div #info1 is outside the nav logic.
Your CSS rule would work if the div you want to display was placed right after the ul li's
for ex.
1) In the following example Divs #one and #two are adjacent.
<div = "one">I</div>
<div = "two">II</div>
but the one mentioned below are not.
<div = "cover">
<div = "one">I</div>
</div>
<div = "two">II</div>
2) As mentioned, here
<ul class="sub-level">
<li>Sub-level Item
</li>
</ul>
<div id="test">HERE IS A DIV</div> <!-- This div is adjacent to ul -->
and a CSS rule, will WORK!
ul.sub-level:hover + #test { /* This works because #test and ul.sub-level are adjacent*/
display: none;
}
Said that, I guess it will be easier for you to go for option like jquery to implement your logic instead of CSS.
$(document).ready(function(){
$('ul.sub-level li').mouseenter(function(){
$('#info1').show();
});
$('ul.sub-level li').mouseleave(function(){
$('#info1').hide();
});
});

Use the following snippet using jquery for the hover effect:
$(".sub-level>li").mouseenter(function() {
$("#info1").show();
}).mouseleave(function() {
$("#info1").hide();
});
To display the block on right of the screen you can use either use:
#info1 {
position: absolute; right:0;
}
or
#info1 {
float:right;
}

Make an <li> element stretch wider than the containing <ul>

At the moment, I'm developing a layout for work, and I'm just a tiny bit stuck with a dynamic drop down menu. I'm using a child 'ul' within an 'li' element that will display the children of the navigation links - but the 'li' above (so the main one, that you hover on to view the children), stretches to the length of the 'ul', which is, of course, defined by the width of the 'li' elements inside that.
Also, I'm using jQuery to display the child items when the user hovers over the parent navigation item.
However, I need this not to happen! Here's a screenshot link: http://d.pr/v5Wk (I'm sorry - I'm not registered, so I can't post images! D: )
Basically, I need to get rid of the gap on the right of 'Section One', dynamically, without defining any preset widths.
Here's the HTML:
<div class="menu">
<ul class="navigation">
<li>
Section One
<ul class="children">
<li>
Child Item One
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</li>
<li>
Section Two
</li>
<li>
Section Three
</li>
<li>
Section Four
</li>
<li>
Section Five
</li>
<li>
Section Six
</li>
</ul>
</div>
And here's the CSS:
.menu { width: 100%; overflow: hidden; display: block; position: absolute; margin: 75px auto; background: #666 url('../image/stripe.png'); }
ul.navigation { list-style-type: none; width: 900px; margin: 0 auto; }
ul.navigation li a { color: #fff; text-decoration: none; display: block; padding: 10px; }
ul.navigation li a:hover { color: #fff; background: #444 url('../image/stripe_active.png');}
ul.navigation li { float: left; }
ul.navigation li ul.children { list-style-type: none; display: block; overflow: hidden; position: relative; z-index: 1; }
ul.navigation li ul.children li { color: #fff; float: left; font-size: 11px; white-space: nowrap; }
Any help on this would be great!
Many thanks,
Matt

ul.navigation li ul.children {
list-style-type: none;
display: block;
overflow: hidden;
position: absolute;
z-index: 1;
top: 2em;
left: auto;
right: auto;
}
If you still can't see them, add height: 5em to ul.navigation
Position:Absolute causes an element to be rendered at a specific spot on the page, taking it out of the normal flow. Since it is no longer being rendered inside the topnav li, it doesn't cause it's width to be too large.

Have you tried to position:absolute the children?

Does it need to be an ul/li solution? wouldn't it be easier to update the contents of the submenu with javascript when you hover over the top nav?

Fitting a <ul>'s width to accommodate the menu items

I have a menu that contains submenus. Its HTML source looks like this:
<ul id="menu">
<li>
Menu 1
<ul>
<li><a href="javascript:;">Item 1<a></li>
<li>
Subitem 1
<ul>
<li>Subsubitem 1</li>
</ul>
</li>
</ul>
</li>
</ul>
After applying some CSS and getting the JavaScript side of things in order with Superfish, the menu looks like this in the browser:
The second menu item is too big to fit into its space, so the remainder of the text is rendered onto the text of the next menu item. Is there a way to enlarge the <ul> to make sure that the text fits?
Update: here's the relevant CSS code:
ul#menu {
position: relative;
top: 160px;
left: 130px;
width: 700px;
}
ul#menu, ul#menu ul {
list-style-type: none;
}
ul#menu > li {
display: block;
float: left;
background: url(img/menuitem.png) top left;
width: 104px;
height: 37px;
margin-right: 5px;
text-align: center;
}
ul#menu > li:hover {
background-position: bottom left;
}
ul#menu > li > a {
height: 100%;
padding-top: 10px;
font-size: 80%;
font-weight: bold;
color: white;
}
ul#menu > li > a, ul#menu > li > ul a {
display: block;
text-decoration: none;
}
ul#menu > li ul {
min-width: 150px;
}
ul#menu > li > ul li {
color: black;
font-size: 10pt;
text-align: left;
padding-left: 5px;
padding-right: 5px;
height: 30px;
line-height: 30px;
background: url(img/menubg.png) repeat;
}
ul#menu > li > ul li:hover {
background-color: #9c938c;
}
ul#menu > li > ul a {
color: black;
}
ul#menu > li ul {
position: relative;
top: -10px;
}
ul#menu > li li.hoverItem > ul {
position: relative;
top: -30px;
}
ul#menu > li > a > span.sf-sub-indicator {
display: none;
}
ul#menu > li > ul > li a > span.sf-sub-indicator {
float: right;
margin-right: 5px;
}
span.sf-sub-indicator and li.hoverItem are used by Superfish. sf-sub-indicator is used to indicate that hovering over a menu item will cause a submenu to be opened like so:
<li>
Menu item with submenu<span class="sf-sub-indicator"> »</span>
<ul>
<!-- Etc -->
</ul>
</li>
li.hoverItem is applied to all menu items you passed to get to the menu where your mouse is positioned, plus the menu item your mouse is currently hovering on.

Ok, I put something together using the same css definitions that you posted above. This works for me - automatically detects the size of the largest element and adjusts the related CSS.
You'll need to adjust the li elements to have a predictable naming scheme, so that it can find the largest one. Depending on your font, you might need to adjust the *5 portion of the assignment for the newSize.
<html>
<head>
<title></title>
<meta content="">
<script type="text/javascript">
function changeSize() {
var html = document.getElementById("item"+1).innerHTML;
var newSize = html.length*5;
var num_menu_items = 3;
for (i=2; i<=num_menu_items; i++) {
var temp = document.getElementById("item"+i).innerHTML;
if (temp.length > newSize / 5)
newSize = temp.length*5;
}
var theRules = new Array();
var rule;
if (document.styleSheets[0].cssRules)
theRules = document.styleSheets[0].cssRules
else if (document.styleSheets[0].rules)
theRules = document.styleSheets[0].rules
for (i = 0; i<theRules.length; i++) {
if (theRules[i].selectorText.indexOf("ul#menu > li ul") > -1) {
rule = theRules[i];
}
}
rule.style.setProperty('min-width',newSize+"px",null);
}
</script>
</head>
<body onload='changeSize();'>
<ul id="menu">
<li>A-one</li>
<li>A-two</li>
<li>A-three
<ul>
<li id='item1'>B-one</li>
<li id='item2'>B-two-is-really-really-really-really-really-really-really-really-really-really-really-really long</li>
<li id='item3'>B-three</li>
</ul>
</li>
</ul>
</body>
</html>

This block here:
ul#menu > li ul {
min-width: 150px;
}
Is where the size for that item is. You will have to change that to something larger.
The reason it doesn't expand, is because its parent's width is small than that.