I have a menu in my CMS which is controlled programatically and I don't have access to the code, the only thing I can add is js/jquery. I would like to disable the first element from the menu, ie replace the current href with #. I'm new to jquery and need some help. Here's a menu sample.
<nav class="main-nav">
<div class="shell">
<ul>
<li class="taphover">
Education & Training<i class="ico-arrow"></i>
<div class="dd">
<ul>
<li>Book a Field Trip</li>
<li>Educator Development</li>
<li>Specialized Student Programs
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
I'd like to replace /education with #. Any ideas?
//select the first anchor where href="/education"
var anchor = $("a[href='/education']")[0];
//change the href of the anchor
anchor.attr('href') = "#";
Related
I have a menu structure like this:
<ul class="menu">
<li class="parent">
<a class="menu-link" href="http://url.com/#Id">Id</a>
</li>
<li class="parent">
<a class="menu-link" href="http://url.com/#Id">Id</a>
</li>
</ul>
and an English version where the menu is like this:
<ul class="menu">
<li class="parent">
<a class="menu-link" href="http://url.com/en/#Id">Id</a>
</li>
<li class="parent">
<a class="menu-link" href="http://url.com/en/#Id">Id</a>
</li>
</ul>
Using scrollspy, I’m detecting which section of the page is currently visible. So I can get the Id part of the anchor link. Now how do I select that specific anchor link?
I tried this:
$('.menu').find(":contains('#" + this.id"')" ).addClass('active');
But that doesn’t work (otherwise I wouldn’t be here!).
:contains will check html()/ text() part of the anchor tag, you need to use attribute selector for href of anchor tag as shown below
$('.menu').find("a[href*='#" + this.id + "']" ).addClass('active');
JSFiddle Demo
More Information on attribute contains selector
what about to separate url (which should be SEO) and set id independent of url query by using data-binding? I hope you are using some template engine to render this html code. If not its ok only one attribute more.
for example:
<ul class="menu">
<li class="parent">
<a class="menu-link" href="http://url.com/en/topic-for-women" data-id="1">Id</a>
</li>
<li class="parent">
<a class="menu-link" href="http://url.com/en/topic-for-men" data-id="2">Id</a>
</li>
For this you can use very simple calling of jquery:
$(".menu .menu-link[data-id='2']").addClass("active");
here s link enter link description here
I have a problem figuring out how to make my menu items dynamically change other list items when clicked on.
For example I want Box1:
<nav class="left">
<ul>
<li>
<br>box1
</li>
...
to update the li's in the 'topnav' class:
<header class="topnav">
<ul>
<li>Item</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</header>
so when a user clicks box1 menu item on the left class navigation menu, the for instance - 'Item'/'Item2'/'Item3' list item updates to lets say "NewItemName"/"NewItemName2"/"NewItemName3"
example codepen:
http://codepen.io/anon/pen/Epiom
edit:
I am trying to change the li's of (item,item2,item3) with new ones when you click the side bars navigation buttons. ex, when you click settings the 3 top buttons(top nav li's) would change to profile settings, video settings, sound settings (these names are made up and not in the code)
Check this fiddle whose code is also below and tell me if it is what you want
<body>
<header class="topnav">
<ul>
<li>Item
</li>
<li>Item2
</li>
<li>Item3
</li>
</ul>
</header>
<nav class="left">
<ul>
<li>box</li>
<li>otherbox</li>
</ul>
</nav>
<script>
$(function()
{
$(".left li").click(function()
{
var box = $(this).html();
$( ".topnav li a" ).each(function( index )
{
$(this).html("New" + box + "_" + index)
});
});
});
</script>
</body>
EDIT:
http://codepen.io/zen_coder/pen/beCKf
This code uses Jquery
Click on the right boxes and item menu will change
I had to remove the links href="" because unless the href starts with '#' and points inside the current page clicking the link makes you leave the page!
If you are just starting front end development you may want to have a look at:
http://www.w3schools.com/
http://jquery.com/
http://jqueryui.com/
http://getbootstrap.com/
Building a website for a client but only for the mainpage I need to get a class on the main div for css purposes. For this I am trying to look for an active class on menu item for home, and if it has the active class, then add a different class to the main webpage's div.
so far i cant get much further then this:
<script>
$(document).ready(function() {
if $('li.level1.item101').hasClass('active');
$('#main').addClass('woodwork');}
});
</script>
the html involved for this (the li item) looks like this when active with the div somewhere down below in the page itself
<li class="level1 item101 active current"> </li>
<li class="level1 item102"> </li>
<div id="main"> </div>
my current code doesn't seem to be able to grab either the active li or the div, any help would be greatly appreciated
First of all, you have some errors with your code, the html should be:
<li class="level1 item101 active current"> active</li>
<li class="level1 item102"> second</li>
<div id="main"> main </div>
and the javascript:
$(document).ready(function(){
if ( $('li.level1.item101').hasClass('active') ) {
$('#main').addClass('woodwork');
}
});
Here is a working fiddle
If this is your HTML
<ul>
<li class="level1 item101 active current"> </li>
<li class="level1 item102"> </li>
</ul>
<div id="main"> </div>
The JavaScript should look like this
$(document).ready(function(){
if ($('li.item101').hasClass('active'))
$('#main').addClass('woodwork');
});
Here I just look if the Listelement with the class item101 has the class active, if it is so I give the div-Tag with the ID main the class woodwork
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 created menu using fg.menu.js once its loaded I want to remove the unwanted menu for which user dont have access.
for eg:-
<ul>
<li> menu1
<ul>
<li id="8000610">Test1
</li>
<li id="20247">Test2
</li>
<li id="8000526">Test3
</li>
</ul>
</li>
</ul>
Now after loading the menu I want to remove the Test2
Thanks in advance
If you use jQuery, it's as simple as $('#20247').remove();
With vanilla JS it's
element = document.getElementById("element-id");
element.parentNode.removeChild(element);
Also, use search.