We Keep Coding

Disable mouseenter when over element on page load

I'm trying to find a way to disable mouseenter when the top-level navigation item is clicked & on pageload and re-enable again when the mouse leaves and enters the element again.
User hovers over element = show submenu
User clicks menu = hide submenu and only show submenu when user leaves menu elements and enters again.
If user is over the element onLoad then only show submenu when user leaves element and enters again.
$('.navmenu li').on('mouseenter', function(e) {
$(e.target).next().addClass('js-hover')
}).on('mouseleave', function(e) {
$(e.target).next().removeClass('js-hover')
});
$('.navmenu').on('click', function(e) {
$(e.target).next().removeClass('js-hover')
location.reload(true);
})
.navmenu .submenu {
display:none;
}
.navmenu li {
display: inline;
}
.navmenu .submenu {
position:absolute;
top:40px;
left:0
}
.navmenu li:hover .js-hover {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navmenu">
<ul>
<li>
Menu
<nav class="submenu">
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</nav>
</li>
<li>
Menu 2
<nav class="submenu">
<ul>
<li>Submenu 4</li>
<li>Submenu 5</li>
<li>Submenu 6</li>
</ul>
</nav>
</li>
</ul>
</nav>

this could be done using variables and storing a state of element (if it should be hidden or not). But since you tried to do this through class attributes, I did the same. Here is simle example of one menu item, everything should be clear.
<nav class="navmenu">
<ul>
<li>
Menu
<nav class="submenu" hidden>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</nav>
</li>
</ul>
</nav>
and javascript:
$menuLink = $("nav.navmenu li > a");
$menuLink.click(function () {
$(this).addClass("dontHide");
});
$menuLink.mouseenter(function () {
$(this).next("nav.submenu").removeAttr("hidden");
$(this).removeClass("dontHide");
});
$menuLink.mouseleave(function () {
if(!$(this).hasClass("dontHide")) {
$(this).next("nav.submenu").attr("hidden", true);
}
});
Live demo: https://jsfiddle.net/g3fua461/24/

onclick expand multiple menu

I want to make an onclick expand multiple menu in my website
Before I follow this thread: this with little bit modify I get:
<ul>
<rg><li id="auctions">Menu</li></rg>
<br></br>
<lf>
<li class="submenu">Left</li>
</lf>
<rg>
<li class="submenu">Right</li>
</rg>
</ul>
But it only shows a menu, then I create a duplicate like this:
<ul>
<rg><li id="auctions">Menu</li></rg>
<br></br>
<lf>
<li class="submenu">Left</li>
</lf>
<rg>
<li class="submenu">Right</li>
</rg>
</ul><ul>
<rg><li id="auctions2">Menu</li></rg>
<br></br>
<lf>
<li class="submenu2">Left</li>
</lf>
<rg>
<li class="submenu2">Right</li>
</rg>
</ul>
And JS and CSS like this:
<script>
$(function() {
$('#auctions').click(function(){
$('.submenu').slideToggle();
});
});
$(function() {
$('#auctions2').click(function(){
$('.submenu2').slideToggle();
});
});
</script>
<style>
.submenu{display:none;}
.submenu2{display:none;}
rg {float:right}
lf {float:left}
</style>
Its work but doesn't run inline. Then I useul {display:inline-block}
Yes, the menu running inline, but it's broken and float doesn't work properly. Can it's fixed? or can I make multiple menu in same <ul>?

make rg and lf as classes and change the html accordingly to get your desired style.
But I recommend, you should consider studying about ul and li tags and its properties before using it
$(function() {
$('#auctions').click(function() {
$('.submenu').slideToggle();
});
});
$(function() {
$('#auctions2').click(function() {
$('.submenu2').slideToggle();
});
});
ul {
display: block;
margin:0;
padding:0;
width:100%;
}
li {
list-style: none;
}
li.main {
width:100%;
text-align:right;
}
.submenu {
display: none;
}
.submenu2 {
display: none;
}
.rg {
float: right;
}
.lf {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<ul>
<li id="auctions" class="main rg">Menu</li>
<li>
<ul>
<li class="submenu lf">Left</li>
<li class="submenu rg">Right</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li id="auctions2" class="main rg">Menu</li>
<li>
<ul>
<li class="submenu2 lf">Left</li>
<li class="submenu2 rg">Right</li>
</ul>
</li>
</ul>
</li>
</ul>

Issue to build a fixed sticky sidebar

I'm learning bootstrap and I'd like my custom horizontal navbar to stick at the top of the page once it reaches it (like this).
I have tried to add an affix class to my CSS as well as a piece of JS code, but that does not work. What is the issue?
See https://jsfiddle.net/bs7bdpmh/
html
<div id="nav" class="container-fluid">
<nav class="navbar-classic">
<li>Who are we?
<ul class="dropdown">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>Services Services Services
</li>
<li>Products Products Products
</li>
</nav>
CSS
#nav.affix {
position: fixed;
top: 0;
width: 100%;
height: 70px;
background: #fff;
z-index:10;
}
JS
$('#nav').affix({
offset: {
top: $('header').height()
}
});

You mean something like this ?
See this fiddle
JS :
$(window).scroll(function(){
scrollTop = $(window).scrollTop();
if(scrollTop > 50){
$('#nav').addClass('affix');
}else{
$('#nav').removeClass('affix');
}
});
Of course, it's not perfect, I let you adapt the CSS code and HTML structure ;)

If you are using normal bootstrap the solution is easy
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active">Basic Topnav</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
and if you want to change the navbar when you scroll to the bottum just use something like:
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() == $(document).height())
{
$('#nav').addClass('affix');
}
});

javascript hover function for submenu

I'm pretty new at trying to understand javascript and I've been pooling over multiple examples trying to figure out what I'm doing wrong, but cant get this working properly. At one point I had working with onmouseover/mouseout but it only worked on 1 of the menus.
I'm sure it is something simple I have overlooked, but any help would be appreciated.
http://jsfiddle.net/N3TyT/
jQuery(document).ready(function($) {
$('#top-menu').hover(
function () {
$('#submenu').show(active);
},
function () {
$('#submenu').hide(non-active);
}
);
});
<ul id="menu" class="nav-menu">
<li>Home</li>
<li id="top-menu">About Us
</li>
<ul id="submenu" class="sub-menu non-active">
<li>US</li>
<li>Our Style</li>
<li>The Experience</li>
</ul>
<li id="top-menu">Galleries
</li>
<ul id="submenu" class="sub-menu non-active">
<li>Weddings</li>
<li>Engagements</li>
<li>Featured Weddings</li>
</ul>
<li id="top-menu">The Details
</li>
<ul id="submenu" class="sub-menu non-active">
<li>Investment</li>
<li>Press and Awards</li>
<li>Testimonials</li>
</ul>
<li>FAQ</li>
<li>Contact</li>
<li>The Blog</li>
</ul>
.nav-menu {
list-style-type:none;
text-align:center;
text-transform:uppercase;
font-weight:bold;
font: 24px'Playfair Display', Georgia, serif;
}
.navmenu ul li {
margin:30px;
}
.non-active {
display:none;
}
.active {
display:inline;
}

It doesn't answer your specific question but the same behavior can be easily achieved with css. This way you don't depend on javascript being turned on for standard menu access.
ul.menu li ul {
display: none;
}
ul.menu li:hover ul {
display: block;
position: relative;
}
<ul class="menu">
<li>Home</li>
<li>
Galleries
<ul>
<li>Gallery #1</li>
<li>Gallery #2</li>
</ul>
</li>
<li>
Albums
<ul>
<li>Album #1</li>
<li>Album #2</li>
</ul>
</li>
</ul>
View on jsFiddle

You are using hide and show wrong.
http://api.jquery.com/show/
http://api.jquery.com/hide/
http://jsfiddle.net/eXKV9/
$('#top-menu').hover(
function () {
$('#submenu').show();
},
function () {
$('#submenu').hide();
}
);

id must be unique. If you have multiple elements with the same id, jquery will not retrieve all the elements when you do $('#top-menu'), it'll only find the first element that matches the selector.

We're going to need to change the HTML a bit. IDs are used only once on a page. Classes are similar, but can be applied to any number of elements. We also want to nest our sub-menu's under the top-menu. That way the association is more clear.
<li class="top-menu">About Us
<ul class="sub-menu non-active">
<li>Ashley + David</li>
<li>Our Style</li>
<li>The Experience</li>
</ul>
</li>
We want to specify the nested sub-menu to show or hide. $(this) refers to the top-menu that was hovered over.
$('.top-menu').hover(
function () {
$(this).find('.sub-menu').show("slow");
},
function () {
$(this).find('.sub-menu').hide("slow");
}
);
demo

I updated your work. Is this what are trying to establish?
$('#top-menu').mouseover(function(){
$('#submenu').addClass('active');
});
$('#top-menu').mouseout(function(){
$('#submenu').removeClass('active');
});
JSFiddle Demo

Problem with Display of jQuery Menu

Menu does not display in line. Not sure how to call the CSS code. Also I want the alert to tell me which menu item was clicked.
<script type="text/javascript">
function get_list() {
$("#tabs").click(function(){
$(this).click(function(){
alert(this);
});
});
</script>
<style type="text/css">
#navbarID li {
display: inline;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li>Type 1</li>
<li>Type 2</li>
<li>Type 3</li>
</ul>
</div>
</body>
</html>

the html should be something like this.
<ul id='tabs'>
<li><a href='type1.html'>Type 1</a></li>
<li><a href='type2.html'>Type 2</a></li>
<li><a href='type3.html'>Type 3</a></li>
<li><a href='type4.html'>Type 4</a></li>
</ul>
the css part could be this:
ul#tabs { list-style: none; }
ul#tabs li { display: inline; }
the onclick that you want on jQuery is like this:
$('ul#tabs li a').click(function(){ alert('i was clicked!'); return false; });

alert($(this).html()); will tell you what the contents of that nav item are.
Maybe you should use <span> instead of <div> for inline.