I'm trying to create an active/current link on my nav bar.
In the HTML, there an element with a class="current" attribute on one of the elements.
I want that element to have a background if the class is active/current
<ul id="trans-nav">
<li class="current">
About Us
<ul>
<li>Contact Us</li>
<li>Login</li>
</ul>
</li>
</ul>
What do i need in my CSS?
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
position:relative;
z-index:999;
}
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 40px;
}
#trans-nav li:hover {
background-position: 0 -40px;
}
#trans-nav li a {
display: block;
padding: 0 15px;
color: #666666;
text-decoration: none;
}
#trans-nav li a:hover {
background-color:#F36F25;
color: #eeeeee;
}
#trans-nav li active {
background-color:#F36F25;
color: #eeeeee;
}
#trans-nav li ul {
opacity: 0;
position: absolute;
left: 0;
width: 200px;
background: #EEEEEE;
list-style-type: none;
padding: 0;
margin: 0;
}
#trans-nav li:hover ul {
opacity: 1;
}
#trans-nav li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
background: none;
}
#trans-nav li:hover ul li {
height: 30px;
line-height: 30px;
}
#trans-nav li ul li a {
background: #EEEEEE;
}
#trans-nav li ul li a:hover {
background: #666666;
color:#EEEEEE;
}
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
I have tried this but it didn't work:
#trans-nav li active {
background-color:#F36F25;
color: #eeeeee;
}
You were so close!
#trans-nav li .active {
background-color:#F36F25;
color: #eeeeee;
}
You just forgot the . on .active
Working Fiddle
Your css would need the . indicator for Class, and the link selector.
#trans-nav li.current a {
background-color:#F36F25;
color: #eeeeee;
}
Try this, the first one will target the li with the current class, the second will target the link for current (About Us) and won't flow down to the sub-menu due to the direct descendant selector >.
#trans-nav .current {
background-color:#F36F25;
}
#trans-nav .current > a {
color: #eeeeee;
}
Related
I was trying to apply some style to the active item in an HTML navigation bar, which is same as the a tag for the same.
To experiment this, I have taken the example from http://cssdeck.com/labs/css-hover-effect
Below is my modified code, where I basically created a new class "active" and replicated the same style for a:
HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel = "stylesheet" type = "text/css" href = "CSS.css">
</head>
<body>
<section style="background: #e74c3c; color: #fff;">
<h2>Underline Stroke</h2>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
</section>
</body>
CSS code:
.center {
text-align: center;
}
section {
height: 100vh;
}
/* NAVIGATION */
nav {
width: 80%;
margin: 0 auto;
background: #fff;
padding: 50px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a, nav ul li a.active {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before,
nav ul li a.active:after,
nav ul li a.active:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a,
nav.stroke ul li a.active,
nav.fill ul li a.active {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after,
nav.stroke ul li a.active:after,
nav.fill ul li a.active:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:hover:after {
width: 100%;
}
nav.fill ul li a,
nav.fill ul li a.active {
transition: all 2s;
}
nav.fill ul li a:after,
nav.fill ul li a.active:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
Unfortunately, the styles are not getting reflected in the "active" class in the navigation menu.
How to fix the error code?
Points you need to consider:
If you're going to apply the same styles for the anchor tag and the anchor tag with the class active, you don't need to mention the active classes explicitly. It applies it on all regardless of that.
If you want to have some other styles which should be applied specifically for only active class, you need to define that like I have just for demonstration changed the color of active class component to red.
.active{
...
}
Third, you got the spelling of active wrong in your html.
.center {
text-align: center;
}
section {
height: 100vh;
}
/* NAVIGATION */
nav {
width: 80%;
margin: 0 auto;
background: #fff;
padding: 50px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a{
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before{
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a{
position: relative;
}
nav.stroke ul li a:not(.active):after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after{
width: 100%;
}
.active{
color: #555;
}
.active:after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
content: '.';
background: #aaa;
height: 1px;
}
<section style="background: #e74c3c; color: #fff;">
<h2>Underline Stroke</h2>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
</section>
Update:
These two CSS styles have been updated to have the hover effect on load on the active by default.
nav.stroke ul li a:not(.active):after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after{
width: 100%;
}
.active{
color: #555;
}
.active:after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
content: '.';
background: #aaa;
height: 1px;
}
It looks like you don't have any different styles to apply to just your active class. All of your styles apply to both a element and the a.active. If you want your a.active elements to be different, apply different styles.
a {
color: #fff;
}
a.active {
color: #34dd42;
}
As the previous answer said having both a and a.active on the css selector is redundant and unnecessary. Simply applying the styles to just the a element will cover both.
I want this border to slide in from left to right(dropmenus only). But can't figure it out
This is how I got so far, I don't have any ideas no more.
Menu is built with ul and li-s.
Is this possible?
Thanks,
.toggle,
[id^=drop] {
display: none;
}
.toggle_menu,
[id^=drop] {
display: none;
}
nav:after {
content:"";
display:table;
clear:both;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li.active_link a{
font-size:14px;
text-decoration:none;
font-family: 'Lato';
font-weight:600;
}
nav ul li {
margin: 0px;
display:inline-block;
float: left;
background-color: white;
}
nav a {
display:block;
padding: 14px 16px;
color:#FFF;
font-size:14px;
text-decoration:none;
color:black;
font-family: 'Lato';
font-weight:400;
}
nav ul li ul li:hover { /*background: #000000; */}
nav a:hover {
/*background-color: #000000;*/
}
nav ul li ul{
display: none;
position: absolute;
color: #31302B;
background: #FFF;
cursor: pointer;
box-shadow: inset 0 0 0 0 #b6945d;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
transition: all ease 1s;
}
nav ul li:hover > ul{
box-shadow: inset 900px 0px 0px #b6945d;
color: #fff;
}
nav ul li:hover > ul {
display:inherit;
}
nav ul ul li {
background-color: transparent;
width: auto;
float: left;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top:-60px;
left:170px;
}
nav ul li ul li a{
font-style: italic;
background-color: white;
margin-top: 1px;
}
nav ul li ul li a:hover{
font-style:italic;
color:#b6945d;
}
/*li > a:after { content: ' +'; }*/
li > a:only-child:after { content: ''; }
<nav>
<label for="drop" class="toggle_menu"><img src="assets/images/mobile_button.png"></label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li class="active_link">
Avaleht
</li>
<li>
<label for="drop-1" class="toggle">Kunstnik</label>Kunstnik
<input type="checkbox" id="drop-1"/>
<ul>
<li>Kunstnikust</li>
<li>Tööde arhiiv</li>
</ul>
</li>
<li>
<label for="drop-2" class="toggle">E-pood</label>E-pood
<input type="checkbox" id="drop-2"/>
<ul>
<li>Kõik tooted</li>
<li>Seeriatooted</li>
</ul>
</li>
</ul>
</nav>
I have added 10 line css below: Are you looking for this:
.toggle,
[id^=drop] {
display: none;
}
.toggle_menu,
[id^=drop] {
display: none;
}
nav:after {
content:"";
display:table;
clear:both;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li.active_link a{
font-size:14px;
text-decoration:none;
font-family: 'Lato';
font-weight:600;
}
nav ul li {
margin: 0px;
display:inline-block;
float: left;
background-color: white;
}
nav a {
display:block;
padding: 14px 16px;
color:#FFF;
font-size:14px;
text-decoration:none;
color:black;
font-family: 'Lato';
font-weight:400;
}
nav ul li ul li:hover { /*background: #000000; */}
nav a:hover {
/*background-color: #000000;*/
}
nav ul li ul{
display: none;
position: absolute;
color: #31302B;
background: #FFF;
cursor: pointer;
box-shadow: inset 0 0 0 0 #b6945d;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
transition: all ease 1s;
}
nav ul li:hover > ul{
box-shadow: inset 900px 0px 0px #b6945d;
color: #fff;
}
nav ul li:hover > ul {
display:inherit;
}
nav ul ul li {
background-color: transparent;
width: auto;
float: left;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top:-60px;
left:170px;
}
nav ul li ul li a{
font-style: italic;
background-color: white;
margin-top: 1px;
}
nav ul li ul li a:hover{
font-style:italic;
color:#b6945d;
}
/*li > a:after { content: ' +'; }*/
li > a:only-child:after { content: ''; }
/**New css for transition**/
nav ul li ul:after {
content: '';
display: block;
border-bottom: 4px solid red;
width: 0;
position: absolute;
left: 0;
-webkit-transition: 1s ease;
transition: 1s ease;
}
nav ul li ul:hover:after {
width: 100%;
}
<nav>
<label for="drop" class="toggle_menu"><img src="assets/images/mobile_button.png"></label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li class="active_link">
Avaleht
</li>
<li>
<label for="drop-1" class="toggle">Kunstnik</label>Kunstnik
<input type="checkbox" id="drop-1"/>
<ul>
<li>Kunstnikust</li>
<li>Tööde arhiiv</li>
</ul>
</li>
<li>
<label for="drop-2" class="toggle">E-pood</label>E-pood
<input type="checkbox" id="drop-2"/>
<ul>
<li>Kõik tooted</li>
<li>Seeriatooted</li>
</ul>
</li>
</ul>
</nav>
Now it works.
.menu {
width: 100%;
height: auto;
background: white;
transition: all 0.3s ease;
}
.menu ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: inline-block;
width:100%;
}
.menu > li > ul.sub_menu {
min-width: 10em;
padding: 4px 0;
background-color: #f4f4f4;
border: 1px solid #fff;
}
.menu ul li { padding: 0px; }
.menu ul li.active a{
font-weight:600;
}
.second_menu ul li.active a{
font-weight:600;
}
.menu > ul > li { display: inline-block; }
.menu ul li a {
display: block;
text-decoration: none;
color: black;
font-family: 'Lato';
font-weight:400;
font-size:14px;
}
.menu ul li a:hover {
color: black;
}
.menu ul li.hover > a {
color: black;
}
.menu ul li > a { padding: 15px; }
.menu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
width:auto;
background: white;
}
.menu ul li.active_drop a{
font-weight:600 !important;
color:#b6945d;
}
.menu ul li ul.dropdown_nav li a{
font-weight:400;
}
.menu ul li.active_drop a:hover{
color:#b6945d;
}
.menu ul li:hover > ul {
visibility: visible;
}
.menu ul ul > li {
position: relative;
display: inline;
float: left;
width: auto;
}
.menu ul ul > li a {
padding: 10px 15px;
height: auto;
background: white;
font-style:italic;
}
.menu ul ul > li a:hover {
color: black;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
/* animating the golden border */
.dropdown_nav {
position: relative;
overflow: hidden;
}
.dropdown_nav:before {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 1px;
content: "";
background-color: #b6945d;
z-index: 1;
transition: transform .5s ease-out;
transform: translateX(-100%);
}
.menu>ul>li:hover .dropdown_nav:before {
transform: translateX(0);
}
<nav id="menu" class="menu">
<ul class="dropdown">
<li>leht</li>
<li class="active">
leht1
<ul class="dropdown_nav">
<li class="dropdown_first active_drop">
leht1.1</li>
<li class="dropdown_last">leht1.2</li>
</ul>
</li>
<li>
leht2
<ul class="dropdown_nav">
<li class="dropdown_first">leht2.1</li>
<li>leht2.2</li>
</ul>
</li>
<li>leht3</li>
<li>leht4</li>
</ul>
</nav>
I have been searching the internet. This question Hovering <a> in CSS without href on Stack Overflow, doesn't address my issue in a way I can understand.
I am trying to make a "primary" menu, with no links.
From each item in the menu, I'd like to create a drop down menu when hovering or clicking upon the item.
I would like to do this with CSS only.
I am having confusion. I have tried various permutations with z-index, positioning and visibility. However, I am finding it hard to achieve the result I need. I have also tried having links in the outside list items.
This is my code:
HTML:
<ul>
<li>Name 1
<ul>
<li>anteater</li>
<li>bee</li>
<li>cat</li>
<li>dog</li>
</ul>
</li>
<li>Name 2
<ul>
<li>egg</li>
<li>fern</li>
<li>goose</li>
<li>house</li>
</ul>
</li>
</ul>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
padding: 30px 15px 20px 15px;
border-right: dotted #FFFFFF 1px;
color: #FFFFFF;
font-size: 11px;
position: relative;
z-index: 3;
}
li.end {
float: right;
}
a {
display: block;
text-decoration: none;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #0099FF;
}
a:active {
color: #FFFFFF;
overflow: visible;
}
ul li:active ul, ul ul {
visibility:visible;
}
ul li:active ul, ul ul li {
visibility:visible;
}
ul li:hover ul, ul ul {
visibility: visible;
}
ul li:hover ul, ul ul li {
visibility:visible;
}
ul ul {
list-style-type: none;
margin: 0;
position: absolute;
visibility: hidden;
z-index:-1;
}
ul ul li {
float: left;
padding: 5px 10px;
border-right: dotted #0000FF 1px;
background-color: #000000;
color: #FFFFFF;
font-size: 11px;
position: relative;
visibility:hidden;
}
ul ul li a {
display: block;
text-decoration: none;
}
ul ul li a:link {
color: #0000FF;
}
ul ul li a:visited {
color: #0000FF;
}
ul ul li a:hover {
color: #FFFFFF;
visibility:visible;
}
ul ul li a:active {
color: #FFFFFF;
overflow: visible;
visibility:visible;
}
See this example http://jsfiddle.net/La2L8/
I think you have excessive CSS code
I have a navigation menu for my website:
here is the HTML
<ul id="trans-nav">
<li>About Us
<ul>
<li>Contact Us</li>
<li>Login</li>
</ul>
</li>
</ul>
as you can see it has a dropdown (submenu) under the link but the sub menu is displaying under the page content below the menu.
how can i make it display the sub menu OVER the page content rather than behind?
here is the CSS:
#trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #666666; text-decoration: none; }
#trans-nav li a:hover { background-color:#F36F25; color: #eeeeee; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #EEEEEE; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #EEEEEE; }
#trans-nav li ul li a:hover { background: #666666; color:#EEEEEE; }
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
also a fiddle: http://jsfiddle.net/charliejsford/SAXmG/
You don't appear to be defining any z-index. Without it, elements that appear later in the page will appear on top.
To fix this, I suggest adding position:relative to your list's styles, and then you can also add z-index:1000 or some other suitable number.
Not defining any z-index should not be a problem, and i don't think it's wise to define useless z-index everywhere.
With sample CSS code you post there, your menu should lie on the top of any static element that follow it, because your menu is positioned and the rest of your page is not.
So if you're submenu goes behind the page content, the page content you're talking about must be positioned too, and it may be your true problem.
I have this CSS and HTML code for my navigation menu, as you can see when you hover over one of the main links it goes orange. but then when you go over a link on the sub menu, the orange disappears.
how can you keep it so it stays orange when you go on the sub menu link?
<ul id="trans-nav">
<li>
About Us
<ul>
<li>Contact Us</li>
<li>Login</li>
</ul>
</li>
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
position:relative;
z-index:999;
}
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 40px;
}
#trans-nav li:hover {
background-position: 0 -40px;
}
#trans-nav li a {
display: block;
padding: 0 15px;
color: #666666;
text-decoration: none;
}
#trans-nav li a:hover {
background-color:#F36F25;
color: #eeeeee;
}
#trans-nav li ul {
opacity: 0;
position: absolute;
left: 0;
width: 200px;
background: #EEEEEE;
list-style-type: none;
padding: 0;
margin: 0;
}
#trans-nav li:hover ul {
opacity: 1;
}
#trans-nav li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
background: none;
}
#trans-nav li:hover ul li {
height: 30px;
line-height: 30px;
}
#trans-nav li ul li a {
background: #EEEEEE;
}
#trans-nav li ul li a:hover {
background: #666666;
color:#EEEEEE;
}
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
Try this:
http://jsfiddle.net/wjy74/
#trans-nav:hover {
background-color:#F36F25;
color: #eeeeee;
width: 89px;
}