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?
Related
I have primary navigation that are just "in-page" links on the home page. I also have a section of three pages for pricing that live as sub-pages with the urls: /pricing/basic-pricing.html, /pricing/pro-pricing.html and /pricing/pricing-premium.html.
On those three pages, I have a side-nav to get back-and-forth between those pages. So two navigation elements (primary-nav and side nav). When on a sub-page i.e. /pricing/basic-pricing.html, I would like the primary-nav link called "pricing" to have an active class.
I have it working with the code below, but was wondering if there is a better way in case I add more sub-pages in the future. I don't want to have to add more jQuery just to accommodate a new page. Right now it's only looking to see if the url contains the string 'pricing' in the href and then it adds the class to the 'pricing' link in the primary nav.
<nav class="primary-nav">
<ul class="menu collapse vertical large-horizontal">
<li>features</li>
<li>options</li>
<li>pricing</li>
<li>testimonials</li>
<li>contact</li>
</ul>
</nav>
<ul class="vertical menu side-nav">
<li>Basic Pricing</li>
<li>Pro Pricing</li>
<li>Premium Pricing</li>
</ul>
$(document).ready(function () {
$('.side-nav.menu a.is-active[href*="pricing"]').each(function () {
$('.primary-nav .menu a[href$=pricing]').addClass('is-active');
});
});
you can use location global object to detect which url or uri you're in,
here a link t it documentation : link
example:
console.log(location.pathname)
// /questions/56091860/adding-class-to-primary-nav-link-when-on-a-sub-page-based-on-the-url
in you case
// /pricing/basic-pricing.html
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!
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 have created a menu for my website which you can find here:
http://jsfiddle.net/nq9Nt/9/
When click a category on the menu it opens that category on my main navigation?
Is something conflicting or have I placed my Javascript in the wrong place?
So I want to be able to click a category and show the sub-categories but it just won't work. Also is there a way to keep open the category you clicked after you change page?
Thank you
<ul class="nav">
<li>Category 1
</li>
<li class="drop">Category 2
<ul id="sub1">
<li>Item
</li>
<li>Item
</li>
</ul>
</li>
<li class="drop">Category 3
<ul id="sub1">
<li>Sticker
</li>
<li>Sticker
</li>
</ul>
</li>
<li>Category 4
<ul id="sub1">
<li> Mural
</li>
<li>Mural
</li>
</ul>
</li>
$(".drop")
.on('click', function () {
$(this).find('ul').toggle();
})
Actually at least on jsfriddle animation works and if you replace href of your anchors from '#' to a real url you will be redirected to another page, so first make sure that you've attached jquery library in head of the document (since you use it in your script), then move your script to the bottom of the page, right before tag 'body' closes.
About keeping the state of the opened categories after refresh - usually it is made on server side while generating template by adding class, for example 'active', to current link and then, using css, corresponding category (or a hierarchy of categories) is set to be opened (li.active ul {display: block;} for example). Well, actually you could do the same trick - use js to find out current url with the help of window.location.pathname value and match it with a href value of your navigation links and then assign class 'active' to the found element (or its parent, it is up to your css)
You can add a class drop to li in 4th Category, so it will work as others. And remove that onclick if you don't plan to use it.
http://jsfiddle.net/nq9Nt/10/
Here the example,
jsbin
You have gave the anchor href with #, So It reloads the page. And also you have gave the onclick method, But it doesn't there.
I have a menu inside a menu. The first menu anchor(class = menu-container) which contains the submenu has a hover state with styles attached to it. I want these styles of the parent anchor to remain active when the mouse is also over the submenu.
I cant use jQuery, as I am only restricted to pure javascript.
The code is as following:
<ul>
<li>
List Item
</li>
<li>
<a class="menu-container" href="#">List Item</a>
<ul class="submenu">
<li>list item</li>
</ul>
</li>
</ul>
NOTE: The client has requested the menu to be displayed and hidden using pure CSS. I know that using jQuery to achieve the solution for this would be easier, but I am restricted.
Thanks
"Attach the menu-container class to the parent "li" item...
The ":hover" on the li won't work in IE6 and below but shall work in all modern browsers.