I'm hoping one of you nice people can help. I have a pure CSS drop down menu, as part of the design it needs to be slightly away from the main menu item, the problem is that because of this design there's a gap - and so as soon as the mouse moves away from the sub menu it disappears. I want it to hold their for a while longer so the user has more chance to click. Can anyone help?
I've set up a JS fiddle here.
<div id="menu" class="top">
<ul>
<li>home</li>
<li>about</li>
<li>portfolio
<ul>
<li>Overview</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
</div>
#menu{
position:absolute;
left:0;
zoom:1;
background-color:#010;
}
#menu ul{
position:relative;
border-top: dotted 1px #fff;
border-bottom: dotted 1px #fff;
padding:2px 0 2px 0;
float:right;
zoom:1;
list-style:none;
}
#menu ul li{
margin:0;
font:16px/16px 'Open Sans', sans-serif;
padding:0 5px 0 0;
display:inline;
position:relative;
zoom:1;
}
#menu ul li a{
color:#fff;
text-decoration:none;
}
#menu ul li a:hover{
text-decoration:underline;
}
#menu ul li.selected a{
color:#8dc63e;
}
#menu ul li ul {
border: 2px solid #fff;
border-radius:10px;
background-color: #8dc63e;
padding: 0;
position: absolute;
top: 45px;
right: -30px;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.8s;
-moz-transition: opacity 0.8s;
-ms-transition: opacity 0.8s;
-o-transition: opacity 0.8s;
-transition: opacity 0.8s;
}
#menu ul li ul li {
display: block;
border-bottom: 1px solid #fff;
color: #fff;
padding:10px;
}
#menu ul li ul li:hover { text-decoration:underline; }
#menu ul li.selected ul li a { color: #fff;}
#menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:250;
}
#menu ul li ul:after{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #fff transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 64px;
}
It seemed a bit of a mess, lots of duplication with display:none being set as well as opacity:0 and visibility:hidden. There are a few z-indexes in there as well. Not nice to maintain.
Really what you need is for the UL menu to be opacity 0, with a transition to fade it in over time, but not too quick, and then the hover state to be opacity 1.
So from fiddling with your fiddle...
#menu ul li ul {
border: 2px solid #fff;
border-radius:10px;
background-color: #8dc63e;
padding: 0;
position: absolute;
top: 45px;
right: -30px;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
opacity: 0;
-webkit-transiton: opacity 8s;
-moz-transition: opacity 8s;
-ms-transition: opacity 8s;
-o-transition: opacity 8s;
-transition: opacity 8s;
}
and
#menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:250;
}
This one works, http://jsfiddle.net/ydF3B/1/ although I set the transition to be 8s from 0.8s... you might want to dig through and remove all the unneccessary styles and see what is actually going on.
Have fun :)
EDIT Complete justification for my earlier comment about wanting to dig through it all, the fiddle above doesn't solve your issue as pointed out in the comments :) Instead a better approach is to make the area you are hovering over larger, so that when you pass over from the menu item onto the menu, there is no actual gap, even though there is a visual gap. I did this by increasing the padding: http://jsfiddle.net/ydF3B/2/
Related
I am working on a fictitious website for my portfolio and am stuck on why the hover is moving the words. It moves every time I hover over the word.
Here is the code:
nav{
position:fixed;
z-index:1000;
top:0;
bottom:0;
width:150px;
background-color:black;
color:white;
line-height:60px;
}
nav a{
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.3s;
}
nav ul{
list-style-type:none;
margin-top:100px;
text-align:center;}
nav ul li a{
text-decoration: none;
display:inline-block;
text-align:center;
color:#fff;
}
nav a:hover {
background-color: #EBEBEB;
color: black;
margin: 0.5em 0;
display:block;
cursor:pointer;
}
nav a: hover: after{
text-decoration: none;
display:inline-block;
text-align:center;
color:#fff;
}
I really appreciate any feedback.
nav a:hover { background-color: #EBEBEB; color: black; margin:
0.5em 0; display:block; cursor:pointer; }
When you change the margin, the element will move. Change it to margin:0;
nav a:hover {
background-color: #EBEBEB;
color: black;
margin: 0;
display:block;
cursor:pointer;
}
If you want some sort of movement effect to happen without breaking the layout, you can try playing with position:relative and top:0.5em
I am trying to get the parent li (menu item) to widen (horizontally) on hover to fit all of the ul li items (submenu items) without hardcoding a width so no text is floating or cut off.
I am making a menu using an unordered list. Each submenu item is within the li tags of the main menu. My menu is horizontal and shows the submenu items when you hover over the elements.
I have tried various ways to try and get the li element to expand to the size of the submenu items or stay the same size if they are smaller. My clunky but working way was to hardcode a width of 22% on hover. I was wondering if there was a way to do this and to nicely fit the text rather than have a lot of white space. Hardcoding the width also causes menu items without submenu items to expand (I could work around this but I don't want to hardcode it to begin with).
I need to do this entirely in vanilla html, css, and javascript. It would also be nice if the solution were cross-browser compatible.
I apologize if my code is non-conventional, I have been trying to teach myself css. Thank you in advance.
The following is an example of my HTML/CSS (minus the links):
body {
margin: 0;
}
*{
font-family: Gotham Book, Arial, Helvetica, Sans-serif;
}
#navbar {
background-color: #f1f1f1;
text-align: center;
}
#navbaritems {
margin: 0 auto;
}
#navbaritems ul {
padding: 0;
width: 100%;
list-style-type: none;
margin: 0;
display: inline;
position: relative;
font-size: 0;
}
#navbaritems ul li {
display: inline-block;
white-space: nowrap;
text-align: center;
color: #000;
position: relative;
}
#navbaritems ul li ul {
width: 100%;
padding: 0;
position: absolute;
top: 6vh;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
text-align: center;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#navbaritems ul li ul li {
background-color: #f1f1f1;
display: block;
}
#navbaritems ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#navbaritems ul li:hover {
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
width: 22%;
}
#navbaritems ul li ul li:hover {
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
width: 100%;
}
#navbaritems ul li a {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
font-size: 1vw;
display: block;
height: 4vh;
line-height: 4vh;
color: #808080;
text-decoration: none;
padding: 1vh;
margin: 0;
}
#navbaritems ul li a:hover:not(.active) {
background-color: #82c986;
color: #ffffff;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
cursor: pointer;
display: block;
}
#navbaritems ul li a.active {
color: #ffffff;
background-color: #4CAF50;
}
<div id="navbar" class="addBottomShadow">
<div id="navbaritems">
<ul>
<li><a class="active">Home</a>
</li>
<li><a>Patient Eligibility</a>
<ul>
<li><a>Eligibility Tracker</a>
</li>
</ul>
</li>
<li><a>Claim Status</a>
</li>
<li><a>Remittance Advice</a>
</li>
<li><a>E-Claims Batch Status</a>
</li>
<li><a>Fees</a>
<ul>
<li><a>Update Fees</a>
</li>
<li><a>Reimbursement Report</a>
</li>
<li><a>Reimbursement Detail Report</a>
</li>
<li><a>Submit Fees</a>
</li>
</ul>
</li>
<li><a>Inquiries</a>
<ul>
<li><a>Customer Service Inquiries</a>
</li>
<li><a>COB Change Requests</a>
</li>
<li><a>Submit Inquiry</a>
</li>
</ul>
</li>
<li><a>Settings</a>
<ul>
<li><a>Procedure Sets</a>
</li>
<li><a>Eligibility Tracker</a>
</li>
<li><a>Claim Settings</a>
</li>
<li><a>Remittance Advice</a>
</li>
<li></li>
</ul>
</li>
<li><a>Other</a>
<ul>
<li><a>Provider Seminars</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
The big problem here is that the parent li element only knows to be as big as the main a until hover because the child ul has display:none; which means the width is effectively 0. Instead of using display:none; you could try forcing the height to be 0 and leaving the initial width. Then on hover, do height:inherit; to display the menu items. Remember to use overflow:hidden; so things don't go outside of the element when the height isn't big enough for them.
EDIT: Needed to do some more work, but I think this is what you are looking for.
This is my website - http://pl.bodwell.edu. Its a Wordpress site running a customized template(http://sketchthemes.com/samples/invert-business-demo/) and a widget called Max Mega menu(http://www.maxmegamenu.com/).
The problem I've got is that with the template's top nav bar and the nested menu when in mobile view. The nav bar is supposed to shrink as the user scrolls down the page. The menu and nav bar work great together in desktop screen size above 1024px width. However, when the viewport is shrunk below that, and the mobile menu triggers and replaces the full width menu that's when I have a problem.
The mobile menu works great when the page is at the top and the full header is in effect. But, when you scroll down and the minimal header comes into play, the mobile menu shifts up and covers the on/off toggle so the user cannot toggle the menu on and off - unless they scroll back all the way up, and the menu appears below the toggle (which is what I want). I've been using Firebug to see what the proper CSS selector is so I can forcefully shift the menu down, but I cannot for the life of me figure it out. I am not sure if it has something to do with the templates javascript that is responsible for minimizing the top header when scrolling down the page.
So I don't know if this is a purely CSS problem, a JS problem, or a combination of both.
Here is my CSS as it pertains to the menu styling.
#header.skehead-headernav-shrink { height: 60px; }
#skenav {background:none repeat scroll 0 0 transparent; display:block; margin-left:auto; margin-
right:auto; border:medium none; }
#skenav .ske-menu, ul.menu { font-size: 13px; margin: 0px; display:inline-block; width:auto;
float:right; }
#skenav .ske-menu ul.menu { list-style: none; margin: 0; }
#skenav .ske-menu .menu li, ul.menu li { float: left; position: relative; margin-left: 0px;
list-style: none outside none; }
#skenav a {color: #333333;display: block;font-size: 13px; text-transform:uppercase; line-height:
85px; padding: 0 22px;text-decoration: none;
transition: color 0.1s linear 0s, background 0.1s linear 0s; -webkit-transition: color 0.1s
linear 0s, background 0.1s linear 0s; -moz-transition: color 0.1s linear 0s, background 0.1s
linear 0s; -o-transition: color 0.1s linear 0s, background 0.1s linear 0s; }
#skenav ul ul { position: absolute; top: 100%; left: 0px; float: left; width: 200px; z-index:
99999; }
#skenav ul .sub-menu li ,#skenav ul ul li { display: block; width:100%; }
#skenav ul .children li:first-child, #skenav ul .sub-menu li:first-child { border-top: none; }
#skenav ul ul li{ border-top: 1px solid rgba(0,0,0,.15); }
#skenav ul ul ul.sub-menu,#skenav ul ul ul.children{ left: 100%; top: 0px !important; border-top: 0 none;margin-top:0; }
#skenav ul ul a { line-height: 1.2em; font-size: 13px; padding: 10px 20px; width: auto; height: auto; color: #FFFFFF; }
#header.skehead-headernav-shrink #skenav ul ul a { line-height: 1.2em; }
#skenav ul li:hover{ z-index:999999999999; }
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover { color: #fff; }
If anybody out there has the inclination to take a look at my site and help me out, I would truly appreciate it.
#header.skehead-headernav-shrink {
height: 60px;
}
#skenav {
background:none repeat scroll 0 0 transparent;
display:block;
margin-left:auto;
margin- right:auto;
border:medium none;
}
#skenav .ske-menu, ul.menu {
font-size: 13px;
margin: 0px;
display:inline-block;
width:auto;
float:right;
}
#skenav .ske-menu ul.menu {
list-style: none;
margin: 0;
}
#skenav .ske-menu .menu li, ul.menu li {
float: left;
position: relative;
margin-left: 0px;
list-style: none outside none;
}
#skenav a {
color: #333333;
display: block;
font-size: 13px;
text-transform:uppercase;
line-height: 85px;
padding: 0 22px;
text-decoration: none;
transition: color 0.1s linear 0s, background 0.1s linear 0s;
-webkit-transition: color 0.1s linear 0s, background 0.1s linear 0s;
-moz-transition: color 0.1s linear 0s, background 0.1s linear 0s;
-o-transition: color 0.1s linear 0s, background 0.1s linear 0s;
}
#skenav ul ul {
position: absolute;
top: 100%;
left: 0px;
float: left;
width: 200px;
z-index: 99999;
}
#skenav ul .sub-menu li, #skenav ul ul li {
display: block;
width:100%;
}
#skenav ul .children li:first-child, #skenav ul .sub-menu li:first-child {
border-top: none;
}
#skenav ul ul li {
border-top: 1px solid rgba(0, 0, 0, .15);
}
#skenav ul ul ul.sub-menu, #skenav ul ul ul.children {
left: 100%;
top: 0px !important;
border-top: 0 none;
margin-top:0;
}
#skenav ul ul a {
line-height: 1.2em;
font-size: 13px;
padding: 10px 20px;
width: auto;
height: auto;
color: #FFFFFF;
}
#header.skehead-headernav-shrink #skenav ul ul a {
line-height: 1.2em;
}
#skenav ul li:hover {
z-index:999999999999;
}
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover {
color: #fff;
}
I've made this dropdown menu that I want to add some nice slide effects on. Since I'm new to programming I can't get it to work, and I've googled for hours. I've prepared A jsfiddle
[Here][1] (cause that's what I should've done, right?).
I would appreciate it so much if I got a little help.
Thank you!
[1]: http://jsfiddle.net/knickemackan/2r6FE/
I have updated the JS Fiddle
You need to add jquery file, and add a little code to the JS file as shown below.
$("#navMainWrap li, #navMainWrap li a").hover(function () {
$(this).find("ul").slideDown("slow");
}, function() {
$(this).find("ul").slideUp("slow");
});
Regards D.
If you do "display:block;"; the height of the element won't animate automatically.
( http://jsfiddle.net/2r6FE/11/ )
Update your CSS like this:
#body {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
background-color: #FFF;
}
#header_wrapper {
width: 100%;
height: 150px;
margin: 0 auto;
background-color: #FFF;
}
#logo_wrapper {
height: 150px;
margin-left: 10%;
width: 500px;
background-image: url(../img/logo.png);
}
#nav {
background-color: #FFF;
border: 1px solid #ccc;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
z-index: 998;
position: relative;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
z-index: 999;
}
#nav ul li {
display: inline-block;
z-index: 1000;
position: relative;
}
#nav ul li:hover {
background-color: #BFF2FF;
}
#nav ul li a, visited {
color: #999;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li ul {
max-height:0;
-webkit-transition-property: max-height,opacity;
-moz-transition-property: max-height,opacity;
-ms-transition-property: max-height,opacity;
-o-transition-property: max-height,opacity;
transition-property: max-height,opacity;
-webkit-transition-duration: 0.3s,0,3s;
-moz-transition-duration: 0.3s,0,3s;
-ms-transition-duration: 0.3s,0,3s;
-o-transition-duration: 0.3s,0,3s;
transition-duration: 0.3s,0,3s;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-ms-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
overflow:hidden;
}
#nav ul li:hover ul {
max-height:600px;
}
#nav ul ul {
display: block;
position: absolute;
background-color: #FFFFFF;
border: 5px solid #ddd;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display:block;
}
#nav ul ul li a:hover {
color: #FFF;
}
#uploadcont {
background-color: fff;
height: 200px;
width: 500px;
}
#contactcont {
background-color: #ffffff;
width: 500px;
}
.alleft {
text-align: left;
}
#uploadcont_in {
height: auto;
margin: 25px;
padding: 10px;
border: 10px solid #FFF;
}
#contactcont_in {
height: auto;
margin: 25px;
padding: 10px;
}
To get something like a slide effect, you could use the max-height property:
#nav ul li:hover ul {
max-height: 500px;
}
#nav ul ul {
display:inline-block;
max-height: 0;
position: absolute;
overflow:hidden;
background-color: #FFFFFF;
border: 5px solid #ddd;
border-top: 0;
margin-left: -5px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 1s ease-in;
-ms-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}
This way, the sub-menus will expand when you hover its menu-point until they reach their original size or the max-height-value.
You could also use the left property instead of max-height to create a horizontal slide-effect.
I am stuck trying to expand menu items to full width. For some reason they are indented..
Also if I expand the menu name with more characters, it messes up the formatting. I'm trying to make it expand automatically, but if I remove the 'width' property it becomes messed up.
Thanks!
Fiddle code: http://jsfiddle.net/n877s/5/
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>username</span>
<ul class="dropdown">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
CSS
.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
top: 140%;
left: 0;
right: 0;
/* Styles */
background: black;
border-radius: inherit;
border: 1px solid rgba(0,0,0,0.17);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-weight: normal;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-3 .dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}
.wrapper-dropdown-3 .dropdown:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0,0,0,0.1) transparent;
}
.wrapper-dropdown-3 .dropdown li a {
display: block;
padding: 10px;
text-decoration: none;
color: #8aa8bd;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255,255,255,1);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown li i {
float: right;
color: inherit;
}
.wrapper-dropdown-3 .dropdown li:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown li:last-of-type a {
border: none;
border-radius: 0 0 7px 7px;
}
/* Hover state */
.wrapper-dropdown-3 .dropdown li:hover a {
background: #f3f8f8;
}
/* Active state */
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}
/* No CSS3 support */
.no-opacity .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
.no-opacity .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
display: block;
}
I hope this is what u need. Changed just a few things like left padding from dropdown class (spacing fix), changed width to auto on .wrapper-dropdown-3, and added some spacing around carret.
http://jsfiddle.net/n877s/8/
I added dummy text in button,just for testing purposes, and it works well.
Indentation is caused by ULs default left padding (or in any browsers padding), it´s 40px. So, set
.wrapper-dropdown-3 {margin-left: 0; padding-left: 0;}
If you have longer items in submenu and don't want set the width, you can force one-line items using
white-space: nowrap;