I'm trying to make a menu to my website. My idea is on the left side of the web the menu will appear. The menu will have X <li> and with X icon per each <li>, when my mouse is over I want to appear X data-id per each <li> + the icon.
For example:
<ul><li data-id="My Profile">ICON</li></ul>
On mouse over:
<ul><li>ICON + My Profile</li></ul>
Here I have an example that doesn't work: http://jsfiddle.net/pqa84nec/1/
Here's the JS I'm trying to use:
$("#menu").each(function() {
$(this).find('li').each(function(){
var oldData = $(this).html();
var data = $(this).attr("data-id");
var that = this;
$(this).mouseover(function() {
setTimeout(function() {
$(that).html(oldData+data);
}, 100);
});
$(this).mouseout(function () {
$(this).html(oldData);
});
});
});
Can you give me some help?
P.D.
As I can see, this code IS bugged:
Thanks!
Try this:
Javascript:
$(function() {
$("#menu ul li").each(function() {
var _this = $(this);
var icon = _this.html()
$(this).hover(function(e) {
setTimeout(function() {
_this.html(icon + _this.data('id'));
}, 200);
}, function(e) {
setTimeout(function() {
_this.html(icon);
}, 200);
})
});
});
CSS Addition:
#menu>ul>a {
overflow: hidden;
}
https://jsfiddle.net/mh4hcuw4/
You have many errors in your script Try this:
$(document).ready(function() {
$("#menu a li").each(function() {
var oldData = $(this).html();
var data = $(this).attr("data-id");
$(this).mouseover(function() {
setTimeout(function() {
console.log(oldData + data);
$(this).html(oldData + data)
}, 100);
});
$(this).mouseout(function() {
console.log(oldData);
$(this).html(oldData)
});
});
})
If you don't mind a CSS solution, here's something based on what you had. This way you don't have to rely on JavaScript to run your menu. It's nothing fancy, and there's plenty you could do to make it nicer, but it should get you started. In the fiddle I loaded the Font Awesome library to use the icons.
HTML:
<div id="menu">
<ul>
<li>
<a href="#">
<i class="fa fa-user"></i>
<span>My Profile</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-power-off"></i>
<span>Log Out</span>
</a>
</li>
</ul>
</div>
CSS:
*{margin:0;padding:0;}
html,body {
background-color: #263238;
font-family: 'Roboto', sans-serif;
height: 100%;
}
li {
position: relative;
}
a {
text-decoration: none;
}
#menu {
background-color: #37474f;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 50px;
}
#menu ul {
list-style: none;
}
#menu > ul > li {
border-bottom: 1px solid #263238;
}
#menu > ul > li > a {
color: #263238;
display: block;
font-size: 22px;
height: 50px;
line-height: 50px;
overflow: hidden;
position: relative;
transition: all 0.3s ease 0s;
width: 50px;
}
#menu > ul > li > a i {
display: block;
height: inherit;
line-height: inherit;
text-align: center;
width: 50px;
}
#menu > ul > li > a span {
color: #fff;
font-size: 16px;
left: 50px;
max-width: 130px;
opacity: 0;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
position: absolute;
text-overflow: ellipsis;
top: 0;
transition: opacity 0.3s ease .2s;
visibility: hidden;
white-space: nowrap;
}
#menu > ul > li > a:hover {
background-color: #fbd75b;
color: #fff;
width: 200px;
}
#menu > ul > li > a:hover span {
opacity: 1;
visibility: visible;
}
And a fiddle to view: jsfiddle.net/LjLvwb8q/3/
Related
I would like to create a navigation that scrolls to the specific part and also auto-updates when scrolling up/down.
It should also auto-scroll to the next possible div when scrolling. (this is not that important)
However, it should update on scroll when passing/on the corresponding div. (using jquery or plain js)
I have used this as the backend code for the navigation:
function ShowLanding() {
window.scrollTo(0,0);
}
function ShowContact() {
document.getElementById("contact").scrollIntoView();
}
function ShowAbout() {
document.getElementById("about").scrollIntoView();
}
//nav update code
var nav = $('nav');
var line = $('<div />').addClass('line');
line.appendTo(nav);
var active = nav.find('.active');
var pos = 0;
var wid = 0;
if (active.length) {
pos = active.position().left;
wid = active.width();
line.css({
left: pos,
width: wid });
}
nav.find('ul li a').click(function (e) {
e.preventDefault();
if (!$(this).parent().hasClass('active') && !nav.hasClass('animate')) {
nav.addClass('animate');
var _this = $(this);
nav.find('ul li').removeClass('active');
var position = _this.parent().position();
var width = _this.parent().width();
if (position.left >= pos) {
line.animate({
width: position.left - pos + width },
300, function () {
line.animate({
width: width,
left: position.left },
150, function () {
nav.removeClass('animate');
});
_this.parent().addClass('active');
});
} else {
line.animate({
left: position.left,
width: pos - position.left + wid },
300, function () {
line.animate({
width: width },
150, function () {
nav.removeClass('animate');
});
_this.parent().addClass('active');
});
}
pos = position.left;
wid = width;
}
});
The CSS:
nav {
position: relative;
padding-bottom: 12px;
padding-top: 20px;
padding-right: 20px;
}
nav .line {
height: 2px;
position: absolute;
bottom: 0;
margin: 10px 0 0 0;
background: #ff4242;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
nav ul li {
margin: 0 40px 0 0;
opacity: .4;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
nav ul li:hover {
opacity: .7;
}
nav ul li.active {
opacity: 1;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
display: block;
font-weight: 600;
letter-spacing: .2em;
font-size: 14px;
}
And the HTML:
<nav>
<ul>
<li class="active">HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
Result it produces
You mean something like this?
nav {
position: relative;
padding-bottom: 12px;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
background-color:darkgray;
position:fixed;
top:0;
right:0;
left:0;
}
nav .line {
height: 2px;
position: absolute;
bottom: 0;
margin: 10px 0 0 0;
background: #ff4242;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
nav ul li {
margin: 0 40px 0 0;
opacity: .4;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
nav ul li:hover {
opacity: .7;
}
nav ul li.active {
opacity: 1;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
display: block;
font-weight: 600;
letter-spacing: .2em;
font-size: 14px;
}
.home, .about, .contact {
height:800px;
text-align:center;
padding-top:50px;
color:#000;
font-size:50px;
}
.home {background-color:lightblue;}
.about {background-color:lightgreen;}
.contact {background-color:yellow;}
<html>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 0 ) {
$("li#home").css('background-color', 'blue');
} else {
$("li#home").css('background-color', '');
}
if(scroll_pos > 800) {
$("li#about").css('background-color', 'blue');
$("li#home").css('background-color', '');
} else {
$("li#about").css('background-color', '');
}
if(scroll_pos > 1600) {
$("li#contact").css('background-color', 'blue');
$("li#about").css('background-color', '');
} else {
$("li#contact").css('background-color', '');
}
});
});
</script>
<body>
<nav>
<ul>
<li id="home"><a href="#" >HOME</a></li>
<li id="about"><a href="#" >ABOUT</a></li>
<li id="contact"><a href="#" >CONTACT</a></li>
</ul>
</nav>
<div class="home">THIS IS HOME </div>
<div class="about">THIS IS ABOUT</div>
<div class="contact">THIS IS CONTACT</div>
</body>
</html>
Instead of writing this functionality on your own you could use a scrollspy plugin like Simple Scrollspy. You can check out the code on this Github repo.
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 3 years ago.
How to change + to - when menu parent menu item is clicked. i was looking to target ::after element using jquery but i cant find way to target pseudo element using jquery
I want to change below css to when perent menu is clicked
.ir-nav-w > ul li::after {
/* padding-left: 10px; */
text-transform: uppercase;
content: "-";
position: absolute;
left: 15px;
top: 4px;
line-height: 30px;
font-size: 20px;
z-index: 0;
}
Fiddle code
$(".nav-w > ul > li > a").click(function() {
$(this).next().slideToggle();
});
//open active list
$('.nav-w ul li').children().has('.active-menu').css('display', 'block');
// compare url with nav url to show active url
$(function() {
//var url = window.location.href;
var url = window.location.pathname;
var pgurl = window.location.href.substr(
window.location.href.lastIndexOf("/") + 1
);
$(".nav-w ul li a").each(function() {
if ($(this).attr("href") == url || $(this).attr("href") == "") {
$(this).addClass("active-menu");
}
});
console.log("url : " + window.location.pathname);
});
.nav-w a {
color: black;
padding: 10px 15px;
padding-left: 35px;
text-decoration: none;
display: block;
border-bottom: 1px solid #f1f1f1;
font-size: 12px;
font-weight: 600;
/* color: #178B43 !important; */
color: #757575;
}
/* ul inside content area*/
.nav-w ul {
margin-left: 0px;
list-style-type: none;
margin-bottom: 0px;
}
.nav-w ul li {
/*padding-left: 10px;*/
text-transform: uppercase;
position: relative;
width: 100%;
}
/* ol inside content area*/
.nav-w>ul {
padding-left: 0px;
padding-right: 0px;
}
.nav-w ul>li ul {
padding-left: 0px;
padding-right: 0px;
display: none;
}
.active-menu {
color: red !important;
}
.nav-w>ul li::after {
text-transform: uppercase;
content: "+";
position: absolute;
left: 15px;
top: 4px;
line-height: 30px;
font-size: 20px;
z-index: 0;
}
.nav-w>ul li ul li::after {
text-transform: uppercase;
content: "";
position: absolute;
left: 0px;
top: 5px;
line-height: 32px;
font-size: 20px;
z-index: 0;
}
.nav-w ul li ul li a {
padding-left: 45px;
}
.nav-w a:hover {
background: #f5f5f5;
border-left: 2px solid #178B43;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-w">
<ul class="">
<li>Share Information
<ul class="" style="display: none;">
<li>Share Overview</li>
<li>Share Graph </li>
<li>Investement Calculator</li>
<li>Historical Share Prices</li>
</ul>
</li>
<li>Financial Information
<ul class="" style="display: none;">
<li>Earning Releases</li>
<li>Financial Statements</li>
<li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
<li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
<li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
</ul>
</li>
</ul>
</div>
The way I would do it is to add a class to the parent menu after it is clicked, such as open.
And then in your css you could add a special modifier:
.nav-w > ul li.open::after {
content: "-"
}
And when it is click again, remove the class open.
You can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. But you can add a new class with a new ::after specified.
Add this to your code:
// JS
const $listItems = $('.ir-nav-w > ul li');
$listItems.onClick(
$listItems.removeClass('closed');
this.addClass('closed')
);
// CSS
.ir-nav-w > ul li.closed::after {
content: "+";
}
Trick is to add css:
.nav-w > ul li.selected::after {
content: "-";
}
and toggle selected class on click:
$(".nav-w > ul > li > a").click(function () {
$(this).parent().toggleClass("selected");
$(this).next().slideToggle();
});
$(".nav-w > ul > li > a").click(function () {
$(this).parent().toggleClass("selected");
$(this).next().slideToggle();
});
//open active list
$('.nav-w ul li').children().has('.active-menu').css('display', 'block');
.nav-w a {
color: black;
padding: 10px 15px;
padding-left: 35px;
text-decoration: none;
display: block;
border-bottom: 1px solid #f1f1f1;
font-size: 12px;
font-weight: 600;
/* color: #178B43 !important; */
color: #757575;
}
/* ul inside content area*/
.nav-w ul{
margin-left: 0px;
list-style-type:none;
margin-bottom:0px;
}
.nav-w ul li{
/*padding-left: 10px;*/
text-transform:uppercase;
position:relative;
width:100%;
}
/* ol inside content area*/
.nav-w > ul {
padding-left: 0px;
padding-right: 0px;
}
.nav-w ul > li ul {
padding-left: 0px;
padding-right: 0px;
display:none;
}
.active-menu {
color: red !important;
}
.nav-w > ul li::after {
text-transform: uppercase;
content: "+";
position: absolute;
left: 15px;
top: 4px;
line-height: 30px;
font-size: 20px;
z-index: 0;
}
.nav-w > ul li.selected::after {
content: "-";
}
.nav-w > ul li ul li::after {
text-transform: uppercase;
content: "";
position: absolute;
left: 0px;
top: 5px;
line-height: 32px;
font-size: 20px;
z-index: 0;
}
.nav-w ul li ul li a {
padding-left:45px;
}
.nav-w a:hover {
background: #f5f5f5;
border-left: 2px solid #178B43;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-w">
<ul class="">
<li>Share Information
<ul class="" style="display: none;">
<li>Share Overview</li>
<li>Share Graph </li>
<li><a href="/investor-relations/share-nformations/investor-calculator/" >Investement Calculator</a></li>
<li>Historical Share Prices</li>
</ul>
</li>
<li>Financial Information
<ul class="" style="display: none;">
<li>Earning Releases</li>
<li>Financial Statements</li>
<li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
<li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
<li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
</ul>
</li>
</ul>
</div>
It's not actually possible to target :after, because it isn't part of the DOM and can't be accessed through JavaScript code. This isn't a jQuery limitation.
You could just set a class on the element itself, and change the :after rule when the class is set, i.e.:
.nav-w > ul li.active::after
{
content: "-"
}
Add active class to the anchors' parent:
$(".nav-w > ul > li a").click(function () {
$(this).next().slideToggle();
$(this).parent().toggleClass('active');
});
And replace ::after on the active class:
.nav-w > ul li.active::after {
content: '-'
}
You can do with :after prop.
You can do something like this
.li-item::after{
content: "+";
}
.li-item-minus::after{
content: "-" !important;
}
While in jQuery - you can toggle class .li-item-minus on click of each list item
jQuery(".naw-v ul li").on("click", function(){
jQuery(this).toggleClass("li-item-minus");
});
Which means - on click of this li element, you toggleClass li-item-minus which has different content form main one.
I am trying to make a Navbar which changes it's image/logo, background color & font color when i scroll down a little however nothing i have tried so far has worked
Also want the image that appears when i scroll down to have the same width and height as the previous one
Here's my code
Js :
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('.navbar .navbar-brand img').attr('src','https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text.png');
}
if ($(this).scrollTop() < 1000) {
$('.navbar .navbar-brand img').attr('src','https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text_white.png');
}
})
});
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-brand");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
As others have mentioned, you are not importing jQuery in your codepen, so the code you wrote there will not work; by including it you should see the logo changing; however the scrollTop() > 1000 is too much, maybe reduce it to like 50 and you'll see the image of the logo actually change after you scroll
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('.navbar .navbar-brand img').attr('src', 'https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text.png');
}
if ($(this).scrollTop() < 50) {
$('.navbar .navbar-brand img').attr('src', 'https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text_white.png');
}
})
});
$(function() {
$(document).scroll(function() {
var $nav = $(".navbar-brand");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* Header **/
header {
background-color: #00695c;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight,
header .current a {
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
.navbar-brand.scrolled {
background-color: #fff;
transition: background-color 200ms linear;
}
<!-- Make sure to add this import -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="navbar">
<div class="container">
<div id="branding" class="navbar-brand">
<img src="https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text_white.png" alt="" width="123" height="50" style="height:100%;">
</div>
<nav>
<ul>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div class="space" style="height:1400px;"></div>
Are you sure you have jquery well imported, it works in my compute.
You need to import jQuery. Here is the code you need: This is their slim / min core link.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
I've been making some test, So I suggest your something like this:
$(function() {
var header = $(".header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
header.removeClass('header').addClass("header-alt");
} else {
header.removeClass("header-alt").addClass('header');
}
});
});
.header {
height: 200px;
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 200;
width: 100%;
transition: all 0.5s;
}
.header img {
background: url(https://www.w3schools.com/tags/smiley.gif) no-repeat;
}
.header-alt {
height: 100px;
background-color: rgba(0,0,0, 0.8);
position: fixed;
top: 200;
width: 100%;
transition: all 0.5s;
color: blue;
}
.header-alt img{
background: url(https://www.w3schools.com/html/pic_trulli.jpg) no-repeat;
}
.otherSection {
height: 2000px;
padding-top: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header">
<img class="img" width="42" height="42">
<h1>I'm a navigation bar<h1/>
</header>
<div class="otherSection">
Hello World
</div>
In this code snippet I was trying to make changes on absolute element for the menu item when it has active class, but the problem is when the class toggled and removed from current item the element still have the same effect and didn't enter the else statement.
As you see class active toggled between the menu items when click any of them and I use if this item has class active do this for the element. else back.
but else statement not working and keep the line under the menu item although it's not has active class anymore.
$(function () {
"use strict";
var $menuItem = $('.nav li a'),
$hr = $('hr');
$menuItem.on('click', function (event) {
$('.active').not($(this)).removeClass('active');
$(this).addClass('active');
if ($(this).hasClass('active')) {
$(this).next($hr).animate({width : "100%"}, 200);
} else {
$(this).next($hr).animate({width : "0"}, 200);
}
event.stopPropagation();
});
});
.nav {
background-color:#222;
padding:15px 10px;
position:fixed;
top:0;
left:0;
width:100%;
}
.nav ul li {
display:inline;
margin:0 20px;
position:relative;
}
.nav ul li a {
text-decoration:none;
color:#fff;
}
.nav ul li a .active {
color:red;
}
#home,#about,#services,#contact {
height:600px;
}
h1 {
text-align:center;
font-size:30px;
padding:100px 0;
}
hr {
position:absolute;
width: 0;
height:2px;
border:none;
color: #ff0075;
background-color:#ff0075;
top: 10px;
left: 0;
z-index:-5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li>Home<hr></li>
<li>About<hr></li>
<li>Services<hr></li>
<li>Contact<hr></li>
</ul>
</div>
As you have added active class to current element, thus truthy section of if will execute.
You need to apply the animation on .filter()ed element.
$menuItem.filter('.active').next('hr').animate({
width: "100%"
}, 200);
$menuItem.filter(':not(.active)').next('hr').animate({
width: "0"
}, 200);
$(function() {
"use strict";
var $menuItem = $('.nav li a');
$menuItem.on('click', function(event) {
$('.active').not($(this)).removeClass('active');
$(this).addClass('active');
$menuItem.filter('.active').next('hr').animate({
width: "100%"
}, 200);
$menuItem.filter(':not(.active)').next('hr').animate({
width: "0"
}, 200);
event.stopPropagation();
});
});
.nav {
background-color: #222;
padding: 15px 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.nav ul li {
display: inline;
margin: 0 20px;
position: relative;
}
.nav ul li a {
text-decoration: none;
color: #fff;
}
.nav ul li a .active {
color: red;
}
#home,
#about,
#services,
#contact {
height: 600px;
}
h1 {
text-align: center;
font-size: 30px;
padding: 100px 0;
}
hr {
position: absolute;
width: 0;
height: 2px;
border: none;
color: #ff0075;
background-color: #ff0075;
top: 10px;
left: 0;
z-index: -5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li>Home
<hr>
</li>
<li>About
<hr>
</li>
<li>Services
<hr>
</li>
<li>Contact
<hr>
</li>
</ul>
</div>
I have a problem with my dropdown Navbar it doesn't do it all the time. But if I reload the page and keep the cursor over the tab it will sometimes start flickering and flashing and the hover seem to mess up.
I have made a JSfiddle DEMO, but the dropdown isn't working on it not sure why I will also provide the code and webpage link were the dropdown does work.
Webpage Link Here. with kinda working dropdown.
HTML
<div style="padding-top:15px;">
<a class="toggleMenu" href="#">Menu</a> <!-- Mobile Nav -->
<ul class="nav">
<li>
refresh and keep cursor here
<ul>
<li>
somthing
<ul>
<li>Nothing</li>
<li>Nothing</li>
<li>Nothing</li>
</ul>
</li>
<li>
Nothing
</li>
<li>
Nothing
</li>
<li>
Nothing
</li>
</ul>
</li>
</ul>
</div> <!-- Container-Nav End -->
<div style="background:#333; width:100%; height:500px;"></div>
CSS
.nav-wrapper {
max-width:1300px;
width: 100%;
margin: 0 auto;
text-align: center;
}
.container-nav {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding-top:18px;
padding-left: 20px;
}
.toggleMenu {
display: none;
background-color: #455357;
width: 35%;
padding: 15px 40px;
border-radius: 3px;
font-weight: 600;
font-size: 16px;
color: #fff;
float: right;
text-align: right;
}
.nav {
list-style: none;
*zoom: 1;
}
.nav:before, .nav:after {
content:" ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
display: block;
text-transform: uppercase;
color: #788083;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.02em;
transition: 0.5s ease;
-moz-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
}
.nav a:hover {
color:#d54572;
text-decoration: none;
}
/* first sub hover colors */
.nav li a:hover {
background: none;
}
/* second sub hover colors */
.nav li li a:hover {
background: #999;
}
/* active tab colors */
#active {
color:#d54572;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
/* first sub menu */
.nav li li a {
width: 127px;
background: #666;
color:#fff;
position: relative;
z-index:500;
border: 1px inset #fff;
display: block;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
margin-left:-40px;
}
/* second sub menu */
.nav li li li a {
background:#777;
z-index:500;
}
Javascript
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 801) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 801) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}