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/
Related
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') = "#";
How can I make the below site add the active class to each anchor link based upon the fullPage.js section displayed?
Codepen: http://codepen.io/anon/pen/wJrwbq.
HTML:
<nav>
<ul id="menu">
<li>
<a>Menu</a>
<div id="dropdown">
<ul>
<li class="navLink active"><span class="navNumber">01</span>Home</li>
<li class="navLink"><span class="navNumber">02</span>About</li>
<li class="navLink"><span class="navNumber">03</span>Skills</li>
<li class="navLink"><span class="navNumber">04</span>Work</li>
<li class="navLink"><span class="navNumber">05</span>Contact</li>
</ul>
</div>
</li>
</ul>
</nav>
CSS:
.navLink > a:hover,
.navLink.active > a,
.navLink.active > a > span
{
color: #1957EF;
text-decoration: none;
}
fullPage.js provides a menu option that you can use for that as it is detailed in the documentation.
menu: (default false) A selector can be used to specify the menu to link with the sections. This way the scrolling of the sections will activate the corresponding element in the menu using the class active. This won't generate a menu but will just add the active class to the element in the given menu with the corresponding anchor links. In order to link the elements of the menu with the sections, an HTML 5 data-tag (data-menuanchor) will be needed to use with the same anchor links as used within the sections. Example:
<ul id="myMenu">
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
</ul>
In your initialization:
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
});
Notice how the value of the anchors has to be the same as the data-menuanchor. In your case it isn't. You are using about and then aboutSection.
Also note the active class will be added to your a element and not to the li one.
You need to look at scrollTop in jQuery: https://api.jquery.com/scrollTop/
In a nutshell, you need to measure the scroll position from the top of the page, and if that position is equal to a certain number, use jQuery to add the active class to the link, otherwise remove it.
There are plenty of examples of this online, I'm sure you'll be able to find something!
Try This - you can use .removeClass() and .addClass() to apply/remove class on any HTML tag.
You need to add below code in in your page
$(document).ready(function(){
$(".navLink").click(function(){
$(".navLink").removeClass("active");
$(this).addClass("active");
});
});
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 have the following jquery code for my drop down menu:
var active = 0;
$(document).ready(function(){
jQuery("#dropmenu ul").css({display:"none"});
// For 1 Level
jQuery("#dropmenu li:has(ul) a").append('');
jQuery("#dropmenu li ul a span").text('');
// For 2 Level
jQuery("#dropmenu li ul li:has(ul) a").append('');
jQuery("#dropmenu li ul li ul a span").text('');
jQuery("#dropmenu li").hover(function(){
if(active != 1){
jQuery($('.active').parent()).find("ul:first").css('display', 'none');
jQuery(this).find("ul:first").fadeIn('fast');
active = 1;
}
},
function(){
jQuery(this).find("ul:first").fadeOut('fast');
jQuery($('.active').parent()).find("ul:first").fadeIn('fast');
active = 0;
}); });
//ACTIVATE
$(document).ready(function(){
jQuery($('.active').parent()).find("ul:first").css('display', 'block');
});
What the code is suppose to do is check and see which element has an active class and show it when the page loads.
The HTML looks something like this:
<ul id="dropmenu">
<li><a class="active" href="index.php">home</a>
<ul>
<li>Euro 2012</li>
<li>FIA Cup</li>
<li>Previous Events</li>
<li>Event 2012-2013</li>
<li class="last">Pre Season</li>
</ul>
</li>
<li><a href="#" >home</a></li>
<li>blabl</li>
<li>dropdown
<ul>
<li>Euro 2012</li>
<li>FIA Cup</li>
<li>Previous Events</li>
<li>Event 2012-2013</li>
<li class="last">Pre Season</li>
</ul>
</li>
<!-- ... -->
</ul>
right now when the page loads the default drop down is shown however once you hover over other menu items if they dont have a drop down menu it shows the default one and hides, and if you quickly go over the the menu item it will keep repeating the animation. How can I avoid the repetition of the animation and how can I avoid showing the default menu when the menu is empty?
I say scrap this and look for scripts that do that, there are plenty if you just take the time to google, here is a useful link :
http://vandelaydesign.com/blog/web-development/jquery-drop-down-menus
I personally use this plugin to make dropdown menus:
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
You can do a lot with this plugin with a little help of html and css to make a row of dropdown menus... The plugin uses jQuery and jQuery UI for the design, you can custom it however you want, here is the link to the jQueryUI website if you haven't been there: http://www.jqueryui.com/themeroller
If you have some Javascript experience I'd appreciate some help.
I'm having an issue trying top create a tabbed menu that looks like the one referenced in the screenshot below.
Basically, because I need to include a full width horizontal line below the heading tab, I am unable to get the first tab to remove it's active styling once one of the other tabs is removed.
So my question is: how can I separate the first tab from the others with a full length without creating two different menus.
BTW, I am aware this is a confusing explanation and understand that I am probably doing this completely wrong, but that's why I am looking for your help :)
Here is how I am trying to do this so far:
<script>
$(document).ready(function() {
/* Tabs Activiation
================================================== */
var tabs = $('.tabs');
tabs.each(function(i) {
//Get all tabs
var tab = $(this).find('> a');
tab.click(function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
tab.removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
});
});
</script>
<!-- Tabs -->
<nav id="tab-nav" class="grid3">
<h1 class="tabs">
<a class="active" href="#tab1">Tab 1 (H1)</a>
</h1>
</nav>
<hr />
<!-- Tabs -->
<nav id="tab-nav" class="grid3">
<div class="tabs">
Tab 2
Tab 3
</div>
</nav>
<!-- Tab Content -->
<ul class="tabs-content grid6">
<li class="active" id="tab1">Tab 1 Content</li>
<li id="tab2">Tab 4 Content</li>
<li id="tab3">Tab3 Content</li>
</ul>
So I made a working model... uses jQuery but not hash tags
http://jsfiddle.net/nenvG/31/
I think it's easier to add content to, wouldn't need to rearrange the html for each of the elements.