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!
Related
I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.
You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});
I have a drop down superfish menu in my responsive site and while I have the menu changing to a mobile friendly sidr slide menu for most mobile devices the client would still like to have the orginal dropdown menu showing when a tablet is in landscape orientation.
This obviously creates the usual hover issue with touch devices especially since we have the top li (of a drop down) also providing a href.
My thoughts were that for those particular top level li's we'd add a class on which we could then run some javascript to replace the usual url link with a # when a mobile device is detected. That would make the top li a touch item instead of a hover link item.
Anyway below is what I have constructed to date and I had though this would work but so far I can't seem to get it to replace the original url with the #
<script>
$(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
if (agentID) {
$('#sf-menu.sf-menu li.idevice a').attr('href', '#');
}
});
</script>
I'm guessing I'm missing something really obvious but I've got to that point where I've exhausted my knowledge level - I'm not really a coder, more an enthusiastic tinkerer :).
Below is a snippet of the menu code for reference.
<div id="mateen">
<ul id="sf-menu" class="sf-menu">
<li class="menu-item">Home</li>
<li class="idevice">Advantages
<ul>
<li >Mateenbar Advantages</li>
<li >Superior Performance</li>
<li >Research and Testing</li>
<li >Frequently Asked Questions</li>
<li >Middle East</li>
</ul>
</li>
<li class="idevice">Products & Specifications
<ul>
<li >MateenBar</li>
<li >MateenDowel</li>
<li >MateenBolt</li>
</ul></li>
<li class="idevice">Applications & Projects
<ul>
<li >Corrosion & Marine</li>
<li >Roads & Transportation</li>
<li >Tunnelling & Cutting</li>
<li >Electro-magnetic</li>
<li >Projects</li>
</ul>
</li>
<li >Downloads</li>
<li class="idevice">Contacts
<ul>
<li >Locations</li>
<li >About Pultron</li>
</ul>
</li>
</ul>
</div>
Any advice or help accepted at this point - hope I've provided enough relevant information.
Thanks
The problem is with the selector. Change the following statement
$('#sf-menu.sf-menu li.idevice a').attr('href', '#');
to
$('#sf-menu > li > a').attr("href","#")
For your reference:
https://css-tricks.com/child-and-sibling-selectors/
I've been trying to make a responsive website, most of it is sorted but I'm having difficulty with making the menu button (that shows up on devices specified by the media query) show and hide the navigation bar.
After researching it seems the only method is via JS, is this correct?
Anyway, I'm pretty awful when it comes to JS but I put it as I believed it would work. Here is the snippet of code. So the idea is, when ".menu-icon" is clicked the menu will drop down (or in this case fade in) and revert to hidden upon a second click etc.
http://jsfiddle.net/af57r1to/
<div id="logo">
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:200px;height:100px" />
</a>
<a class="menu-icon" href="#menu"></a>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME
</li>
<li>SECTIONS
<ul>
<li>RETAIL
</li>
<li>HOTEL
</li>
<li>RESTAURANT
</li>
<li>SHOPPING
</li>
</ul>
<li>HOW IT WORKS
</li>
<li>OUR EXPERIENCE
</li>
<li>TESTIMONIALS
</li>
<li>NEWS
</li>
<li>CONTACT US
</li>
</ul>
</div>
<br />
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
As this is at the moment, it seems to fade the navigation in for approximately 0.3seconds and then disappears. Not giving the user much time to choose an option from the drop down! aha.
I know it will be something obvious I've missed. Any help regarding it would be grateful.
Removing the class navbar from navbar cf solves the toggle issue, but screws up the styling. So, give an id to your navbar and toggle on that.
<div class="navbar" id='navbarID'>
<ul class="navbar cf">
<li>HOME
and
$('.menu-icon').click(function () {
$('#navbarID').fadeToggle();
});
Here is the fiddle
You have some errors in both HTML & JS.
First: You opened the inner <ul> element in a <li> element but closed it outside of the li element. The structure is wrong. It must closed inside the <li> element where it opened.
Second: The $(document).ready() function is not closed properly:
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
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.
this is a bit tricky to explain:
We got a website that contains various menus and apart from normal links it also has anchorlinks.
Now it's not the problem to have the links generated there, but it is also desired to give them an "active"-state (= you're on that website), specifically when you jumped to that section.
<ul class="active">
<li class="active">
Subsite
<ul>
<li><a href="index.php?id=30#section_1">Section 1</li>
<li><a href="index.php?id=30#section_2">Section 2</li>
<li><a href="index.php?id=30#section_3">Section 3</li>
<li><a href="index.php?id=30#section_4">Section 4</li>
</ul>
</li>
</ul>
Normal link behaviour:
You're on home, you click in the menu and get to index.php?id=30
When you're on id=30, the menu point will highlight.
How an active anchor should behave:
You're on home, you click in the menu and get to index.php?id=30#section_1. When you're on id=30, it's not highlighted, but when you follow the link and are on id=30#section_1, it is (based on what is entered in the locationbar). When you remove the anchor in the locationbar and confirm, the highlighting should be removed (afaik, the website won't reload, but jump to another section).
Is it possible to react to this jump-behaviour and listen to changes done to the location bar? Or do you have a different idea how to achieve this?
As Marc Baumbach pointed out in the comments-section to my question, this is exactly what I was looking for:
On - window.location.hash - Change?