CSS
#myMenu ul li {
display: inline;
}
#myMenu ul li a {
background-color:#333333;
text-transform: uppercase;
font-weight: bold;
font-family:"Open Sans", Arial, sans-serif;
font-size:12px;
text-decoration: none;
padding: 1em 2em;
color: #000000;
border-left:1px solid #333333;
border-right:1px solid #333333;
border-top:1px solid #333333;
}
#myMenu ul li a:hover {
color: #fff;
background-color: #999999;
}
.selection {
background-color: #000000;
border-bottom:10px solid #000000;
border-top:9px solid #000000;
}
HTML
<div align="right" id="myMenu">
<ul>
<li>Structure</li>
<li id="style">Style</li>
<li>Details</li>
</ul>
JavaScript
$(function () {
$("li:first-child").addClass("selection");
$('li').click(function () {
$('#myMenu li').removeClass('selection');
$(this).addClass('selection');
});
});
I want to add black colour to selected items background, but the above code is not working.
If I remove background-color:#333333 from #myMenu ul li a it works.
There are a couple of issues here.
You have tied your click handler to li so the context will be the li element
Your background color is set on the anchor: #myMenu ul li a initially
Assuming you want .selection to apply to the anchor tag, it has less specificity than the class for the anchor.
Change your code and CSS to:
CSS:
#myMenu ul li a.selection {
background-color: #000000;
border-bottom:10px solid #000000;
border-top:9px solid #000000;
}
Code:
$(function () {
$("li:first-child").addClass("selection");
// Or move your handler to the anchor rather than the list item
$('li').click(function () {
$('#myMenu li a').removeClass('selection');
$(this).find('a').addClass('selection');
});
});
Demo Fiddle
You are adding the background color via CSS to the <a> element. You are targeting the <li> element with your jQuery. For all you know, the jQuery could be working properly, but you can't see it because the <a> element has a background color.
Try changing the jQuery to target the <a> element instead. Be sure to return false or use preventDefault() when targeting the <a> element.
Also, as a side note, unless you have something else going on which I don't know about, it would be more efficient just hard code the selection class to the first element instead of targeting it with jQuery. Just a tip.
Also to add to Chris's answer...the css for #myMenu ul li a will always outweigh the .selection because it is has more specificity. You will need to add !important to any styles in .selection if you want them to override the styles in #myMenu ul li a
Generally although jQuery does auto selection automatically I personally like to handle it myself, just because then I know my code is "selecting" what I want.
So Like this:
$(function () {
$("li:first-child").addClass("selection");
$('li').each(function(){ //loop all li elements
$(this).click(function () {
$('#myMenu li.selection').removeClass('selection'); //select the li
// with the selection class
$(this).addClass('selection');
});
});
});
But basically an issue I see with how you did it is there is no margin on you anchor, or padding on your li, witch could make the changes to the li invisible.
Used with the following it should tell you if this works
.selection{
background-color: #000000;
border-bottom:10px solid #000000;
border-top:9px solid #000000;
padding:5px; //change to suit your needs
}
Related
I have this:
<section class="header">
<div class="holder">
<span class="name">Joe Doe</span>
<nav class="">
<ul class="">
<li>Do Something</li>
<li>Do Something Else</li>
<li>Who knows</li>
</ul>
</nav>
</div>
</section>
My script to target that and add class.
$(document).ready(function(){
$(".header nav ul li a").click(function(e){
$(this).addClass('active');
});
)};
Update Css:
.header nav ul li a{
font-size: 15px;
text-transform: uppercase;
color: #959393;
text-decoration: none;
}
.header nav ul li a:hover{
color: #fff;
}
.active{
color: red;
}
The problem:
When I click on the link, it does get the red color, but it instantly change back to the original color and the link still with the class, maybe because the page is reloading or something ?.
I can't use preventDefault() because I need those links to behave as links.
If it gets red when you add !important, your problem can be fixed when you understand css specificity
Check the image below.
a is less specific. #whatever #whatever is more specific and wins.
You can do this with straight-up CSS - no js/jQuery needed. Also, as long as you follow the same specificity, there's no need to append your CSS with !important.
.header nav ul li a{
font-size: 15px;
text-transform: uppercase;
color: #959393;
text-decoration: none;
}
.header nav ul li a:hover{
color: #fff;
}
.header nav ul li a:visited{
color: red;
}
.header nav ul li a:active{
color: red;
}
If the page is reloading, your page is losing the state and the class added by the click will be lost.
To get around that, you have to maintain the state of the page somehow.
One way would be to use sessionStorage and you will need ids for these links.
$(document).ready(function(){
//reapply current active link (if found)
if (!!sessionStorage.activeLink) {
$("#" + sessionStorage.activeLink).addClass('active');
}
$(".header nav ul li a").click(function(e){
//keep track of which link was clicked.
sessionStorage.activeLink = $(this).prop("id");
$(this).addClass('active');
});
)};
Currently im using <li> to display href link, the problem is when i click on the so called 'box'it wont direct link to another page, i have to click on href link it will just link to another page. How can i make it like whenever i click on box / href link it will direct link to another page?
My current progress : Fiddle Demo
Any help will be appreciated.
You can't make an <li> act like an <a>, but you can match their sizes.
Updated Fiddle
#colOne ul li
{
margin-bottom:10px;
/*padding: 4px 10px;*/
width:170px;
}
#colOne ul li a
{
padding: 4px 10px;
display: block;
}
By making the link a block element and moving the padding to it, instead of its wrapper, it will be exactly the same size as the <li>
You should be adding the padding to the anchor elements (<a>) instead of the list items <li>. This effectively increases the area of the link itself, instead of the area around the link.
First, get rid of the padding for the list item (the attributes I commented out):
#colOne ul li
{
margin-bottom:10px;
/*padding: 4px 10px;*/
width:150px;
}
li {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
/*position: relative; */
/*display:block; */
text-align: center;
font-weight:bold;
box-shadow: 1px 3px 3px #000;
background: #7EB427;
cursor: pointer;
transition: all 0.2s;
}
Then, add it to the link:
.bg1 li a {
display: block;
padding: 4px 10px;
}
Updated jsFiddle
This is my first time asking anything but I'm stuck and I hope i explain clearly what I'm trying.
I have a nav menu that if a link is clicked it (that choice) moves to the far left spot of the menu. Whatever menu option is clicked and in the far left spot i just want the font larger and the color Orange. The next option that clicked needs to go in the left spot and have its font larger and color Orange while the other options go back to small and white.
I'd also like the remaining menu options to stay in the same order that they start in if they are not the choice in that far left spot. I want my sub-menu's to eventually look and work the same way.
Here is my code:
HTML:
<div>
<ul id="main-top">
<li id="blank"><a href="#" ></a></li>
<li>Projects</li>
<li>Services</li>
<li>Contact</li>
<li>Sign-in</li>
</ul>
</div>
CSS:
body {
background: black;
color: white;
}
#main-top {
position: absolute;
top: 75px;
border-top: 1px solid #ffffff;
width: 850px;
}
#main-top li{
display: inline;
list-style-type:none;
padding-right: 20px;
padding-bottom: 16px;
border-right: 1px solid #ffffff;
height: 50px;
}
a {
color: white;
font-size: 1em;
padding: 10px 75px 5px 3px;
text-decoration: none;
list-style-type: none;
}
a:hover{
color: #FF4500;
}
jQuery:
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$('#blank').hide();
});
demo: http://jsfiddle.net/CLTZs/
I've tried just adding a function to alter the css of the first-child, but it targets that blank spot and not what goes into it.
You could addClass within your function
DEMO http://jsfiddle.net/CLTZs/1/
jQuery
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$this.addClass('firstOpt');
$('#blank').hide();
});
CSS
#main-top li.firstOpt a {
color: #FF4500;
font-size: 25px;
font-weight: bold;
}
Just so i don't leave this question out there not fully answered - I was able to get the desired effect by using your suggestion #Vector and adding a little bit to get the li's back to original look:
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$this.toggleClass('active');
$this.siblings().removeClass("active");
$('#blank').hide();
});
and adding the class "active" to my CSS:
.active a{
color: #FF4500;
font-size: 25px;
font-weight: bold;
margin: 0;
}
Since i have other jquery toggles going on with those menu options, I was able to insert that jquery right into my existing function and it work fine. For some reason it throws off my spacing on the rest of the list, but I'll have to figure that out in my css files.
fiddle: http://jsfiddle.net/CLTZs/2/
Okay. I can't really explain this so I just made a fiddle.
So click here
And the code looks something like this:
HTML:
Hover Me!<span class="tooltip">Hello, World!</span><br>
Hover This!<span class="tooltip">Hello, People!</span>
CSS:
a span {
display: none;
position: absolute;
color: #fff;
background: #000;
padding: 5px;
}
a {
position: relative;
}
a:hover span {
display:block;
text-align: center;
}
Also I got some more <a> css, but I don't think this is the problem..
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:none;
}
a:active {
text-decoration:none;
}
If you hover the first text, the box that appears won't cover the second text.
Basically the text is always the first and the box goes under it.
How do I fix this? It's very important or else my design won't work.
Thanks a lot.
Add a large z-index style, these determine the layer of the html object.
Hover Me!<span class="tooltip">Hello, World!</span><br>
Hover This!<span class="tooltip">Hello, People!</span>
I found a menu sample, and want to use it in my site. When mouse enter menu item, its style changes, but when mouse leave menu item, its style is as previous style. User doesn't see which menu item is selected.
It is css code part:
.navigation ul#topnav li{
width:auto;
float:left;
padding:0;
position:relative;
}
.navigation ul#topnav li a{
color:#fff;
background-color:inherit;
padding:0 7px;
text-align:center;
display:block;
border-left:5px solid transparent !important;
border-right:5px solid transparent !important;
position: relative;
z-index: 50;
}
.navigation ul#topnav li a:hover{
color:#824d97;
background-color:inherit;
background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important;
border-left:5px solid #6c1b93 !important;
border-right:5px solid #6c1b93 !important;
}
I want when mouse leave menu item after click, its style to be shown as hover, and user see which item is selected.
Update your third CSS selector to something like:
.navigation ul#topnav li a:hover, .navigation ul#topnav li a.selected {
...so that those settings apply both to the <a> being hovered over and any <a> with the class "selected". Or if you want the clicked link to have some variation on the hover styles add .navigation ul#topnav li a.selected { as a separate entry.
Then in your JS code when a link is clicked you add the "selected" class to it and remove the class from any others:
$("#topnav li a").click(function() {
// whatever else you do on click, then
$(this).addClass("selected");
$("#topnav li a").not(this).removeClass("selected");
});
EDIT: Place that code in a $(document).ready() handler or in a script block at the end of the page.
Working demo: http://jsfiddle.net/VFJ7c/
Note: I was assuming (and I think the other answers assumed) that your menu was loading content via Ajax or showing and hiding existing content. If your menu has standard links that reload the entire page then this won't work and you'll need to either apply the "selected" class to the appropriate link in your server-side code or otherwise do it on DOM-ready rather than on click.
since you're using Jquery you can do the following:
$(function(){
$('.navigation ul#topnav li a').hover(
function(){
//remove the active class from all links on mouseover
$('.navigation ul#topnav li a').removeClass('.active');
},
function(){
//add active class to current link on mouseout
$(this).addClass('active');
}
);
});
...then add styles for the active class in your css:
.navigation ul#topnav li a.active{
/*your styles*/
}
You have to use jquery for this.
$('.links').click(function(){
$(this).addClass('clicked');
});
And then have a style for clicked links.
.clicked{
color:red;
}
You can also add a new style for the selected state:
.navigation ul#topnav li a:selected{
//Your Style Here
}
Need to add the another class and add it to the element on click.
JS
$('.navigation ul#topnav li a').click(function(){
$(this).addClass('active');
});
CSS
.navigation ul#topnav li a.active{
color:#824d97;
background-color:inherit;
background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important;
border-left:5px solid #6c1b93 !important;
border-right:5px solid #6c1b93 !important;
}
Try the below:
.navigation ul#topnav li a:visited{
color:#824d97;
background-color:inherit;
background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important;
border-left:5px solid #6c1b93 !important;
border-right:5px solid #6c1b93 !important;
}
Make javascript/jQuery code for it.
OnLoad/ready DOM
jQuery
$(".navigation ul#topnav li").click(function() {
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
CSS
.navigation ul#topnav li.selected {
background-color:#selectedcolor
}