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
Related
I am working on a code where an active class is added to a div via JS.
What I would like to do is, when that div has active class, hide another div. But, due to the active class was added via JS, this code doesn't work:
if($("#section3").hasClass("active")) {
$(".menu").fadeOut("fast");
}
I think I would need to use the on function: .on()
Something like this, but it's not working... Any ideas?
$("#section3").on( function() {
$(this).hasClass('active') {
$(".menu").fadeOut("fast");
}
});
EDITED:
I'm afraid I cannot paste the code because I am using a plugin. This is the one that I am using, so you can see the functionality there.
I've added this bullet menu to it:
<ul id="menu">
<li data-menuanchor="slide1"><span></span></li>
<li data-menuanchor="slide2"><span></span></li>
<li data-menuanchor="slide3"><span></span></li>
<li data-menuanchor="slide4"><span></span></li>
</ul>
Each slide has a active class when it's on viewport, so what I would like to achieve is when the last slider is active, hide the menu
$(document).ready(function(){
$('section').click(function(){
$(this).addClass('active');
if($('section').hasClass('active')){
$('ul#menu').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>check</section>
<ul id="menu">
<li data-menuanchor="slide1"><span></span></li>
<li data-menuanchor="slide2"><span></span></li>
<li data-menuanchor="slide3"><span></span></li>
<li data-menuanchor="slide4"><span></span></li>
</ul>
oth the section and the li have active classes so you could use something like this or use the afterSlideLoad event if it is depeding of the slideshow
$(window).on("scroll",function() {
if ($('#menu li:last-child').hasClass("active")) {
("#menu").fadeOut("fast")
}
})
or you can use slideIndex to check if you are on the last slide. see here > afterSlideLoad
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");
});
});
I am quite new to everything about html/js/css. Right now i need a list so i decided to use a list that u can slidetoggle. I looked it up and found how to recreate that effect (the code below):
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer ul li").filter(":has(ul)");
linkClick.click(function () {
$(this).find('ul li').slideToggle(200);
});
(if you are wondering about the 2 ul and li, it is because i want that list in another list, but that doesn t change the question so i didn t include it in my explanation)
Since i am quite new to this topic, i only understand like 70% of what is happening. But for my project i need to work with the elements of the list(the ones which were hidden and after sliding down visible). I want to do stuff that requires clicking them like highlight on click, but now i encounter the problem, that the code i posted makes the slide effect being triggered not only by the headline, but also by the elements. So i cannot click elements without minimizing the list with the same click (obviously the elements are hidden again then). I hope you guys can explain me how to make the function only be triggered by the head object and not by the whole list element(head and the expanded list).
Look the slide effect is being triggered not only by the headline but also by the elements that are because the concept of event bubbling which basically means in case of click event if you clicked a child element the event is bubbled by default to the parent elements tree till the document level firing any registered event handler. so when you click the element you click the headline too, so you need to add another child element and handle the click on it something like this:-
<div class="tableContainer">
<ul>
<li> <span>menu 1</span>
<ul>
<li>link 1</li>
</ul>
</li>
<li><span> menu 2</span>
<ul>
<li>link 2</li>
</ul>
</li>
<li><span> menu 3</span>
<ul>
<li>link 3</li>
</ul>
</li>
<li> <span>menu 4</span>
<ul>
<li>link 4</li>
</ul>
</li>
</ul>
</div>
$(function() {
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer span");
console.log(linkClick.length);
linkClick.click(function() {
console.log('clicked');
$(this).siblings('ul').slideToggle(200);
});
});
Full Working Example Here
Hope this answers your question.
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/
Please see the below code i have for my main menu on my website.
I want to add a data-toggle to the link tag for the dropdown but when the li doesnt contain ul I dont want the data-toggle added to the a tag. Would jquery be able to do this?
I am using bootstrap for this but in my menu I have menu links with no dropdown and the link url i add doesnt work as its expecting a dropdown to appear, if there a way around this?
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw">
Menu 1
<ul class="dropdown-menu">
<li>Menu Item</li>
</ul>
</li>
<li class="dropdown yamm-fw">
Menu 2
</li>
<li class="dropdown yamm-fw">
Menu 3
</li>
<li class="dropdown yamm-fw">
Menu 4
</li>
<li class="dropdown yamm-fw">
Menu 5
</li>
</ul>
Try this:
$('.dropdown').each(function() {
if ($(this).find('UL').length === 0) {
$(this).find('A').data('toggle', true);
}
});
This is better, any li inside the ul.nav that has a child ul will have data-toggle added.
$("ul.nav li ul").parent().attr("data-toggle","")
You could also use the :has selector
$(function() {
$(".dropdown:has(ul) a").attr("data-toggle", /*value here*/);
});
Both answers are correct, this is just another option using the :has selector. It's also a one-liner :)
$("ul.nav > li:has(ul) a").attr("data-toggle","");