I made a menu and want to keep a pressed button a different color. I.E. If I am at the menu page, the menu button of the menu will be blue.
I have read some online guides about menus and ended up with the following:
<div id="menu">
<ul>
<li>
<a href="/index.php" >home</a>
</li>
<li>
<a href="/search.php" >search</a>
</li>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul></div>
And the CSS would be something like this:
#menu ul li a.selected{
background:blue;
color:#000;
}
Of course every LI has height and stuff so that it has some color. The question is how can I tell the HTML that a button is selected? The HTML attribute or something?
And another dilemma that I have is how best to change these selected? I can check the address using PHP and change the selected according to it. Any suggestions how to best do it?
You could go with :
<li>
<a href="/search.php"
<?php
if(strstr($_SERVER["REQUEST_URI"], "YOURPATH/index.php"))
echo "class='selected'";
?>
> Home </a>
</li>
or using the Javascript equivalent "document.URL".
Might not be the cleanest solution but should do the thing.
for a use a:visited in css. it will be aplicated only if the link was used before
You can use a:visited and a:active in css.
It becomes active when you click on it. It becomes visited if you have visited it before.
If you want to manipulate buttons, you might consider using JavaScript (preferably jQuery), then you can easily change element attributes based on actions (e.g. onclick).
Try :active and :focus
#menu ul li a:active,#menu ul li a:focus{
background:blue;
color:#000;
}
Related
I have the following problem:
I have a ul with blue list item text and a blue custom bullet. Now if the user clicks a li the text should be black and the custom bullet as well.
The text is easy to change, but i don't know how i could do it, that the custom bullet also stays black.
When the user hovers trough the menu the custom bullets and the text turns black. This is already working. But if the user is on a page, as soon he leaves the hover area the bullets turn blue again. This shoud not be the case.
Here is what i have already:
<ul class="listMenuItem--s">
<li class="listMenuChild">
Dienstleistungen
<ul class="sub-nav">
<li>Treuhand & Finanzen </li>
<li>Wirtschaftsprüfung</li>
<li>Unternehmensberatung / Nachfolge</li>
<li>Pensionierungs-, Vorsorge- und Steuerplanung</li>
<li>Informatik</li>
</ul>
</li>
<li class="listMenuChild">
Über uns
</li>
<li class="listMenuChild">
Publikationen
</li>
<li class="listMenuChild">
Hilfsmittel
</li>
<li class="listMenuChild">
Kontakt / Lageplan </li>
</ul>
And here the CSS.
.listMenuChild {
list-style-image: url("../img/bg_li.png");
margin-top: 5%;
}
.listMenuChild:active {
list-style-image: url("../img/bg_li_h.png");
}
.listMenuChild:hover {
list-style-image: url("../img/bg_li_h.png");
}
Is it because :active and :hover don't work together?
Any help much appreciated
:active means "While being clicked on or otherwise activated" (e.g. a focusable element would also be activated while you press the Enter key when it has a focus). Note while, not after.
It doesn't seem to have any effect for you because you never activated it without also hovering it (and your hover rule comes after the active rule).
It sounds like when you say "When the list item is active" you mean "When the link inside the list item has an href attribute that resolves to the URL of the current page". That isn't something you can express with CSS.
Use server side code to add a class to the list item based on the page you are loading and target that class with CSS.
If you have an :active class on a non-focussable item like <li>, it works only during mousedown. If you need to make it work without :hover, make it focussable using tabindex.
<li class="listMenuChild" tabindex="0">
The above code is only for it to stay. i.e., Currently the browser applies :active for only mousedown event. So that occurs only when you are having both :hover:active pseudo class:
.listMenuChild:hover:active {backgkround: #999;}
As you are using pages for each item you could create another class, add it to the list item for each page where that list item is to be highlighted for that page:
.listMenuChild {
list-style-image: url("../img/bg_li.png");
margin-top: 5%;
}
.listMenuChildActive {
list-style-image: url("../img/bg_li_h.png");
}
.listMenuChild:hover {
list-style-image: url("../img/bg_li_h.png");
}
HTML example:
<ul class="listMenuItem--s">
<li class="listMenuChildActive">
Dienstleistungen
<ul class="sub-nav">
<li>Treuhand & Finanzen </li>
<li>Wirtschaftsprüfung</li>
<li>Unternehmensberatung / Nachfolge</li>
<li>Pensionierungs-, Vorsorge- und Steuerplanung</li>
<li>Informatik</li>
</ul>
</li>
<li class="listMenuChild">
Über uns
</li>
<li class="listMenuChild">
Publikationen
</li>
<li class="listMenuChild">
Hilfsmittel
</li>
<li class="listMenuChild">
Kontakt / Lageplan </li>
</ul>
Try swapping these two lines:
.listMenuChild:hover {
list-style-image: url("../img/bg_li_h.png");
}
.listMenuChild:active {
list-style-image: url("../img/bg_li_h.png");
}
Remember this mnemonic phrase:
LoVe and H Ate
The 4 pseudo-selectors:
a:link // **L**ove
a:visited // Lo**V**e
a:hover // **H**ate
a:active // H**A**te
If they are not in that specific order, they probably will not work correctly.
https://css-tricks.com/remember-selectors-with-love-and-hate/
I've been looking a lot at this problem, but I can't find the bug hiding. Somehow it's overlapping, and I can't get the second menu to show up.
#menu > ul > li.has-dropdown = first
#menu > ul > li.has-dropdown > ul > li.has-dropdown = second
now #menu > ul > li.has-dropdown > ul > li.has-dropdown > ul shows up, but with no text, all transparent, I can't get it to show somehow.
Website link :
http://rscomposites.101-odense.dk/
Remove "overflow:hidden" from ul.dropdown and it will show. Just use the developer panel in your browser (F12) and you will find things like this.
By the way, there are several existing drop down menus on the internet you can use and just apply your style to it without having to deal with problems like this.
I like to use this method:
<ul>
<li>
<a href=''>First</a>
<ul>
<li>
<a href=''>Dropdown</a>
</li>
</ul>
</li>
<ul>
CSS:
ul{list-style-type:none;padding:0px;margin:0px;}
ul>li>ul{display:none;position:absolute;}
ul>li:hover>ul{display:block;}
I've managed to put a great looking menu togheter!`
<li class="huvudmenu">Framsida</li>
<li class="huvudmenu">
<a>Om oss</a>
<ul>
<li>Styrelsen</li>
<li>Historik</li>
<li>Stadgar</li>
<li>Topeliuspriset</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li class="huvudmenu">Verksamhet
<ul>
<li>Hangö seminariet</li>
<li>Årsberättelser</li>
</ul>
</li>
<li class="huvudmenu">Estholmen</li>
<li class="huvudmenu">Bli medlem</li>
`http://jsfiddle.net/hx6uvc19/ The setup I have does not, unfortunatley, work very well on touch screen devices. Is there any way I can keep the design while making it touch screen compatible?
Thanks!
You can not use the :hover pseudo class on mobile. In order to get this effect you can use JQuery as stated by #jbutler483 in the comments.
If you wanted to do this you could do it by adding an .active class to the main li's (By using the class .huvudmenu) on click/touchstart and add this to the css where you have your hover styles as well.
This is the JQuery:
$('.huvudmenu').on('click touchstart', function(e){
e.preventDefault();
$(this).toggleClass('active').siblings().removeClass('active');
});
and the styles to add are:
nav ul li.active > ul {
display: block;
}
and
nav ul li.active:after {
width: 100%;
background: #404040;
}
this will then allow the styles on click and touchstart events. If you wanted this to only run on mobile you could just remove the click and use touchstart events and/or put some kind of detection that this is a mobile device before initialising the JQuery function.
Here is an update to your fiddle: http://jsfiddle.net/lee_gladding/hx6uvc19/3/
Anchor element always coming blue, How to change it to red in aspx page.
I am trying this :
<ul style="color:Red">
<li style="COLOR:red" text-decoration: underline;> Internal Job Openings </li>
</ul>
But NO LUCK, it is always showing BLUE
Your style needs to be on the anchor tag not the li tag.
<ul style="color:red">
<li style="text-decoration: underline;"> <a style="color:red;" href="jobs.aspx"> Internal Job Openings </a> </li>
</ul>
Also you should not have "color" in all caps. Everything in styles should be lowercase.
try to style the anchor states:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
for example:
a:link {
color: red;
}
I'm working on an e-mail signature (so obviously I don't have an attached .css stylesheet) is there any way to set a link's hover / active color (maybe within the tag?)
Thanks for taking the time to answer :)
Tombs
Duplicate here:
How to write a:hover in inline CSS?
You can't do so within HTML as active and hover are CSS selectors and not attributes. So although you could set the height and width of an object in HTML, you would have to use CSS to use the active and hover selectors.
Like such
HTML
<ul>
<li><a class="links" href="#"> Link1 </a></li>
<li><a class="links" href="#"> Link2 </a></li>
<li><a class="links" href="#"> Link3 </a></li>
</ul>
CSS
ul il a.links:hover{
color: blue;
}
ul il a.links:hover{
color: royalblue;
}
Half of the mail clients do not support this functionality.
See: http://www.campaignmonitor.com/css/
you may only be able to style the active color, with this being a recommended approach
<span style="color:#ff00ff">this is a link</span>
style the <a> tag as well as wrap it in a similar color style <span> tag for reinforcement.
you wont be able to style a hover state with in-line css unfortunately.
source:
http://24ways.org/2009/rock-solid-html-emails/
Try using
<h1 style="---">
like
<h1 style="color:red">hi</h1>