I am trying to use this menu on my web, but here have a problem, that is how to keeping the menu active?
I hope when the user browse the Home page, the menu bar will like this:
I found some example, like add the class ".active",
and put it in <li>, like:
<li class="active">Home</li>
But, it not working.
HTML:
<div class="rmm" data-menu-style='graphite'>
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about-me'>About me</a></li>
<li><a href='#gallery'>Gallery</a></li>
<li><a href='#blog'>Blog</a></li>
<li><a href='#links'>Links</a></li>
<li><a href='#sitemap'>Sitemap</a></li>
</ul>
</div>
Here is the demo:
http://jsfiddle.net/7jgkzdf7/
Yesterday, I had been ask this question, however I make a lot of mistakes, I am sorry about that!
Now, I post again. Please help me to fix this problem!
Thanks!!!
Try something like this
JS:
$(".rmm ul li a").on('click', function () {
this.addClass('active');
});
CSS:
.rmm ul li a {
url('http://responsivemobilemenu.com/demo/rmm-img/graphite-menu-bg-hover.png')
}
But this RMM (responsive mobile menu) is not good practice ... try to use Bootstrap. They have easy documentation and very good mobile first elements.
Try it here Bootstrap
Related
I have a little problem there. I have accordion tabs with custom a tags. You can see the code below. I made a JS code to autoclick on different tab when the page is loaded. It works nice but it's scrolling down to the tab. I am not good in JS so I just come here to get help or advice. For me it will be better to not use "something a" but "#discussion" because there can be more tabs and I like to choose which tab will be autoclicked by the hash link not with "nth-child".
I can't use ID's on taband can't use jQuery (don't have permissions, just can use JS and adding code to body/head/footer)
Thank you! :-)
<div id="tabs-div" class="some-classes">
<ul id="tabs" class="some-classes">
<li class="ui-state-default ui-corner-top">
Description
</li>
<li class="ui-state-default ui-corner-top">
Discussion
</li>
</ul>
<div>
<script>
$link = $('#tabs li:last-child a');
$link[0].click()
</script>
I'm working on a project that requires 2 distinct menus, one on top, and one on the left of the page:
<div class="navigation">
<ul class="navigation">
<li>FILM </li>
<li>PHOTOGRAPHY </li>
<li>OTHER WORKS </li>
<li>INFO/INQUIRE </li>
</ul>
</div>
<div class="navigationLeft">
<ul class="navigationLeft">
<li><a href='../item1/index.html'><span>item 1</span></a></li>
<li><a href='../item2/index.html'><span>item 2</span></a></li>
<li><a href='../item3/index.html'><span>item 3</span></a></li>
<li><a href='../item4/index.html'><span>item 4</span></a></li>
</ul>
</div>
The left one is basically a sort of sub-menu of a section in the top menu. Originally, the project was meant to be small, so I used straight CSS to highlight selected sections using class, but the website has grown so much now that I want to use templating for future updates. That means that straight CSS is now out. I've implemented the following script in my header:
<script type="text/javascript" >
$(function() {
$(".navigationLeft a").each(function() {
if (this.href == window.location) {
$(this).css("color", "#ff9900");
};
});
});
</script>
It's working for my left menu, but obviously wouldn't work for my top menu, because technically the section that I'm in isn't the "current page". I'm looking for a way using jQuery/js to parse through the url and have the highlighting applied to any link that is once up the tree. So basically, in my top menu, any <a href> that contained for example /photography/ would also be highlighted, even though it's not technically the current page. Many thanks in advance!
site ba-hit .com
(resize your screen in a low resolution 720px for exemple)
I tried to load the jquery in footer.. in header, everywhere but the menu don't apears when i click on it.
Here is the code :
$(function() {
var pull = $('#push');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
<nav class="clearfixx">
<span>Menu</span>
<ul class="clearfixx newmenu">
<li><a id="thehome" href="#"> </a></li>
<li><a id="proj" href="#"> </a></li>
<li><a id="loca" href="#"> </a></li>
<li><a id="cterm" href="#"> </a></li>
<li><a id="deco" href="#"> </a></li>
<li><a id="rech" href="#"> </a></li>
<li><a id="part" href="#"> </a></li>
<li><a id="cont" href="#"> </a></li>
</ul>
</nav>
I'm sure it's a conflict with something, but what?
Note: You should provide the relevant JavaScript snippets too, rather than having us dig through all code in your site trying to find what is going on. You have a LOT of script tags. It's a pain to try to find what you're trying to do. Don't make people dig in your code to find things.
It looks like you have a script that should be triggered when you click the #push element to show the #newmenu element.
You are defining a menu variable by calling $('nav ul') then when #push is clicked it calls the .slideToggle of the $('nav ul') element.
When I debug your page, at the time of your load function call, both pull, and menu are null. I don't know if some other script on the page is affecting your HTML structure during loading, but your jQuery is returning nulls for those variables when it tries to set the event, and that means no event is firing. The jQuery is fine; something else is effecting those elements or your page structure.
Finally, you are using a NAV tag, which is HTML5, but your DOCTYPE is XHTML (not HTML5).
Finally i found alone a solution...
I add the no conflict jquery before the function..
Like this:
jQuery(document).ready(function( $ ) {
Hope it will help...
Bye.
I'm trying to open a submenu from the parent link using the mmenu jquery plugin, and almost got it, but once open the submenu, the function also close the menu (the main menu opened from the left).
I got this:
<nav data-role="navbar" data-iconpos="left" id="leftMenu">
<ul>
<li><a id="a_home" href="/" >Home</a></li>
<li><a id="a_what" href="/" >What to do</a></li>
<li>
<a id="a_guides" href="#guidesSubmenu" onclick="$('#leftMenu ul#guidesSubmenu').trigger( 'open.mm' );" >Guides</a>
<ul id="guidesSubmenu">
<li>Beer Guide 2013</li>
<li>Bar Guide 2013</li>
<li>Cheap Eats 2013</li>
</ul>
</li>
<li>
<a id="a_sections" href="#" >Sections</a>
</li>
</ul>
</nav>
So, when I click on the Guides link, opens the submenu, but also close the main menu, animating to the right.
Anybody knows how is the right way to open a submenu?
This is the plugin page: http://mmenu.frebsite.nl/
Is not a simple jquery javascript.
Thanks.
The jquery.mmenu plugin automatically appends a "open-submenu"-button to every LI with an UL inside it. If the A doesn't link to an actuall page, all you need to do, is replace it with a SPAN:
<ul>
<li><span>Guides</span>
<ul>
<li>Beer Guide 2013</li>
</ul>
</li>
</ul>
$('li').hover(function(){
$('ul',this).slideDown();
},function(){
$('ul',this).slideUp();
});
Just change the selector with your own li tags class name.I think you can also toggle method.
$('#li').toggle(function() {
$('ul',this).slideDown();
}, function() {
$('ul',this).slideUp();
});
We ran into this exact same scenario today, and after a good amount of research used the following solution (adapted to your situation). It seems like they've changed things around so the data attributes on the elements are not clearly supported, so we moved the initialization to JavaScript.
HTML (did not change):
<nav data-role="navbar" data-iconpos="left" id="leftMenu">
<ul>
<li><a id="a_home" href="/" >Home</a></li>
<li><a id="a_what" href="/" >What to do</a></li>
<li>
<a id="a_guides" href="#guidesSubmenu" onclick="$('#leftMenu ul#guidesSubmenu').trigger( 'open.mm' );" >Guides</a>
<ul id="guidesSubmenu">
<li>Beer Guide 2013</li>
<li>Bar Guide 2013</li>
<li>Cheap Eats 2013</li>
</ul>
</li>
<li>
<a id="a_sections" href="#" >Sections</a>
</li>
</ul>
</nav>
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$("#leftMenu").mmenu({
onClick: {
close: false
}
});
});
</script>
Specifying the close option as false makes it so it does not close the mmenu when you click on the li, and allows the onclick event handler to open up the sub-menu item.
I have the following menu which cascades on hover but i need to add some conditional checks like if the mouse is on hover on the div then keep the menu sliding down.
Also if the mouse is hovered on the LI then check them menu down.
As you can see it just slides down and back up once you leave the "div".
Im stuck... and have tried for hours searching for if statements etc, i just cant get the syntax correct.
my example
Here is a working example
HTML
<div id="leftWrap">
<div id='accordion'>
<ul>
<li><div>Absorption</div>
<ul style="display: none;">
<li>Accessories</a>
<ul style="display: none;">
<li>AA500AFG</li>
<li>AA500F</li>
<li>AA500G</li>
<li>AA990F</li>
</ul>
</li>
<li>Consumables</li>
<li>Products</li>
</ul>
</li>
<li><div>Fluorescence</div>
<ul style="display: none;">
<li>Accessories</li>
<li>Consumables</li>
<li>Products</li>
</ul>
</li>
</ul>
</div>
</div>
Javascript/JQuery
jQuery(document).ready(function() {
$('#accordion ul > li').hover(function() {
$(this).children("ul").slideToggle('slow');
});
});
If you ask me, it gets really messy when you use mousehover/mouseenter for such things. I'd prefer using a click event after the first hover or something, this way the user won't get annoyed by all that movement.
jQuery(document).ready(function() {
$('#accordion ul:first-child > li').hover(function() {
$(this).children("ul").slideToggle('slow');
});
$('#accordion ul:not(:first-child) > li').click(function(){
$(this).children("ul").slideToggle('slow');
});
});
Make it a child of the <div>, then it won't cancel the event when you leave it.
Also I should note that it's more semantic to make a navigation out of nested lists (such as
Category ItemItem
<ul>
<li>Category
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
I tried to fiddle in your fiddle, but the markup and css are a lot confusing.
As Rikudo said, you should make the div, its child its much easier to do it that way. I have created a simplest accordion skeleton. You can see it here.
It does everything you want. However for the customizations and others things, I will leave it up to you.
http://jsfiddle.net/dttdB/13/
You had attached hover to the heading div when the mouse leaves that, the hover effect is lost.