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.
Related
Page of WordPress site use an on page filter menu which user can click on items to filter posts type below. I have already added in each anchor tag href value.
<ul class="list-inline filter">
<li class="active">
All solutions
</li>
<li class="cat-item cat-item-1">
Metallurgy
</li>
<li class="cat-item cat-item-2">
Food industry
</li>
</ul>
And here is js code to simulate a click on the appropriate element based on a URL Fragment.
jQuery(document).ready(function($){
var currentFilter = window.location.hash.substr(1);
$('.js-filter [data-filter="'+ currentFilter +'"]').trigger('click');
});
The deal is when I click on anchor tag it isn't add a href value after base url. For example, I want to have an url "example.com/solutions#.Metallurgy". Click applies filter on data, but url stays as "example.com/solutions".
Moreover, when I change url directly to "example.com/solutions#.Metallurgy" Wordpress redirects me to "example.com/solutions/#.Metallurgy". It brings me to the same page with no filter applied.
this is my site.
this is how I finally make it look like
I want to divide the the menu list items into two sub menu say menu left and right. And then wrap them in a div. This is make it easy for me to style them and this way they would stay responsive as well.
Now, I have been trying to achieve this by
jQuery( ".menu-item-580", ".menu-item-583",".menu-item-584",".menu-item-563").wrapAll("<div class='new' />").after(".menubar-brand");
I have trying this in browser console.
I also tried same above code by using appendTo() instead of after()
But, still no luck.
In your code you're basically doing this:
<ul>
<li>
<div class="new">
<li>
<li>
</div>
<li>
</ul>
which is not a valid markup.
The easiest way to goup <li>s would be to assign different additional css classes to different parts of the list:
<ul>
<li class="group1">
<li class="group1">
<li class="group2">
<li class="group2">
</ul>
Also, have a look at this: Is there a way to group `<li>` elements?
I'm trying to get the reference of this particular part of the page, then I can use the method click() on it. I was trying to use a CSS selector like this:
var customersMenu = $('input[translate=menu.customers]');
But no success until now. Can you help me anyway?
<ul class="menu">
<li ui-sref-active="active">
<a class="ng-scope" translate="menu.home" href="#/home">Home</a>
</li>
<li ui-sref-active="active">
<a class="ng-scope" ui-sref="customer.list" translate="menu.customers" href="#/customers">Customers</a>
</li>
</ul>
First of all, you might need to open up the menu to be able to click the menu item:
var menu = $("ul.menu"); // $ is a shortcut to element(by.css("selector"))
menu.click();
Then, the easiest way to locate the menu item would be "by link text":
menu.element(by.linkText("Home")).click();
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.
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?