I have a link in breadcrumb Home> Media > News
Home is linked to Home, Media is not a page but just a parent category which has sub page such as News , Gallery etc...
so in breadcrumb since Media is just a parent category but not an actual page i want cursor to be pointer but not hand.
Below code for example which is is jQuery changes the cursor to pointer and if i test with color then it change color to green for first two item.
Can i achive same with CSS or how i can correct this using jquery
<ul class="breadcrumb">
<li>Home</li>
<li>Media</li>
<li class="active"> News</li>
</ul>
$('a[href*="#"]').each(function() {
$(".breadcrumb > li > a").css('color','green');
//$(".breadcrumb > li > a").css('cursor','pointer');
});
http://jsfiddle.net/Lc5ywaq2/2/
As your CSS currently has
.breadcrumb li a {
color:red;
}
You'll want to add
.breadcrumb li a[href^="#"] {
color:green;
}
note: your jquery looks for # anywhere in the href, but you should be looking for # as the first character, that's what [href^="#"] does as opposed to [href*="#"]
Related
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 have tried for months to find away of connecting my menu, but frustratingly I've had no luck. I don't know what else I can try so I want to ask you guys if you can help. I searched around here on Stack for an idea, this someway to describe the function I want but I'd like to utilise the data-attribute way instead of href and I want to use the on click function instead of the hover, as it's for desktop and mobile. I also want to close the submenu with the menu a on desktop version, would toggle be an option?
link: jquery dropdown with separate container
html
<div class="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<div class="submenu">
<ul>
<li class="one">content1</li>
<li class="two">content2</li>
<li class="three">content3</li>
</ul>
</div>
content from submenu ul li is set to height:0 that I want to set to auto when triggered, or maybe add a class to the submenu ul li:
.submenu ul li{
display:block;
overflow:hidden;
height:0;
.submenu ul li.active{
height:auto;
}
JS Fiddle
I'm not sure if this is what you want, but try replacing
$(this).attr('data-section').slice(1)
with this
$(this).attr('data-section')
jsfiddle (based in yours)
Just remove the .slice(1). I don't know why you add this one.
when you click on the menu link, jquery will remove active class from list and it will added to a new link related to menu link by data-section.
I recently saw a very interesting effect I would like to create in a navbar for a website. The effect was a hover effect, used for links in a menu list. Instead of the typical "change the link when you hover over it" , it changes every OTHER link BESIDES the one you are hovering. In the example I saw when you hover over one link in the list, it applied an opacity fade to all the other links, leaving the link you are hovering over at full opacity.
now i've tried some css things that ive looked up, something like this:
.menu-link:a + .menu-link {opacity: 0.7;}
...but that only achieved the effect for the link next to it , not all links with the same class. I'm assuming this can be achieved with javascript but im such a noob I cannot figure it out.
So could anyone help me figure out how to code up a quick function like this in either jquery or javascript? something that looks for a hover on an object with a specific class and then having an effect (such as lowering opacity) performed on all other objects with that class? Thanks for any help!
EDIT: okay i was asked to provide some code. this is the "menu of links" i have been working on, the are just a series of unordered lists that show up in a header div at the top of the page:
<div class="col-lg-2 col-md-2 menu-border">
<div class="menu-list">
<h4 class="list-title">Blog</h4>
<ul>
<li><a class="menu-link" href="#">Archive</a></li>
<li><a class="menu-link" href="#">Search</a></li>
<li><a class="menu-link" href="#">Tag Cloud</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 menu-border">
<div class="menu-list">
<h4 class="list-title">Profile</h4>
<ul>
<li><a class="menu-link" href="#">Artist Profiles</a></li>
<li><a class="menu-link" href="#">Submit A Profile</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 menu-border">
<div class="menu-list">
<h4 class="list-title">Connect</h4>
<ul>
<li><a class="menu-link" href="#">SoundCloud</a></li>
<li><a class="menu-link" href="#">linkedIN</a></li>
</ul>
</div>
</div>
they are just a few sub menus; however i have given all the links in all the sub menus a class ("menu-link") and I'm trying to figure out how to make a function that when hovering over one link with the "menu-link" class, all other links with that class do something (in my particular case i want them to fade to a > 1 opacity )
Using jQuery, you could do something like this:
jQuery
$('a.menu-link').hover(function(){
$('a.menu-link').not(this).toggleClass('toggle');
})
CSS
.toggle {
opacity: 0.7;
}
Here is a fiddle of it in action: http://jsfiddle.net/HMq67/
Using toggleClass() and not() you can change the style of every element that is not the one you are hovering over.
Give this jsFiddle a try. If nothing else, it should get you going.
In essence, you will need javascript to listen for the mousover and mouseout events. Then select all elements except the one you are currently hovering over.
$('nav li a').mouseover(function () {
$('nav li a').not($(this)).addClass('hover');
});
$('nav li a').mouseout(function () {
$('nav li a').not($(this)).removeClass('hover');
});
4 years later...lol.
You can achieve this with simple CSS!
For the code you provided above it would look like this:
.menu-list ul:hover .menu-link {
opacity: 0.7;
}
.menu-list ul:hover .menu-link:hover {
opacity: 1;
}
.menu-list ul li a {
display: block;
}
Fiddle: https://jsfiddle.net/fz6bumxx/6/
Note - I'm setting the a tags within each list items to block so that you can't trigger the link fades without hovering over one of the links.
Hope this helps!
What I'm trying to do is putting content of "|" after each first level anchor tag "which is the main menu not the sub-menu" follow #menuCont but exclude the last child.
tried to do it with CSS then I had unexpected result, then tried with jQuery and I had another unexpected result.
Main page menu HTML
<div id="menuCont">
<ul>
<li>
About
<ul>
<li>Vision</li>
<li>Mission</li>
<li>Values</li>
</ul>
</li>
<li>News</li>
<li>Gallery</li>
<li>Activities</li>
<li>Facilities</li>
<li>Students</li>
<li>Staff</li>
<li>Contact info</li>
</ul>
</div>
Another page menu HTML
<div id="menuCont">
<ul>
<li>Home</li>
<li>
Static pages
<ul>
<li>Homepage</li>
<li>Vision</li>
<li>Mission</li>
<li>Values</li>
<li>Contact info</li>
</ul>
</li>
<li>
Dynamic pages
<ul>
<li>News</li>
<li>Gallery</li>
<li>Videos</li>
</ul>
</li>
<li>
Administration
<ul>
<li>Create accounts</li>
<li>Edit accounts</li>
<li>Assign Students</li>
<li>Assign teachers</li>
</ul>
</li>
</ul>
</div>
CSS Controlers
CSS approch
#menuCont ul li a:after {content:"|"; font-size:30px; color:#FFF !important; font-weight:bold; color:#044c9e; margin:15px 5px;}
#menuCont ul li a:last-child:after {content:"" !important;}
CSS Approch for jQuery
#menuCont ul li a.conAfter:after {content:"|"; font-size:30px; color:#FFF !important; font-weight:bold; color:#044c9e; margin:15px 5px;}
jQuery code
$("#menuCont").children().children().children("a:not(:last-child)").addClass("conAfter")
The unexpected results in reflect of the CSS approch:
"Main page"
From Ie = it just selects all of the anchor tags and add the content to them and totally ignored where I ask to remove the content from last child.
From Ff,Gc,Sf,Op = I get the same from all of them, which is they select only first child and add the content to it.
"The other page"
From Ie = it just selects all of the anchor tags and add the content to them and totally ignored where I ask to remove the content from last child.
-This is different-From Ff,Gc,Sf,Op = I get the same from all of them, they add the content to all of the elements except the first anchor tag.
The unexpected results in reflect of the jQuery approch:
"Main page"
From Ie,Ff,Gc,Sf,Op = I get the same from all of them, which is they select only first child and add the content to it.
"The other page"
From Ie,Ff,Gc,Sf,Op = I get the same from all of them, they add the content to all of the elements except the first anchor tag.
Thanks all.
Thanks to #charlietfl I managed to reach a neutral state.
I will emphasis the solution in case somebody reaches that post with the same problem.
To get only the first level of children I need to use CSS child selector ">" start from the ancestor to the parent to the child if you get what I mean, that will give me an exact and specific selection.
And the other problem I didn’t notice that I’m calling the last child of the anchor tag instead of calling the anchor tag itself < a >, by calling the last child of < li > which is a, I got what I wanted.
Yet, IE8 didn’t understand that line, but all of the other browsers get it quiet good.
Good luck all!
If use > will denote children only
#menuCont > ul > li >a:after {content:"|";padding:0 10px; color:red;font-weight:bold ; }
#menuCont > ul> li:last-child >a:after {content:"" !important;}
Also note looking for <a> of last child <li>
DEMO
couple thing i see are the color is making the link invisible if you have a white background, but the underline needs text:decoration:none;
is this fiddle here what you are after?
http://jsfiddle.net/MV2dn/2/
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