Can't seem to get the dropdown links to show (on focus) on when tabbing with the keyboard. Tried a couple different styles, but no luck. Any help would be appreciated.
body {
background: #005bbb;
font: 14px Sofia,Arial,sans-serif;
color: #444;
height: 100%;
line-height: 1;}
.nav-global a {text-decoration: none}
.nav-global ul li {
color: #005bbb;
float: left;
display: inline;
position: relative;
margin: 0;
width: 235px}
.nav-global ul li:hover {
background-color: #003e51;}
/* style the first level slightly different */
.nav-global > ul > li {
margin: 0;
width: auto;
background: #fff;
color: #005bbb}
.nav-global ul li a {
color: #005bbb;
padding: 12px 16px 14px 16px;
display: block;
font: 15px Sofia Bold, "Trebuchet MS", sans-serif;}
.nav-global ul li a:hover {
color: #fff}
.nav-global > ul > li > a {}
.nav-global li:hover > a {color: #fff}
/* ----------------------------------------------- secondary nav ----------------------------------------------- */
.nav-global ul li ul {
position: absolute;
max-height: 0;
overflow: hidden;
margin: 0;
opacity: 0;}
.nav-global ul li:hover > ul {
max-height: 1000px;
overflow: visible;
opacity: 1;}
.nav-global ul li ul li {
background-color: #003e51;}
.nav-global ul li ul li a {
color: #fff;
font: 13px Sofia, "Trebuchet MS", sans-serif;
padding: 0;
line-height: 30px;
text-indent: 15px;}
.nav-global ul li ul li a:hover {
background: #002935;}
.nav-global ul li ul li:first-child {
padding-top: 10px}
.nav-global ul li ul li:last-child {
padding-bottom: 10px}
.
<div class="nav-main">
<nav class="nav-global">
<ul>
<li>Find Materials
<ul>
<li>Everything</li>
<li>Catalog</li>
<li>Databases</li>
<li>E-Books</li>
<li>E-Journals</li>
<li>Course Reserve</li>
<li>Off Campus Access</li>
</ul>
</li>
</ul>
</nav>
</div>
=
I tried using the code like this for "on focus", but not working:
.nav-global ul li:focus > ul {
max-height: 1000px;
overflow: visible;
opacity: 1;}
Add tabindex="0" to nav-global and the :focus selector will work. In the code snippet below I apply this change and also add all sub-menu links to the tabindex order. Refer to this technique for WCAG 2.0.
Please note that once you open the menu with the tab key, your next tab will close the menu since nav-global looses focus, as indicated in a comment to your question. If the mouse is hovering over the menu, it will remain open, and you can type TAB to see how each link in the tabindex receives focus.
I would suggest controlling menu visibility with javascript so you don't rely on css to maintain its state. Js can give you more control over the user experience. For instance, adding a keyhandler to close the menu when ESC is typed.
Here's the code:
body {
background: #005bbb;
font: 14px Sofia, Arial, sans-serif;
color: #444;
height: 100%;
line-height: 1;
}
.nav-global a {
text-decoration: none
}
.nav-global ul li {
color: #005bbb;
float: left;
display: inline;
position: relative;
margin: 0;
width: 235px
}
.nav-global ul li:hover {
background-color: #003e51;
}
/* style the first level slightly different */
.nav-global>ul>li {
margin: 0;
width: auto;
background: #fff;
color: #005bbb
}
.nav-global ul li a {
color: #005bbb;
padding: 12px 16px 14px 16px;
display: block;
font: 15px Sofia Bold, "Trebuchet MS", sans-serif;
}
.nav-global ul li a:hover {
color: #fff
}
.nav-global>ul>li>a {}
.nav-global li:hover>a {
color: #fff
}
/* ----------------------------------------------- secondary nav ----------------------------------------------- */
.nav-global:focus>ul>li>ul {
max-height: 1000px;
overflow: visible;
opacity: 1;
}
.nav-global>ul>li:focus>ul {
max-height: 1000px;
overflow: visible;
opacity: 1;
}
.nav-global:focus>ul>li {
background-color: #003e51;
}
.nav-global:focus>ul>li>a {
color: white;
}
.nav-global ul li ul {
position: absolute;
max-height: 0;
overflow: hidden;
margin: 0;
opacity: 0;
}
.nav-global ul li:hover>ul {
max-height: 1000px;
overflow: visible;
opacity: 1;
}
.nav-global ul li ul li {
background-color: #003e51;
}
.nav-global ul li ul li a {
color: #fff;
font: 13px Sofia, "Trebuchet MS", sans-serif;
padding: 0;
line-height: 30px;
text-indent: 15px;
}
.nav-global ul li ul li a:hover {
background: #002935;
}
.nav-global ul li ul li:first-child {
padding-top: 10px
}
.nav-global ul li ul li:last-child {
padding-bottom: 10px
}
.
<div class="nav-main">
<nav class="nav-global" tabindex="0">
<ul>
<li>
Find Materials
<ul>
<li>Everything</li>
<li>Catalog</li>
<li>Databases</li>
<li>E-Books</li>
<li>E-Journals</li>
<li>Course Reserve</li>
<li>Off Campus Access</li>
</ul>
</li>
</ul>
</nav>
</div>
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'm trying to keep the parent nav background active when on child page.
Example: Portfolio---->Programs
When my current page is Programs, I'd like to keep the Portfolio active on the navigation bar.
The code use in the CSS is:
/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap {
max-height: 200px;
}
#nav .container ul {
list-style: none !important;
}
#nav .container ul li {
list-style: none !important;
}
#nav .container ul span:last-child li,
#nav .container ul > li:last-child {
/*background: none;*/
background:url(surf_40.gif) no-repeat -12px;
}
#nav ul li a {
display: block;
font-size:30px;
line-height: 35px;
padding: 10px 0;
color: rgba(255,255,255,0.4);
padding: 2px 25px 2px 21px;
border: 0;
outline: 0;
list-style-type: none;
position:relative;
right:-4px;
z-index:1;
text-transform: uppercase;
font-family: 'Aller', sans-serif;
}
#nav ul li#active a {
background: url(surf_40.gif) no-repeat -12px;
}
#nav ul li#active a,
#nav ul li a:hover {
color: #fff;
border: 0;
}
/**Text modified added - for active parent while my current page is a sub-menu***/
#wsite-menus .wsite-menu li #active a #nav ul li a {
color: #fff;
border: 0;
}
/*---*/
/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu li a {
color: rgba(0,0,0,0.4);
font-weight: bold;
background: #fff;
/*border: 0 px;*/
border: solid thick;
border-radius: 1em;
/* fine modifica*/
position:relative;
right: 0 px;
}
#wsite-menus .wsite-menu li a:hover {
color: #000;
background: #e3e3e3;
border: solid thick orange;
}
thank you for any help..
HTML code:
<div id="nav">
<ul class='wsite-menu-default'>
<li id='pg962547086691527768'><a href="/" data-membership-required="0" >Home</a></li>
<li id='pg623326219140352077'><a href="/about.html" data-membership-required="0">About</a</li>
</ul></div>
Put the :hover on li's instead of a:hover and alos add class active to li. if you provide html two then i will provide you the perfect solution thanks
This menu bar works as it should, until hyperlinks are involved, as the browser inserts its own text formatting.
I tried using the pseudo selectors (a:link a:visited) to counteract this, but that prevents the styling I have already created from showing, (as I want the text to change from grey to white upon hover). I also tried #menubar ul li a:link{} but didn't work. How do I prevent the links from changing colour when they are in lists?
Fiddle here: http://jsfiddle.net/CWB9C/1/
HTML:
<div id="menubar">
<ul>
<li> Home
</li>
<li>Facebook
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</li>
<li>Google.com
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</li>
<li>Search</li>
</ul>
</div>
CSS:
body {
text-align: center;
}
#menubar ul{
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
#menubar ul li{
font: 18px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
color:#666;
text-decoration:none;
}
#menubar ul li{
font: 18px;
font-family: latolight;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
}
#menubar ul li:hover {
background: #A03C3A;
color: #D6D6D6;
}
#menubar ul li ul{
padding: 0;
position: absolute;
top: 43px;
left: 0;
width: 150px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
color:#666;
text-decoration:none;
}
#menubar ul li ul {
padding: 0;
position: absolute;
top: 43px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
}
#menubar ul li ul li {
background:#A03C3A;
display: block;
color: #FFF;
}
#menubar ul li ul li {
background:#A03C3A;
display: block;
color: #FFF;
text-shadow: 0 -1px 0 #000;
z-index:10;
color:#666;
text-decoration:none;
}
#menubar ul li ul li:hover {
background:#4F529F; z-index:10;
}
#menubar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:10;
}
Style the a's not li's, or just set to all the a's
a { color:inherit; text-decoration:none; }
Just create a style that will apply to both li and li > a:
#menubar ul li, #menubar ul li a {
color:#666;
font: 18px;
font-family: latolight;
text-decoration: none;
/* Add whatever additional style you want */
}
jsFiddle
From what I'm reading, I think this is what you want
#menubar a {
color: #whatevershadeofgrayhere;
text-decoration: none;
}
#menubar a:hover {
color: #whatevershadeofwhitehere;
}
#menubar ul li:hover a{
color:#fff;
}
You can use the inherit value for color.
#menubar ul li a {
color: inherit;
}
Then it will inherit from the closest parent with a color style. You can then do something like this for the colors.
#menubar ul li ul li {
color: black;
}
fiddle
(nice menu by the way)
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
Below is my code, currently when I hover on "About Us" everything below the dropdown menu opens; how can i change the css so that it only hovers when i mouseover, this means, when i hover on "Team", then I should see the menus below it.
also how can i adjust the width so that it is shiffted more to the left.
also when the dropdown menu is longer in lenth, it hides below my content, i want the dropdown menu to be over the body of the page, not in hiding.
thanks in advance you all.
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>
JSFiddle: http://jsfiddle.net/LWEry/
Like this:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover > ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
.sub-menu
{
position: absolute;
top: 0;
left: 100%;
}
http://jsfiddle.net/3xWcu/2/
I changed one selector.
FROM
li:hover ul
TO
li:hover > ul
Edited my fiddle above. Added a sub-menu class to the ul containing the Profile and Board li tags:
<ul class="sub-menu">
<li>Profile</li>
<li>Board</li>
</ul>
and added some CSS above.
You mean like this? http://jsfiddle.net/3xWcu/
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>