I have a HTML ul banner that has two li sub-bars that are exposed on hover. However, if you mouse away from it or over another main entry, the hover is lost.
I was wondering if there was some way to easily maintain this hover after a mouse away. It's not something I can toss out so I'm very interested in extending it to support keeping it even after a mouse away for a few seconds, but being able to see new information if hovering over a different li element.
Here is my JSFiddle with an extremely simple demo with my HTML/CSS with the bare minimum to show off the feature: JSFiddle
<body>
<div class="nav-outer-repeat">
<div class="nav">
<div class="table">
<ul class="select">
<li style="color: white;"> <a><b>Hover Test</b></a>
<div class="select_sub">
<ul class="sub">
<li style="color: white;">Test
</li>
<li style="color: white;">Test
</li>
<li style="color: white;">Test
</li>
</ul>
<ul class="sub">
<li style="color: white;">Test
</li>
<li style="color: white;">Test
</li>
<li style="color: white;">Test
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="content-outer">
<div id="content"></div>
</div>
#content-outer {
background: url(../../core/images/shared/content_repeat.jpg) repeat-x;
}
#content {
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
margin: 0 auto 0 auto;
max-width: 100%;
min-width: 780px;
padding: 15px 0px 25px 0px;
}
.nav-outer-repeat {
background: url(../../core/images/shared/nav/repeat.jpg) repeat-x;
height: 77px;
}
.nav {
float: left;
font-family: Tahoma;
font-size: 13px;
height: 38px;
position: relative;
width: 1080px;
min-width: 600px;
z-index: 500;
}
.nav-divider {
background: url(../../core/images/shared/nav/divider.jpg) top no-repeat;
float: left;
height: 40px;
width: 15px;
}
.nav .select,
.nav .current {
display: table-cell;
float: left;
list-style: none;
margin: 0 0px 0 0;
padding: 0;
white-space: nowrap;
}
.nav li {
float: left;
height: auto;
margin: 0;
padding: 0;
}
.nav .select a {
color: #fff;
display: block;
float: left;
height: 37px;
line-height: 35px;
padding: 0 0px 0 0px;
text-decoration: none;
white-space: nowrap;
}
.nav .select_sub {
display: none;
margin: 0 0 0 10px;
}
.nav .sub {
display: table;
list-style: none;
padding: 0;
}
.nav .select :hover .select_sub,
.nav .current .show {
background: url(../../core/images/shared/nav/back_0.gif);
height: 75px;
display: block;
left: 0;
padding: 0;
position: absolute;
text-align: left;
top: 37px;
width: 1200px;
z-index: 100;
transition:0s 50s;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
background: transparent;
border: 0;
color: #fff;
font-weight: bold;
font-size: 13px;
display: block;
float: left;
margin: 0;
padding: 0 10px 0 10px;
white-space: nowrap;
}
.clear {
clear: both;
font-size: 0px;
height: 0;
line-height: 0px;
margin: 0px;
padding: 0px;
}
I think I'm most interested in some sort of time delay that it can stay on screen, but all my attempts have failed. I am hoping someone can give me some guidance on solving this with some CSS I may be missing, or perhaps some jQuery?
You can add different transitions on hover and on normal. Make sure you hide your menu with an animatable property! Display won't work and also be careful trying to go from for example, height: 0px; to height: auto;.
Here is one way to do it.
I've forked your fiddle. First I've removed the :hover states and then I added:
.nav .select_sub{
display: block;
}
.nav .select:hover .select_sub,
.nav .select:hover .sub li a{
margin-top: 0%;
transition: all 0.2s;
}
.nav .select .select_sub,
.nav .select .sub li a{
margin-top: -100%;
transition: all 2s 3s;
}
You can see I've hidden your menu with a large top margin. When you hover over .select the margin becomes zero in 0.2s, that should be fast enough for a good user experience.
When you stop hovering the submenu remains for three seconds and then goes back up ten times slower.
Something like this.. but hey I tried.
HTML:
<div class="menu">
<p>Hover</p>
<ul class="menu-content">
<li>
<ul>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
</ul>
</li>
<li>
<ul>
<li>Menu 2</li>
<li>Menu 2</li>
<li>Menu 2</li>
<li>Menu 2</li>
</ul>
</li>
</ul>
</div>
CSS:
.menu {
width: 98%;
text-align: center;
padding: 20px 1%;
background-color: #eee;
overflow: hidden;
}
.menu p {
margin: 20px 0;
color: #096847;
font-size: 1.3em;
}
.menu:hover .menu-content {
margin-top: 0;
}
.menu-content {
margin-top: -100%;
overflow: hidden;
transition: all 1s ease-in;
}
.menu-content li {
list-style-type: none;
}
.menu-content > li > ul > li {
width: 25%;
float: left;
padding: 20px 0;
background-color: #2aa87c;
outline: 1px solid #ddd;
cursor: pointer;
color: #fff;
}
RESULT:
EXAMPLE
In pure CSS3 you can use a transition delay: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay animating the opacity of the dropdown.
If you can't use CSS3 you have to go with JS (not necessarily jquery)
Related
My navbar is not centering properly and it's driving me nuts - there's slightly more white space on the left side of it. Thank you so much in advance. Here is the code
HTML:
<div class="navbar">
<ul class="navitems">
<li>
<a class="current" href="index.html">Home</a>
</li>
<li>
Podcasts
</li>
<li>
Articles
</li>
<li>
Merch
</li>
<li>
About Us
</li>
</ul>
</div>
CSS:
body {
margin:0
}
.navbar {
text-align: center;
border: 1px solid black;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.navitems ul {
list-style: none;
}
.navitems li {
display: inline-block;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-right: 3%;
padding-left: 3%;
border: 1px solid blue;
width: 12%;
font-size: 20px;
}
.navitems a {
color: black;
text-decoration: none;
font-family: georgia;
}
.navitems li:hover a{
transition: all ease-in-out .5s;
color: #f88122;
text-decoration: underline;
}
<ul> tag has got default padding-inline-start style so it is needed to reset that value.
To align items in the middle, it is needed to set vertical-align: middle on <li> items.
.navitems ul indicates the <ul> selector inside .navitems selector. And from your html code, you should change it to ul.navitems.
Below is the working snippet.
body {
margin: 0
}
.navbar {
text-align: center;
border: 1px solid black;
width: 100%;
margin-left: auto;
margin-right: auto;
}
ul.navitems {
list-style: none;
padding-inline-start: 0;
}
.navitems li {
display: inline-block;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-right: 3%;
padding-left: 3%;
border: 1px solid blue;
width: 12%;
font-size: 20px;
vertical-align: middle;
}
.navitems a {
color: black;
text-decoration: none;
font-family: georgia;
}
.navitems li:hover a {
transition: all ease-in-out .5s;
color: #f88122;
text-decoration: underline;
}
<div class="navbar">
<ul class="navitems">
<li><a class="current" href="index.html">Home</a></li>
<li>Podcasts</li>
<li>Articles</li>
<li>Merch</li>
<li>About Us</li>
</ul>
</div>
If you check your code, you will find that your selector is wrong in the .navitems you don't need to add ul and there is padding-left for ul, so the padding should be zero.
Good luck
body {
margin:0
}
.navbar {
text-align: center;
border: 1px solid black;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.navitems { /* Change the css selector */
list-style: none;
padding: 0 !important; /* Add this line */
}
.navitems li {
display: inline-block;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-right: 3%;
padding-left: 3%;
border: 1px solid blue;
width: 12%;
font-size: 20px;
}
.navitems a {
color: black;
text-decoration: none;
font-family: georgia;
}
.navitems li:hover a{
transition: all ease-in-out .5s;
color: #f88122;
text-decoration: underline;
}
<div class="navbar">
<ul class="navitems p-0">
<li><a class="current" href="index.html">Home</a></li><li>Podcasts</li><li>Articles</li><li>Merch</li><li>About Us</li>
</ul>
</div>
I'm trying to do a nav bar with a contact button stuck to the right of the page. I want contact to be aligned with the rest of the elements of the nav bar, however when I add float: right; it just disaligns my nav bar and it doesn't move contact to the right.
Here you can see my code: http://jsfiddle.net/LG2vR/19/
Can someone please tell me the proper way to accomplish this please?
Thanks!
Am not sure if this is what you need exactly, see the updated fiddle
http://jsfiddle.net/ov74xcyg/1/
Basically, i have used position absolute to move your last child of the navigation to the right side and increased width of the navigation till the end of the header.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
z-index: 500;
box-sizing: content-box;
transition: .3s;
background: red;
}
nav.white {
background: white;
height: 35px;
padding: 10px 100px;
transition: .5s;
}
nav ul {
list-style: none;
float: left;
margin: 0;
padding: 0;
display: flex;
width: 90%;
position: relative;
}
nav ul li {
list-style: none;
}
nav ul li:last-child {
display: inline-block;
right: 5%;
position: absolute;
top: 0;
}
nav ul li a {
line-height: 80px;
color: #FFFFFF;
margin: 12px 30px;
text-decoration: none;
text-transform: capitalize;
transition: .5s;
padding: 10px 5px;
font-size: 16px;
}
nav ul li a:hover {
background-color: rgba(255,255,255,0.2);
}
nav.white ul li a {
color: #000;
line-height: 40px;
transition: .5s;
}
nav ul li a:focus {
outline: none;
}
<div class="wrapper">
<nav>
<ul>
<li>LOGO</li>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li><a class="contact" href="#">Contact</a></li>
</ul>
</nav>
Just add:
nav ul li a {
float: left;
}
right before:
nav ul li a.contact {
float: right;
}
or use flexbox!
.wrapper li {list-style-type: none;}
.wrapper {
overflow: hidden;
background-color: red;
}
.wrapper .logo{
margin-right : 30px;
}
.wrapper a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.wrapper a:hover {
background-color: #ddd;
color: black;
}
.wrapper a.active {
background-color: #4CAF50;
color: white;
}
.topnav-right {
float: right;
}
<div class="wrapper">
<a class="active logo" href="#">Logo</a>
Home
Page 1
Page 2
<div class="topnav-right">
<li><a class="contact" href="#">Contact</a></li>
</div>
</div>
So i ve been working on this for several hours.. i have a problem in the nav bar where the content refuses to go display: inline. Previous versions worked fine but were too disorganized , code wise. here is my code.
CSS:
body {
background-color: #5C7584;
margin: 0 auto;
//width: 1000px;
width: 100%;
margin-top: 10px;
}
#canvas {
width: 1000px;
margin: 0 auto;
background-color: white;
}
a {
color: #4086b6;
text-decoration: none;
}
///////////////////////////////////
ul, li {
list-style: none;
}
ul li {
//padding-right: 10px;
//padding-left: 10px;
//display: inline;
}
.parentClass {
display: inline;
//position: relative;
list-style: none;
//float: left;
}
.dropDown {
position: relative;
background-color: lightcyan;
display: block;
list-style: inherit;
//text-align: right;
//background-color: lightcyan;
width: auto;
height: 0px;
visibility: hidden;
opacity: 0;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-ms-transition: all .25s;
-o-transition: all .25s;
transition: all .5s;
}
#linkline{
}
.parentClass:hover {
background-color: lightcyan;
}
.parentClass:hover .dropdown {
opacity: 1;
visibility: visible;
height: auto;
}
/////////////////////////////
#toplinks a {
//padding-left: 0px;
text-shadow: 1px 1px lightgrey;
}
#toplinks a:hover {
color: lightskyblue;
//border-radius: 50px 50px;
}
#toplinks a:active {
color: white;
}
#top {
height: 102px;
background-image: url("../assets/topbar_plain.png");
background-color: white;
opacity: .9;
z-index: 2;
position: relative;
}
#toplinks {
float: right;
width: 500px;
text-align: right;
padding-right: 30px;
padding-top: 70px;
}
#logo {
background-image: url("../assets/logo_plain.png");
width: 102px;
height: 33px;
float: left;
background-repeat: no-repeat;
margin-top: 40px;
margin-left: 80px;
}
HTML:
<div id="top" >
<div id="canvas">
<div id="toplinks">
<ul class="linkline">
<li id="indexx" class="parentClass">Overview
<ul></ul>
</li>
<li class="parentClass">Services
<ul class="dropDown">
<li class="c2"> DDoS Mitigation </li>
<li class="c1"> Server Hosting </li>
</ul>
</li>
<li class="parentClass">AboutUs
<ul class="dropDown">
<li class="c2"> Link 1 </li>
<li class="c1"> Link 2 </li>
<li class="c2"> Link 3 </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Try with:
display:inline-block
ul {
list-style: none;
}
li {
float: left;
display: block;
margin: 0 1em 0 0;
border: 1px solid purple;
}
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
Hi, I simplified your code down to the lists and their styling which is what you need to fix. Make sure ul is list-style none and the li's in that list are float left display block and then style from there.
It looks like something strange is happening because of the <ul class="dropDown"> nested inside the <li class="parentClass">. Try this as a start:
.dropDown {
display: none;
}
.parentClass {
display: inline-block;
}
Try to change the parentClass like that.
.parentClass {
display: inline-block;
position: relative;
list-style: none;
float: left;
}
In my set up I have my navigation bar set horizontally and contained within my header div like this:
<div id="header-section">
<div id="main-menu-wrapper">
<ul id="main-menu">
<li>Home</li>
<li>Services
<ul id="sub-men">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
My problem is that the sub-menu is not showing because the height on "main-menu-wrapper" is set to auto. The sub-menu is showing when I set a height like 100px. When I set the position on the sub-menu to static instead of absolute, it expands the entire main-menu-wrapper. How can I get the sub-menu to show properly?
Here's the CSS portion for my whole header section:
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
background: #740600;
}
#main-menu-wrapper {
position: relative;
width: 74%;
min-width: 600px;
height: auto;
margin: 0% auto;
}
#main-menu {
list-style: none;
font-weight: bold;
line-height: 150%;
}
#main-menu li {
position: relative;
float: right;
margin: 0px 5px;
}
#main-menu a {
padding: 3px;
color: #ffffff;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu a:hover {
padding: 3px;
color: #740600;
background: #ffffff;
text-decoration: none;
}
#main-menu li ul {
position: absolute;
display: none;
}
#main-menu li ul li{
float: none;
}
#main-menu li:hover ul {
display: block;
}
#main-menu li ul a {
padding: 3px;
color: #ccc;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu li ul a:hover {
padding: 3px;
color: #740600;
background: #ccc;
text-decoration: none;
}
#banner-wrapper {
position: relative;
padding: 5px 0 5px;
}
#banner {
position: relative;
max-width: 75%;
min-width: 600px;
margin: 0% auto;
background: #ffffff;
}
#logo {
max-width: 600px;
height: auto;
}
I'm a little confused by what you're asking here, but I created a fiddle where your menu shows.
I deleted the styles for #main-menu-wrapper and I removed the background color on #header-section.
Hopefully this can be a decent starting point for you: http://jsfiddle.net/44vRN/
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
}
You could try to use absolute positioning on the submenu to remove it from the document flow.
I have made a few attempts at this and they ended up just getting confusing. The current HTML and CSS seems to be working fine for a simple horizontal CSS menu. I am struggling with dropping subitems off the current <li> elements.
I am trying to making them show up exactly below the current menu items with the same hovering effects as I have in place now. Any assistance would be appreciated. I am admittedly no CSS pro.
Current HTML:
<div class="MenuTop">
<ul class="Nav">
<li>Home</li>
<li>Vehicles
<ul>
<li>SubItemOne</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>News</li>
</ul>
</div>
Current CSS:
.MenuTop
{
width: 960px;
background-color: Black;
color: #fff;
margin: auto auto 0px auto;
padding: 5px;
height:auto;
font-family: Segoe UI, Arial;
font-weight:bold;
min-height:15px;
}
.MenuTop ul
{
float: left;
list-style: none;
margin: -5px ;
padding: 0px;
}
.MenuTop li
{
float: left;
font-size:12px;
font-family: Segoe UI, Arial;
margin: 0;
padding: 0;
}
.MenuTop a
{
background-color: Black;
color: #fff;
display: block;
float: left;
margin: 0;
padding: 4px 12px 4px 12px;
text-decoration: none;
}
.MenuTop a:hover
{
background-color: #404040;
color: #fff;
padding: 4px 12px 4px 12px;
}
You were close, but you're forgetting about positioning your submenu items absolutely to your parent li menu item and hiding it as well, by using display:none and then showing it on hover, so try something like this to achieve that effect:
CSS
.Nav li {
position:relative;
}
.Nav li ul {
display:none;
position:absolute;
top:30px;
}
.Nav li:hover ul {
display:block;
}
Also, your submenu ul is not properly closed so go ahead and close it.
Ninja Edit: demo, by the way you can greatly benefit from properly targeting your menu by using the class you have given it, .Nav, instead of its parent class of its container, .MenuTop, that way you can target your menu and your menu alone and not any other element you might place inside that container,
I have created a working example for you on jsFiddle.
The HTML is as follows:
<nav>
<ul class="cf">
<li>Home</li>
<li>Vehicles
<ul>
<li>Sub-menu Item 1</li>
<li>Sub-menu Item 2</li>
<li>Sub-menu Item 3</li>
</ul>
</li>
<li>About</li>
<li>News</li>
</ul>
</nav>
and the CSS:
nav ul {
background: #ddd;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 25%;
}
nav a {
font-family: Lucida Grande;
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
display: block;
font: bold 14px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 1em;
visibility: hidden;
z-index: 1;
}
nav li:hover ul {
opacity: 1;
top: 1em;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
.cf:after, .cf:before {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}