I'm trying to set the color of a span box to red when I ':focus' on a link. The span changes color on ':active', but nothing seems to happen when I use ':focus'. The categories will output different types of products on click using angular. At the moment, when I click on one of the filters there is no indication that one of the categories has been activated, heavily impacting the UX. I'm hoping to do this with html and css only if possible.
<div class="checklist categories">
<ul>
<li><a><span></span>All</a></li>
<li><a><span></span>House Favourites</a></li>
</ul>
</div>
.checklist ul li{
font-size:14px;
font-weight:400;
list-style:none;
padding: 7px 0 7px 23px;
cursor: pointer;
}
.checklist li span{
float:left;
width:11px;
height:11px;
margin-left:-23px;
margin-top:4px;
border: 1px solid #d1d3d7;
position:relative;
}
.checklist li a{
color:#676a74;
text-decoration:none;
}
.checklist li a:hover{
color:#222;
}
.categories a:hover span{
border-color:#a6aab3;
}
.checklist .checked span{
border-color:#8d939f;
}
.checklist a:active span {
background-color: red;
}
// This code below is the issue as :focus seems to do nothing
.checklist a:focus span {
background-color: red;
}
I was given a solution for this using Angular and typescript:
Code
Related
I have a menu that looks like this: http://i.stack.imgur.com/beX6i.png
The little triangle is made using ::before. I need to make it change into the color of the hover when the first child of the submenu is active (has .active class that is added from js automatically)
What should the selector look like? something like .submenu a:first-child.active?
CSS:
.submenu{
z-index:10;
position:absolute;
display:none;
background:#2b2b2b;
}
.submenu a{
font-family:'Roboto Slab';
display:block;
color:white;
background:transparent;
text-decoration:none;
text-transform:uppercase;
line-height:58px;
padding-left:8px;
padding-right:8px;
font-weight:bold;
font-size:14px;
}
.submenu a:hover{
color:#fe4817;
display:block;
background-color:#3A3939;
}
.submenu a.active{
color:#fe4817;
background-color:#3A3939;
}
.submenu a:first-child:before,
.submenu a:first-child::before{
position:absolute;
top:-8px;
left:0;
content:' ';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #2b2b2b;
}
.submenu a:first-child:hover:before,
.submenu a:first-child:hover::before{
border-bottom: 15px solid #3A3939;
}
It's really hard to understand your question. But I think
.submenu a:first-of-type.active:before {
border-bottom-color:#3a3939;
}
should do the job. :first-of-type might be better than :first-child in this case since :first-child could either be a heading or something alike while :first-of-type only selects the first anchor. See Selector Reference for further information.
If that doesn't work and you can provide a fiddle I'll take another look at your problem.
hoping someone could help me solve this issue...im not using js, just css and html. I have built a menu which works good but my issue is when i try to add in a sub menu. I would like for it be hidden until someone goes over the main menu, then i would like for it to drop down. The effect that im getting now is my sub menu loads right away with the main menu above it and then it disappears when i go over that main menu item. i have tried some different things such as adding z-index here and there, but no luck so far...
HTML:
<div id="container">
<div id="menu">
<ul id="nav">
<ul>
<li id="menu1"><h2>Home</h2></li>
<li id="menu2"><h2>Sign-Up</h2></li>
<li id="menu3"><h2>Packages</h2>
<ul>
<li>Gold</li>
<li>Platinum</li>
</ul>
</li>
<li id="menu4"><h2>About Us</h2></li>
<li id="menu5"><h2>Contact</h2></li>
</ul>
</ul>
</div>
CSS:
* {
margin:0px;
padding:0px;
}
.form-textbox{
height:100px;
font-size:100px;
}
#fieldset{
width:300px;
}
#fieldst p{
clear:both;
padding:5px;
}
#legend{
font-size:16px;
}
label[for="username"] {
color:#FFFFFF;
font-weight:bold;
clear:both;
text-align:left;
}
label[for="password"] {
color:#FFFFFF;
font-weight:bold;
clear: both;
text-align:left;
margin-top:40px;
}
body {
padding-top:0px;
background-color:#01111d;
color:#FFF;
font-family:verdana, arial, sans-serif;
text-align: left;
letter-spacing: 1px;
}
a {
color: #FFF;
font-size: 14px;
}
a:hover {
color:#efae00;
} //01a9c0
.more {
float:left;
}
.clear {
clear:both;
}
p {
margin: 20px 0px 20px 0px;
line-height: 16px;
font-size: 14px;
}
#container {
margin: 0px auto;
width: 873px;
}
#menu {
background-image:url(images/menu.gif);
width:862px;
height:90px;
position:relative;
z-index:99999;
}
#menu li{
position:absolute;
top:40px;
list-style-type:none;
}
#menu1 {
left:110px;
}
#menu2 {
left:255px;
}
#menu3 {
left:400px;
}
#menu4 {
left:540px;
}
#menu5 {
left:680px;
}
#menu a {
font-family: verdana, arial, sans-serif;
font-size:12px;
font-weight:bolder;
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover {
color:#efae00;
}
#menu li > #nav li ul
#nav li ul {
position:absolute;
display:none;
}
#nav li:hover ul {
display: none;
}
#nav li ul li {
float: none;
display: block;
}
#nav li ul li a {
width: 118px;
position: absolute;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: #333;
color: #fff;
}
#nav li ul li a:hover {
background: #066;
color: #000;
}
Jsfiddle here: http://jsfiddle.net/bC7f2/
So it appears there are a few things that we can change in your code. The first thing is when you should and should not display things. To keep it short, I have made a few adjustments to the CSS code, just be sure you are getting the exact area you are trying to use. Here are the new selector names:
#nav ul li:hover ul #ITEM NAME HERE
#nav li ul # ITEM NAME HERE
Next, you started off by displaying your drop down menu as "display: block;" , this means that anything in the drop down menu will automatically begin on the page, this should actually be set to "display:none;", so that it is not visible until you hover. Here is your end product:
#nav ul li:hover ul #item1 {
display: none;
position: absolute;
z-index: 100;
display: inline-block;
top: 20px;
}
#nav ul li:hover ul #item2 {
/* display: none; */
position: relative;
z-index:1;
display: block;
top: 13px;
}
#nav ul li:hover ul #item3 {
/* display: none; */
position: relative;
z-index:0;
display: block;
top: 27px;
}
#nav li ul #item1 {
z-index:100;
display:none;
}
#nav li ul #item2 {
z-index:1;
display:none;
}
#nav li ul #item3 {
z-index:0;
display:none;
}
I also added a margin here to connect the sub menu to the normal menu or else it will act really weird. Your end product can be found here.
I would suggest looking into some specific tutorials on how to create drop down menus with CSS or look into using jQuery with your drop down menu (it will make it more clean and easy to use).
Edit: Here is an update with the sub menus showing, I have also added another sub menu to show you exactly how the items will work and the corresponding CSS to go with it here.
To break down my additions, I will split it up into sections really fast:
Z-Index: This is pretty much the order of what the items will appear in, where the higher the number, the higher on the list it will appear. Here is a resource for more information.
Positioning: I have used a combination of absolute and relative positioning. This is extremely dirty and I don't know if many would recommend the use of this in the applicable web programming world. It would be better to use solely absolute positioning, but this will still get your job done. More information can be found here.
Top: This is pretty self explanatory but it is really the distance from the utmost top object. More information on this can be found here.
I have recently been working on a small CSS menu that I can’t get working properly. Ive been fiddling around with existing menu’s and trying to get the positioning and fonts etc to be working.
Basically first I had my main menu, which is working fine the way it should. Now when I try add a dropdown to one of the options, it really messes up and I am completely clueless to fixing this mess :S
What I need help in: Positioning the dropdown menu’s below the correct menu-item (now they always float on the left). Also I want the submenu items, to be the exact same style/size/font/etc as the main menu items, which for some reason I can’t get working either.
Any help is appreciated, I submitted the CSS / HTML Code of the menu into a pastebin file:
CSS: http://pastebin.com/rJEgvnK1
HTML: http://pastebin.com/e52RuH4r
Its not perfect but still you can figure out the positioning correctly but not the fonts. Check this jsfiddle
CSS used:
#mainMenu ul{
width:954px;
padding:0;
margin:5px 0 10px 0;
list-style-type:none;
border:solid 2px #ddd;
font-size: 18px;
text-transform: uppercase;
}
#mainMenu ul li a{
text-decoration:none;
color:#000000;
background-color:#eee;
padding:0.2em 0.6em;
border-right:0px solid white;
display:block;
}
#mainMenu a:hover{
color:#FFFFFF;
background-color:#2E9AFE;
}
#mainMenu ul li{
display:inline-block;
position: relative;
}
#mainMenu ul ul {
background-color: #eee;
display: none;
width: 133px;
height: auto;
position: absolute;
border: solid 1px #ddd;
top: 23px;
}
#mainMenu ul li:hover > ul{
display:block;
padding:0;
margin:5px 0 10px 0;
list-style-type:none;
border:solid 2px #ddd;
font-size:18px;
text-transform:uppercase;
}
#mainMenu ul ul li:hover a{
color:#FFFFFF;
background-color:#2E9AFE;
}
#mainMenu ul ul li:hover {
cursor:pointer;
}
#mainMenu ul ul li {
float:none;
padding:10px;
}
#mainMenu ul ul li{
font-size:16px;
padding:0 10px;
}
Not perfect but this should get you furter:
jsfiddle
To get the blocks below each link (IN YOUR CSS), simply remove the a-Tag from #mainMenu ul li a{
This one is a little nicer !!!
I'm trying to get this simple horizontal navigation menu to work but when I go and add an "active" class to the active li, nothing is changing. the .active just doesn't show up? What did I do wrong guys?
<div id="nav">
<ul>
<li class="active">All</li>
<li>Services</li>
<li>Technology</li>
<li>Referral</li>
<li>Reseller</li>
</ul>
</div>
Here's the CSS:
#nav ul{
list-style-type:none;
margin:40px auto;
padding:0;
width:625px;
height:50px;
}
#nav li{
display:inline;
}
#nav li a,
#nav li a:visited,
#nav li a:link {
width:120px;
height:20px;
display:inline;
float:left;
text-align: center;
padding-top:5px;
padding-bottom: 5px;
margin-top:auto;
margin-bottom:auto;
font-family: arial;
text-decoration: none;
color:#929292;
font-weight: bold;
background-color: #e5e5e5;
margin-left:5px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#nav li a{
}
#nav li a:hover{
color: #ffffff;
cursor: pointer;
background-color: #2F5290;
}
#nav li a:active{
color: #FAAF31;
}
.active{
background-color: #2F5290;
color: #FAAF31;
}
Specificity is your problem. In quick terms: ids are worth 100, classes worth 10 and elements worth 1, so #nav li a is worth 102 points of specificity, but .active is only worth 10 points. If you update it to #nav li a.active you will get 112 points, thus having enough specificity to override your original styles. You can read more about specificity on W3C
Thanks #setek for the good answer, I thought that it should really be the answer and added a bit as well.
I'd like to make a black navigation bar for my website, and when you hover over the first link it goes orange, the second link it goes green, etc. I know how to change colour on hover but don't know how to make each link different.
I figure its something to do with giving ids to each li tag?
<div id="navbar">
<ul>
<li id="link1">1</li>
<li id="link2">2</li>
<li id="link3">3</li>
</ul>
</div>
But then how do I create different styles for each of these ids in the css file?
Below is what I tried
#navbar ul li a {
text-decoration: none;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 30px;
padding-right: 30px;
color: #ffffff;
background-color: #000000;
}
#navbar ul li #link1 a:hover {
color: #ffffff;
background-color: #C62222;
padding-top:15px;
padding-bottom:15px;
}
#navbar ul li #link2 a:hover {
color: #ffffff;
background-color: #28C622;
padding-top:15px;
padding-bottom:15px;
}
Help much appreciated!
What you're doing is on the right track, but don't repeat the CSS over and over:
#navbar ul li a:hover {
color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
#navbar ul #link1 a:hover {
background-color: #C62222;
}
#navbar ul #link2 a:hover {
background-color: #28C622;
}
As others have noted, you also need to either remove the space between the li and your id, or just remove the li entirely (since there is only one link1, you don't necessarily need to tell the browser that it is an li).
Additionally, if you want, you can (and probably should) simply those selectors all the way down to #link1 a:hover and #link2 a:hover. It's more of a stylistic choice, but it helps to keep your code clean.
You have a bad selector. The li is superfluous.
#navbar #link1 a:hover {
color: #ffffff;
background-color: #C62222;
padding-top:15px;
padding-bottom:15px;
}
You need to remove the space between li and #link1:
#navbar ul li#link1 a:hover
You could further optimize your CSS like this:
#navbar a {
text-decoration: none;
padding: 25px 30px; /* shortcode for top/bottom - left/right */
color: #ffffff;
background-color: #000000;
}
#navbar a:hover { /* common hover styles */
color: #ffffff;
padding:15px 30px;
}
#link1 a:hover { /* individual hover styles */
background-color: #C62222;
}
#link2 a:hover { /* individual hover styles */
background-color: #28C622;
}
remove the space between li and #link2.
#navbar ul li#link1 a:hover {
color: #ffffff;
background-color: #C62222;
padding-top:15px;
padding-bottom:15px;
}
#navbar ul li#link2 a:hover {
color: #ffffff;
background-color: #28C622;
padding-top:15px;
padding-bottom:15px;
}
You were close, but the space between li and #linkX is causing problems. These are not two separate elements, so they should be combined. One possible method is:
#navbar ul li#link1 a:hover {
....
Alternately, you can use:
#navbar ul #link1 a:hover {
....
You may wish to combine the duplicated styles into a single directive:
#navbar ul li a:hover {
color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
Then use only the changed style as needed:
#link1 a:hover {
background-color: #C62222;
}