I had created a menu with jquery, the issue is when i click on a submenu; site refreshes and then the menu doesn't remain active state, I want it to show active its menu and submenu when clicked..
also created a fiddle http://jsfiddle.net/akshaydesai/ptghs8xo/
<ul class="menu">
<li><div>PRODUCTS</div>
<ul>
<li>Scada Software</li>
<li>Energy Monitoring</li>
<li>Tension Monitoring</li>
<li>Protocol Gateways</li>
<li>Gas Monitoring</li>
<li>Led Display</li>
</ul>
</li>
<li><div>SOLUTIONS</div>
<ul>
<li>Power & energy</li>
<li>Process Automation</li>
<li>Medical Diagnostics</li>
<li>Machine Tools</li>
<li>Remote Monitoring</li>
<li>Industries</li>
</ul>
</li>
<li><div>OUR EXPERTISE</div></li>
<li><div>ABOUT US</div></li>
<li><div>CONTACT US</div></li>
</ul>
.menu ul{
text-align:justify;
width:300px;
min-width:500px;
margin-top:60px;
}
.menu ul:after{
content:'';
display:inline-block;
width:100%;
}
.menu ul li{
display:inline-block;
list-style:none;
white-space:nowrap;
margin:0;
padding:0;
}
.menu ul li a{
text-decoration:none;
color:#000;
}
.menu ul li:hover a{
color:#CCCC00;
border-bottom:1px solid #CCCC00;
}
.menu ul li ul{
display:none;
}
.menu ul li:hover ul{
position:absolute;
display:block;
text-align:justify;
width:500px;
min-width:500px;
margin:0;
padding-top:20px;
}
.menu ul li:hover ul li a{
color:#000;
border:none;
margin-right:25px;
}
.menu ul li:hover ul li:hover a{
color:#CCCC00;
}
.menu li.active a{
color:#CCCC00;
border-bottom:1px solid #CCCC00;
}
.menu li.active ul{
position:absolute;
display:block;
text-align:justify;
width:500px;
min-width:500px;
margin:0;
padding-top:20px;
}
.menu li.active ul li a{
color:#000;
margin-right:25px;
border-bottom:none;
}
.menu li.active ul li:hover a{
color:#CCCC00;
margin-right:25px;
}
.hide{
display:none;
}
$(document).ready(function(){
$(".menu > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('.menu ul').slideUp(700);
}
$(this).next().slideToggle(700);
});
var url = window.location.href;
var $current = $('.menu li ul a[href="' + url + '"]');
$current.parents('.menu ul').slideToggle();
$current.next('.menu ul').slideToggle();
});
Use separate URLs in href, corresponding to each page. So, when the page is refreshed, URL will be changed and menu on the page will exactly know which page is currently opened and which menu must be visible.
EDIT
There is nothing wrong with your code, assuming that you have set the correct hrefs, like:
<li>Scada Software</li> // I'm using a localhost example here just to simplify.
This works. If not, check the url:
Add directly after var url = window.location.href;
this: console.log('url:' + url);
or this: alert('url:' + url);
and the current url will be outputted.
You can also use cookies (or another way to store a persistent variable) to recall the active state after refreshing the page.
Here's an example of using cookies with jQuery: How to set/unset cookie with jQuery?
Related
Have a look at the following menu:
.clearfix::after {
content: "";
clear: both;
display: table;
}
#my-menu-inner > ul {
margin:10px;
width:100%;
background-color:yellow;
list-style-type:none;
position:relative;
}
#my-menu-inner > ul > li {
float:left;
margin:20px;
}
#my-menu-inner > ul > li > a {
padding:20px;
border:1px solid black;
display:block;
}
#my-menu-inner > ul > li > div.sub {
position:absolute;
top:calc(100% - 20px);
background-color:red;
padding:40px;
display:none;
left:0;
width:100vw;
}
#my-menu-inner > ul > li a:hover + div.sub, #my-menu-inner > ul > li a:focus + div.sub,
#my-menu-inner > ul > li > div.sub:hover, #my-menu-inner > ul > li > div.sub:focus {
display:block;
}
<div id="whatever">Just something before ...</div>
<div id="my-menu">
<div id="my-menu-inner">
<ul class="clearfix">
<li>
foo
<div class="sub">
<ul>
<li>mobile</li>
<li>users</li>
</ul>
</div>
</li>
<li>
bar
<div class="sub">
<ul>
<li>never</li>
<li>see me</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
This is a nicely working menu for everybody who is having a mouse or a touchpad. However: Users of mobile devices will never ever see the submenu as they instantly go to the href location as soon as they click one of the links. And they do not have hover states, ofc.
What I thought about:
Idea 1: Have a seperate mobile menu for touch devices. This is great because most designs have seperate mobile menus anyway.
Problem: #media screen (max-width: 1000px) will not be a sufficient method to detect if a user is able to hover/focus as everyone with a large touchscreen for instance would be excluded.
Idea 2: preventDefault() on clicking the links. Check if mouse movement was detected before and if so, follow the link. If not require a second click.
Problem: Requiring two clicks is probably not user friendly (many will not recognize the link is clickable).
What is a good and recommended way to deal with this situation?
I think a good practise is to make a visible clickable element. You should not only think about the implementation but about how the user will interact. The user need to know there is a sub menu and to do this you can add a small icon that may appear everywhere even if we can :hover.
Here is a simplified example where hover work by default. In case we cannot hover, we can click the icon to show the menu. Simply use an icon that make the click intuitive for users.
$('li span').click(function() {
$(this).next('.sub').toggleClass('show');
$(this).toggleClass('open');
})
.clearfix::after {
content: "";
clear: both;
display: table;
}
#my-menu-inner > ul {
margin:10px;
width:100%;
background-color:yellow;
list-style-type:none;
position:relative;
}
#my-menu-inner > ul > li {
float:left;
margin:20px;
}
#my-menu-inner > ul > li > a {
padding:20px;
border:1px solid black;
display:inline-block;
}
#my-menu-inner > ul > li > span {
text-decoration:none;
display:inline-block;
padding:20px 5px;
border:1px solid black;
margin-right:-10px;
cursor:pointer;
}
#my-menu-inner > ul > li > span:before {
content:"▼"
}
#my-menu-inner > ul > li > span.open:before {
content:"▲"
}
#my-menu-inner > ul > li > div.sub {
position:absolute;
top:calc(100% - 20px);
background-color:red;
padding:40px;
display:none;
left:0;
width:100vw;
}
#my-menu-inner > ul > li a:hover ~ div.sub,
#my-menu-inner > ul > li span:hover ~ div.sub,
#my-menu-inner > ul > li a:focus ~ div.sub,
#my-menu-inner > ul > li span:focus ~ div.sub,
#my-menu-inner > ul > li > div.sub:hover,
#my-menu-inner > ul > li > div.sub:focus,
#my-menu-inner > ul > li > div.sub:hover,
#my-menu-inner > ul > li > div.sub.show{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="whatever">Just something before ...</div>
<div id="my-menu">
<div id="my-menu-inner">
<ul class="clearfix">
<li>
foo<span></span>
<div class="sub">
<ul>
<li>mobile</li>
<li>users</li>
</ul>
</div>
</li>
<li>
bar<span></span>
<div class="sub">
<ul>
<li>never</li>
<li>see me</li>
</ul>
</div>
</li>
<li>
I don't have submenu
</li>
</ul>
</div>
</div>
I'm working on getting a personal website started and I downloaded a couple templates from HTML5 UP. There's one I really like, but I haven't been able to add dropdown lists to the menu items at the top.
Here's the URL to the site: zachdamit.cechire.com/five/
I'd like the dropdowns to be very similar to the ones on this example. I was following this tutorial, but after adding all the HTML and CSS elements in, it still wasn't working. I'm imagining it's conflicting with the JavaScript files associated with the page.
I know a decent amount of HTML, but I'm still learning. CSS and JavaScript are still pretty new to me. Let me know if I can post anything else that could potentially help.
Any assistance is greatly appreciated!
EDIT:
Here's the HTML I edited:
<div class="menu-wrap">
<nav id="nav">
<ul class="clearfix">
<li>Intro</li>
<li>What I Do</li>
<li>Who I Am
<ul class="sub-menu">
<li>Biography</li>
</ul>
</li>
<li>My Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
And here's the CSS I added:
<!--ADDED MENU BEGIN-->
.clearfix:after {
display:block;
clear:both;
}
/* Menu setup */
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
/*background:#3e3436;*/
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
/*font-family:'Ek Mukta';*/
}
.menu a {
transition:all linear 0.15s;
/*color:#919191;*/
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
/*color:#be5b70;*/
}
/* Dropdown Arrow (optional) */
.menu .arrow {
font-size:11px;
line-height:0%;
}
/* Top Level */
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
/*background:#2e2728;*/
}
/* Bottom Level */
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
/*background:#2e2728;*/
}
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
/*background:#3e3436;*/
}
<!--ADDED MENU END-->
The CSS is pretty much straight from the site I linked above. I was imagining that I could edit the design and such one element after a time after I got it working, but after adding the code, it removed the first image on the site and formatted the menu bar weird. Like I said, I'd like it to look similar to the example linked above.
Thanks!
You are using id rather then class(according to your given css) so just replace <nav id="nav"> to <nav class="menu"> and your menu will work and also i have changed menu width from 1000px to 100% as for good look. Change it according to your need.
Here is demo. Hope it will help.
I'm working on blogger and I've been trying to make a menu with some dropdowns using JQuery but for some reason it isn't working on Blogger, in my pc it works just fine. I've added the scripts and the style to the page HTML and then I placed the body on a HTML block but it doesn't work there.
Picture from the blog structure with the HTML Block
Here's the demo I'm using on my pc.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.menu {
padding:10px 0;
width: 500px;
}
.menu ul {
list-style-type:none;
margin:0;
padding:0;
}
.menu ul li {
display:inline-block;
position:relative;
}
.menu ul li ul {
background-color:rgb(225,75,75);
position:absolute;
left:0;
top:40px; /* make this equal to the line-height of the links (specified below) */
width:200px;
}
.menu li li {
position:relative;
margin:0;
display:block;
}
.menu li li ul {
position:absolute;
top:0;
left:500px; /* make this equal to the width of the sub nav above */
margin:0;
}
.menu a {
line-height:40px;
padding:0 12px;
margin:0 12px;
}
.menu a {
color:#000;
text-decoration:none;
display:block;
}
.menu a:hover,
.menu a:focus,
.menu a:active {
color:rgb(255,00,00);
}
/* style sub level links */
.menu li li a {
border-bottom:solid 1px rgb(200,50,50);
margin:0 10px;
padding:0;
}
.menu li li:last-child a {
border-bottom:none;
}
/* show arrows for dropdowns */
.menu li.dropdown > a {
background-image:url('../img/arrow-down.png');
background-position:right 20px;
background-repeat:no-repeat;
}
.menu li li.dropdown > a {
background-image:url('../img/arrow-right.png');
background-position:right 16px;
background-repeat:no-repeat;
}
/* hide sub menu links */
ul.sub-menu {
display:none;
}
</style>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown').hover(
function(){
$(this).children('.sub-menu').slideDown(200,stop());
},
function(){
$(this).children('.sub-menu').slideUp(200,stop());
}
);
function stop(){
$('.sub-menu').stop(true, true);
}
});
</script>
</head>
<body>
<div class="menu">
<ul >
<li>Home</li>
<li class="dropdown">Streams
<ul class="sub-menu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</li>
<li>Guides</li>
<li>Reports</li>
</ul>
</div>
</body>
</html>
Edit:
I've also trying making an alert in the JQuery function and when the mouse passed over the menu the alert appears but the dropdown doesn't.
The answer to my own question is... Blogger's gadget for HTML/Javascript block applies some css that was making the bar not show up. You can either find a way to remove the css from the gadget or simply place your HTML code on the HTML page.
I have a menu with nested UL's to work as a drop down menu. In the drop down I have another nested UL with LI's that are pragmatically generated so I don't know how many are going to be in their.
I was trying to set the height of the second UL on load so that I can put a border around the dropdown.
HTML:
<ul>
<li>1</li>
<li>2
<ul>
<li>2a
<ul class="submenu">
<li>2a1</li>
<li>2a2</li>
<li>2a3</li>
<li>2a4</li>
<li>2a5</li>
</ul>
</li>
<li>2b
<ul class="submenu">
<li>2b1</li>
<li>2b2</li>
<li>2b2</li>
<li>2b2</li>
<li>2b2</li>
<li>2b2</li>
<li>2b2</li>
<li>2b2</li>
<li>2b2</li>
<li>2b2</li>
</ul>
</li>
</ul>
</li>
<li>3</li>
</ul>
CSS:
ul {
list-style-type: none;
}
ul li {
display: inline-block;
/*float: left;*/
width: 100px;
}
ul li:hover {
background-color: #cc0505;
color: white;
}
ul li ul {
/*visibility: hidden;*/
position: absolute;
padding: 0px;
border: 2px solid black;
/*min-height:120px;*/
}
ul li:hover ul {
visibility: visible;
}
ul li ul li {
/*display: inline;
float: left;*/
color: black;
}
ul li ul li:hover {
background-color: white;
color: black;
}
ul li ul li ul {
border: none;
min-height:0px;
}
ul li ul li ul li {
display: block;
/*float: none;*/
}
ul li ul li ul li:hover {
background-color: #cc0505;
color: white;
}
I have tried using $('ul ul ul').each and $('ul ul ul').next() to loop through any UL on the third level but it only seems to be picking up the first occurrence.
A jsfiddle I set up with my code and a few attempts I have made to get this right. http://jsfiddle.net/kZ236/2/
the problem is, that height() always takes the height of the first element of the set, no matter what you do before calling that.
using each() together with a Math.max will work
http://jsfiddle.net/kZ236/3/
your code with next() didn't work as the ul didn't had a next element. next() is no iterator through the set of $('ul ul ul') but getting the next sibbling in the dom tree.
Try this:
$(document).ready(function () {
$('#nav>li>ul').each(function(){
var maxHt=0;
$(this).find('.submenu').each(function(){
var bottomPosition=$(this).height() +$(this).position().top
maxHt= bottomPosition>maxHt ? bottomPosition : maxHt;
});
$(this).height( maxHt)
})
})
DEMO
I'm looking to have an additional subnav to this accordion menu. I tried to add a child element to the nav ul li, but that didn't seem to work. Ideally, I would like to be able to list web projects under "web" and print under "print".
FIDDLE: http://jsfiddle.net/schermerb/rGMAu/1/
.header button {
cursor:pointer;
float:right;
padding:5px;
margin:10px 10px;
border:none;
border:1px solid #ececec;
background:#444;
color:#ececec;
}
.nav {
text-align:center;
background:#444;
}
.nav ul li {
text-transform:capitalize;
display:block;
border-bottom:1px solid #ececec;
}
.nav a {
display:block;
padding:10px;
color:#ececec;
}
.nav a:hover {
background:#029b9d;
color:#ececec;
}
<button id="show">Menu <span>+</span> <span style="display:none;">-</span>
</button>
<div class="clear"></div>
</div>
<div class="nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Web
</li>
<li>Print
</li>
</ul>
</div>
I have updated your js
$('.nav, .nav li ul').hide();
$('#show').click(function () {
$(".nav").toggle();
$("span").toggle();
});
$('.nav li').click(function(){
$(this).children('ul').toggle();
});
Updated jsFiddle File
Adding a child element was the right path.
http://jsfiddle.net/jonigiuro/rGMAu/2/
<li>Web
<ul class="sub">
<li class="item">item1</li>
<li class="item">item2</li>
</ul>
</li>
You hide the child element by default, and when you hover on the parent, you show the it:
ul li:hover ul
Here's the revelant css for your case:
.nav ul li ul {
color: red;
margin: 0;
padding: 0;
display: none;
}
.nav ul li:hover ul {
display: block;
}
.nav ul li ul li {
padding: 10px 0;
}