We Keep Coding

Temporarily disable particular css style from javascript

I have a particularly specific question that there are many articles online but they don't answer my question.
I have a menu bar on my website where some <li> elements appear when the user is logged in. That <li> element also has an onhover dropdown styled in css with the following:
ul li:hover > ul {
display: block;
}
So what happens is, when the <li> element of the main (which has a direct child of <ul>) is hovered upon, the dropdown will appear. Pretty straightforward.
My problem is, when I hide that particular <li> element with the dropdown attached to it (through the following code within a javascript if statement), the hover style remains.
So even though the parent <li> is set to display: none;, the child dropdown can be revealed by hovering over a tiny invisible rectangle (see picture) in the header.
TLDR: is there a way I can temporarily disable that particular :hover style preferrably through javascript or jQuery?
Thanks for the help in advance.
My HTML code for anyone wondering: (I have removed unncessary stuff so it is easier to see what I mean)
<ul>
<li>Foo</li>
<li id="dropdown">
<p class="drop" id="loggedInValue"></p>
<ul class="dropdown-content">
<li>My Account</li>
<li>Logout</li>
</ul>
</li>
</ul>

When you are setting li to display: none, you can add a class to li (class-name, for example) and add :not(class-name) to the css.
See below example for reference
ul li:not(.class-name):hover > ul {
display: block;
}
P.S: I am wondering how is that little rectangle even visible, when you have set it to display: none. There is definitely some part left out when setting display to none

You could add a logged-in css class to the root html element, and predicate the hover selector on the presence of that class.
const onLoginSuccess = () => {
document.documentElement.classList.add('logged-in');
}
.logged-in ul li:hover > ul {
display: block;
}

If there should be no drop down then you should run some code similar to this.
Please let me know if this helped.
Have a good one.
const dropdown = document.querySelector('#dropdown');
dropdown.classList.remove('dropdown-styles');

Maybe you can just completely delete the element from the DOM
const dropdown = document.querySelector('#dropdown');
dropdown.parentNode.removeChild(dropdown);

How to put menu after other instead of over each other

I have 3 menus in 3 different location on a website that they translate to one mobile toggle menu on phone.
My problem on mobile the 3 menus are showing up in the toggle panel but one over the other instead of one after the other. I define that this is a menu in my html using .main-nav
I tried appending .main-nav again but it doesn't work, I tried giving each menu a top margin in css it shows but along with its background.
live example - here how it is on codepen https://codepen.io/anon/pen/VOeKpE
I want all 3 menus in the website to show the links one after the other instead of over each other now.
if ($('.main-nav').length) {
var $mobile_nav = $('.main-nav').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="fa fa-bars"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('.mobile-nav-overly').toggle();
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="main-nav float-right d-none d-lg-block">
<ul>
<li>home</li>
<li>about</li>
</ul>
</nav>
how it looks now
now
desired result
result needed

You could either use
li { display: inline-block }
Or
li { float: left;}
in your css.
the <li> element is by default styled with the display: block property. meaning it behaves similarly to an element like <p> or <div>, taking up the whole width of the content.
Changing this display property to inline-block ensures you still have the same functionalities you would also have with display: block but the elements will from now on only take up as much space as they need.

Dropdown onclick without js, php or target

I want to make onclick dropdown menu without JavaScript, also PHP can't be used. I was using targets, but page jumps every time I click on it, because it is not on the top of page.
Is it possible to make dropdown menu without JS and PHP, but onclick?

What you are after is actually possible, though I would not advise you to actually use this technique. It is nothing less then a hack, semanticly very incorrect, and probably a nightmare for SEO.
This taken into account, I will explain the technique as a proof of concept:
First make sure you organise your html like this:
<nav>
<ul>
<li>
<label for='item-1'>main item 1</label>
<input type="checkbox" id="item-1"/>
<ul>
<li>sub 1</li>
...
</ul>
</li>
...
</ul>
</nav>
Some smart use of the :checked selector and the sibling + selector now allows you to simulate a dropdown on click. The relevant css would look like this:
/* we hide the checkboxes, they are just there to store the 'state' in the background */
/* their state will be triggered by clicking the corresponding label */
nav input[type="checkbox"] {
display: none;
}
/* we hide the sub menu's by default */
nav > ul > li > ul {
display: none;
}
/* we show the sub menu, if it follows a checked checkbox */
nav input[type="checkbox"]:checked + ul {
display: block;
}
For a working example, check the fiddle i set up: http://jsfiddle.net/Xj8Ce/

If you want "onclick" event, you need JavaScript.
With hover you can try this: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
Hope it helps!

Creating a Drop-Down Menu with Javascript

Question about logics here:
What's the most elegant way to make the menu appear/disappear onmouseover/onmouseout?
See the following JsBin:
http://jsbin.com/owayeb/edit#source
The Menu is hidden by default.
If the user moves his cursor above the Link the showme() function gets called.
When the user moves his cursor away the hideme() functions gets called.
How would I get the Menu to persist while the user moves his mouse away from the Link to above the Menu?
Or is this all the wrong school of thought?

Assuming this is for cascading navigation or something similar, I would do something like...
<style type="text/css">
ul#nav li {
position: relative;
height: 20px;
}
ul#nav li ul {
display: none;
position: absolute;
top: 20px;
}
ul#nav li.selected ul { display: block; }
</style>
<ul id="nav">
<li>
Link
<ul>
<li>Hi There!</li>
<li>Secone Nav Item</li>
...
</ul>
</li>
</ul>
Within the onmouseover state of your list items, you would add the .selected class to #nav thus causing all child UL's to be displayed. Because the child UL elements are within ul#nav, your hover state will still be active while you're rolling over the children.
You'll obviously need to tweak the CSS to match the desired look you want, but that's the general idea. If you were using prototype js for example, your javascript would look something like...
$$('#nav li').each(function(x) {
x.onmouseover = function() { $(this).addClassName('selected'); }
x.onmouseout = function() { $(this).removeClassName('selected'); }
});

you could add the same onmouseover listener to the drop div, so that it stays open:
<div id="drop" class="dropdown" onmouseover="showme('drop')" onmouseout="hideme('drop')">
Hi there!
</div>

Best and most simple way I've done it is use the :hover selector to keep the submenu displayed.
Here's how I would go about it:
1. define a menu structure
<ul id='menu'>
<li>Menu Item</li>
<ul id='submenu'>
<li>Sub menu item 1</li>
<li>Sub menu item 2</li>
</ul>
</ul>
Hide submenu in css and define submenu:hover to leave display: block
Attach to the menu item, the onmouseover to display the submenu (you might just toggle a class or something and toggle again about 5 secs later.)
Hopefully that works for you. The idea here is that you are hovering over the menu item to display the submenu, then the hover selector will keep the menu displayed, finally when the user hovers out the hover selector stops.
Can't remember exactly how I did it before because this was an on the fly thing, but the idea is there.

Not sure if this is what you're looking for or not, but check it out!
http://jsfiddle.net/5NmTB/
Let me know if you have questions

I use the superfish jQuery plugin to build Javascript drop-down menus. Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds some useful enhancements.

Hide a css-made dropdown menu

I have created a dropdown menu with css. Here is the HTML code:
<li class="menu" id="menu">
<div class="dropdown">
<div class="col1"> ...
here is the css:
.dropdown {
visibility:hidden;
/*...*/
}
#menu li:hover .dropdown{
visibility:visible;
}
This works perfectly. In jQuery I handle the click event for the links in this menu and I want to use jQuery to hide the dropdown whenever the user clicks on a link so it goes away.
I tried these both (note: I haven't used these together.):
$('.dropdown').css('visibility', 'hidden'); //didn't work
$('.dropdown').hide(); //didn't work either
they both hide the menu but the problem is when they hide it, I don't get the menu again whenever I hover the mouse over the item.

You have to define what happens when the mouse is hovering the button and what happens when it's not. Something like this:
jQuery(document).ready(function(){
jQuery(".dropdown").hover(function() {
/* hovering actions */
}, function() {
/* non-hovering functions */
});
});

That's because jQuery's hide() method uses the rule "display:none" over that elemenent, in this case ".dropdown", to hide it, therefore, by definition, the "visibility" can't work on an element that has the rule "display:none" assigned to it.
Use jQuery to make the dropdown effect instead of a bunch of CSS rules.

Okay, what is actually happening is when you you set $('.dropdown').css('visibility', 'hidden'); on the element, it adds this to the style attribute of the element, inline (you can check this with Firebug). So the CSS
#menu li:hover .dropdown{
visibility:visible;
}
doesn't have any effect because inline styles take precedence. .dropdown elements will always be set as hidden now.