I have a vertical list of navigation icons, with a sub-menu (under the News tab). I want this submenu to transition from a width 0 to its full width (150px) when I hover over its parent option on the main navigation menu. Currently, the transition is not happening - it is going straight to the full width with no transition.
I pasted all the relevant code (parts of the css that are important for the transition are at the bottom below the marked point).
HTML:
<div id="nav">
<ul>
<li>Home</li>
<li>News
<ul>
<li>Current</li>
<li>Archive</li>
</ul></li>
<li>History</li>
</ul>
</div>
CSS:
#nav {
height: auto;
width: 150px;
float: left;
}
#nav a {
display: block;
padding: 6px 0px;
text-indent: 5px;
color: #ffffff;
font-size: 12px;
text-decoration: none;
border: 3px solid;
border-color: #9c6741 #663918 #572e11 #96643f;
}
#nav ul {
padding: 0px;
margin-top: 0px;
}
#nav li {
list-style: none;
float: left;
width: 150px; /*150-2 for border*/
background-color: #8f5f3c;
}
#nav ul li:hover {
background-color: #7d5334;
}
#nav ul li:hover a {
border-color: #8f5e39 #663918 #572e11 #8a5b38;
}
#nav ul li ul {
display: none;
position: absolute;
margin-top: -33px;
margin-left: 150px;
padding: 0;
}
#nav ul li:hover ul {
display: block;
}
/*code for transition begins here*/
#nav ul li ul li {
float: none;
overflow: hidden;
width: 0px;
transition: width 1s ease-in;
}
#nav ul li:hover ul li {
width: 148px;
}
You can't call an animation on something that is invisible.
https://jsfiddle.net/scLhp54w/1/
#nav ul li ul {
/*display: none; */
position: absolute;
margin-top: -33px;
margin-left: 150px;
padding: 0;
}
Related
I have a menu and submenu from one of the elements. The code is here: http://jsfiddle.net/mq5g6upe/ . I would like you to tell me how to implement vertical dropdown menu from element My project because now it not seem ok.
header.html
<header>
<div class="main">
<ul>
<li>Home</li>
<li>My projects
<ul class="my-projects-dropdown">
<li>Endless Blow
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>My Google Play link</li>
<li>About</li>
<li><input type="submit" class="a-login" value="Login" (click)="navigateToLogin()"></li>
</ul>
</div>
</header>
header.css
#container {
margin: 0 auto;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
margin-right: 115px;
}
ul li {
display: inline-block;
vertical-align: middle;
}
ul li a {
text-decoration: none !important;
padding: 5px 20px;
border: 1px solid #000;
color: #000;
transition: 0.4s ease;
font-size: 20px !important;
}
ul li a:hover {
background-color: cyan;
}
ul li a.li-login {
text-decoration: none !important;
position: relative;
margin-left: 10px;
padding: 5px 10px;
color: #000;
transition: 0.4s ease;
font-size: 16px !important;
border: none;
vertical-align: middle;
line-height: normal;
}
ul li:hover > ul {
visibility: visible;
opacity: 1;
display: block;
}
ul li:nth-child(5){
margin-left: 20px;
vertical-align: middle;
line-height: normal;
}
ul ul {
display: none;
position: absolute;
}
ul ul li {
float:none;
display:list-item;
position: relative;
}
Now there are three problems. First the submenu of items seems to overlap on another elements. Second there is a distance between the menu element My projects and first element of submen. Third outside jsfiddle in production (https://jakuwegiel.web.app/home) also submenu is moved a bit to right.
I forked your fiddle. check this https://jsfiddle.net/wrtxkz0d .
Made these changes in your css. Dropdown is working.
ul li:hover > ul {
visibility: visible;
opacity: 1;
display: block;
margin:0;
padding: 0;
}
ul ul li {
float:none;
display:list-item;
position: relative;
margin: 13px 0;
}
I have a Nav with some unordered elements displayed horizontally and then I have a submenu from one of those elements of the nav, so far I'm displaying all the elements inline but I would like to display them side by side, just two of them per line.
How it actually looks:
And how I want it to be:
Just two columns displaying elements side by side, aligned to left side (of 50% width each side).
But I can't get it done, here's what I got so far
HTML
<nav id="menu">
<ul>
<li class="menu1">HOME</li>
<li class="left">NEWS</li>
<li class="left">VIDEOS</li>
<li class="left">STYLE</li>
<li class="left">BEAUTY</li>
<li class="left">MOMS</li>
<li class="left">ENTERTAINMENT</li>
<li class="left">PETS</li>
<li class="left">NEWS
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
<li>Content4</li>
<li>Content5</li>
<li>Content6</li>
<li>Content7</li>
<li>Content8</li>
</ul>
</li>
</nav>
CSS
#menu {
position: absolute;
left:80px;
top:50%;
transform: translate(0%,-50%);
-webkit-transform: translate(0%,-50%);
}
#menu ul {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
top:50%;
}
#menu ul li {
display: inline;
position: relative;
}
#menu ul li a {
color: #fff;
text-decoration: none;
font-family: 'Cabin', sans-serif;
background-color: ;
position: relative;
padding-top: 12px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
transition: background-color 0.2s ease-in-out;
}
#menu ul li a.news {
color:#ec008c;
transition: color 0.2s ease-in-out;
}
#menu ul li a:hover.news {
color: #fff;
}
#menu ul li a:hover {
background-color: #ec008c;
text-decoration: none;
border-bottom: 2px solid #bf1b33;
color: #fff;
}
#menu ul ul
{
display:none;
position:absolute;
top:100%;
right: 0%;
margin-left:0px;
text-align: center;
width: 350px;
line-height: 60px;
margin-top:12px;
background-color: #243641;
}
#menu ul ul.longer {
width: 150px;
}
#menu ul ul li
{
float:none;
width:100%;
background-color: ;
}
#menu ul ul a
{
line-height: 0px;
padding:0px 5px;
width: 100%;
background-color: ;
}
#menu ul li:hover > ul
{
display:block;
}
You can do something like this :
#menu ul ul li
{
float: left;
width: 50%;
}
See working demo here
You can use display: flex on the last ul and set a flex-basis width on the children (li). See my example below.
#menu ul li:hover > ul {
display: flex;
flex-flow: row wrap;
}
#menu ul ul li {
flex-basis: 50%;
}
This is all the extra code that's needed. I also fixed your code. because the <ul> didn't have closed tag (</ul>).
#menu {
position: absolute;
left: 80px;
top: 50%;
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
}
#menu ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
top: 50%;
}
#menu ul li {
display: inline;
position: relative;
}
#menu ul li a {
color: #fff;
text-decoration: none;
font-family: 'Cabin', sans-serif;
background-color: ;
position: relative;
padding-top: 12px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
transition: background-color 0.2s ease-in-out;
}
#menu ul li a.news {
color: #ec008c;
transition: color 0.2s ease-in-out;
}
#menu ul li a:hover.news {
color: #fff;
}
#menu ul li a:hover {
background-color: #ec008c;
text-decoration: none;
border-bottom: 2px solid #bf1b33;
color: #fff;
}
#menu ul ul {
display: none;
position: absolute;
top: 100%;
right: 0%;
margin-left: 0px;
text-align: center;
width: 350px;
line-height: 60px;
margin-top: 12px;
background-color: #243641;
}
#menu ul ul.longer {
width: 150px;
}
#menu ul ul li {
float: none;
width: 100%;
background-color: ;
}
#menu ul ul a {
line-height: 0px;
padding: 0px 5px;
width: 100%;
background-color: ;
}
#menu ul li:hover > ul {
display: flex;
flex-flow: row wrap;
}
#menu ul ul li {
flex-basis: 50%;
}
<nav id="menu">
<ul>
<li class="menu1">HOME</li>
<li class="left">NEWS</li>
<li class="left">VIDEOS</li>
<li class="left">STYLE</li>
<li class="left">BEAUTY</li>
<li class="left">MOMS</li>
<li class="left">ENTERTAINMENT</li>
<li class="left">PETS</li>
<li class="left">NEWS
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
<li>Content4</li>
<li>Content5</li>
<li>Content6</li>
<li>Content7</li>
<li>Content8</li>
</ul>
</li>
</ul>
</nav>
You should use display: inline-block; width width: 50% on #menu ul ul li elements:
#menu ul ul {
display:none;
position:absolute;
top:100%;
right: 0%;
margin-left:0px;
text-align: center;
width: 350px;
line-height: 60px;
margin-top:12px;
background-color: #243641;
font-size: 0; /* white spaces fix */
}
#menu ul ul li {
font-size: 1rem; /* white spaces fix */
float: none;
width: 50%;
display: inline-block;
background-color: ;
}
#menu ul ul a {
display: block;
padding: 0px 5px;
width: 100%;
background-color: ;
}
JSfiddle here.
This might be useful for your needs.
I don't know if you are using any framework or not, but this should work for you :)
http://alijafarian.com/bootstrap-multi-column-dropdown-menu/
I have a hovering drop down menu, after putting a border on hover, my dropdown menu overlaps with the menu. Tried to add padding but it's even worse. How can you adjust the position of the dropdown, knowing I have a 5px border transparent when not hovering, transforming into a 5px border solid at bottom when hovering?
#nav {
background-color: #e26a63;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
border: 5px solid transparent;
}
#nav ul li:hover {
background-color: #cb5f59;
border-bottom: 5px solid #9e4a45;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li>
</ul>
</div>
</div>
Short answer is to add margin-top: 5px; to #nav ul ul, where 5px is the same value of the bottom border width.
Note the following set of style outputs a trapezoid shape1 bottom border on hover.
#nav ul li { border: 5px solid transparent; }
#nav ul li:hover { border-bottom: 5px solid #9e4a45; }
Change border in first line to border-bottom it will then output a real rectangle shape.
I also reorganized the CSS table layout, make the table to be centered automatically (I guess you wanted that, but it's easy to change if not). And removed the border style in drop down items.
Jsfiddle Example
#nav {
background-color: #e26a63;
}
#wrap {
display: table;
height: 100px;
margin: 0 auto;
}
#nav ul {
padding: 0;
margin: 0;
display: table-cell;
vertical-align: bottom;
}
#nav ul li {
display: inline-block;
border-bottom: 5px solid transparent;
}
#nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: white;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
margin-top: 5px;
}
#nav ul ul li {
display: block;
min-width: 200px;
}
/* hover */
#nav ul li:hover {
background-color: #cb5f59;
border-bottom-color: #9e4a45;
}
#nav ul li:hover ul {
display: block;
}
#nav ul li:hover li {
border-bottom-width: 0;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li>
</ul>
</div>
</div>
In addition, you can also use :after + background to get the same bottom border style.
Jsfiddle Example
#nav {
background-color: #e26a63;
}
#wrap {
display: table;
height: 100px;
margin: 0 auto;
}
#nav ul {
padding: 0;
margin: 0;
display: table-cell;
vertical-align: bottom;
}
#nav ul li {
display: inline-block;
}
#nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: white;
}
#nav ul li:after {
content: "";
display: block;
height: 5px;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
margin-top: 5px;
}
#nav ul ul li {
display: block;
min-width: 200px;
}
/* hover */
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul li:after {
height: 0;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li>
</ul>
</div>
</div>
1 The Shapes of CSS - https://css-tricks.com/examples/ShapesOfCSS/
Because you've integrated your dropdown inside your header it might resize the header if you'd just make it visible.
An easy solution is to add something like this:
ul li ul{
position: absolute;
top: 58px;
}
By making this element absolute we "break" it out of the header code.
Note: this prabably isn't the perfect code, but it might give you a direction.
Your ul is absolute positioned, so it is implicitly at top: 0px,
Just set this to 5px to compensate the border size
#nav ul ul {
top: 5px; /* added */
}
#nav {
background-color: #e26a63;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
border: 5px solid transparent;
}
#nav ul li:hover {
background-color: #cb5f59;
border-bottom: 5px solid #9e4a45;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li>
</ul>
</div>
</div>
you can change the border to box-shadow and a box shadow does not take up place from the box model
#nav ul li:hover {
background-color: #cb5f59;
box-shadow: 0 -2.2px 0 #9e4a45 inset,0 0 0 #9e4a45;
}
I have a hover drop down menu on my website. It displays ok until you hover over. The submenu appears but before you can click on a link, the sub menu vanishes.
Here is the HTML -
<div id="top-nav"><div id="nav">
<nav>
<ul id="menu" style="list-style-type: none;">
<li id="sub">Artists
<ul>
<li>Banks</li>
<li>Lil Silva</li>
<li>Frances and the Lights</li>
<li>Jim-E Stack</li>
</ul>
</li>
<li>Night</li>
<li>Info</li>
</ul>
</nav>
</div>
</div>
And here is the CSS -
#nav {
text-align:center;
list-style: none;
}
ul#menu {
background-color: #FFFFFF;
list-style: none outside none;
margin: 0 auto;
padding-bottom: 0px;
padding-top: 0px;
text-align: center;
width: 300px;
}
ul#menu:after {
content: "";
background-color: #FFFFFF;
height: 10px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 20px;
}
ul#menu li {
float: left;
}
ul#menu li a {
color: #666666;
font-size: 12px;
margin: 0;
padding: 0px 35px;
text-decoration: none;
}
ul#menu li a:hover {
background-color: #ccc;
}
a.selected-page, ul#menu a.selected-page:hover {
background-color: #FFFFFF;
}
li#sub ul {
display: none;
position: absolute;
background-color: #FFFFFF;
z-index: 22222;
margin-top: 4px;
overflow: hidden;
}
li#sub ul li {
display: block;
float: none;
border-top-style: none;
border-width: 2px;
border-color: #FFFFFF;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
ul#menu li#sub:hover ul {
display: block;
}
ul#menu li#sub ul li:hover {
background-color: #FFFFFF;
}
What am I doing wrong? Any help is greatly appreciated!
the problem is the following line of your CSS code:
li#sub ul {
...
margin-top: 4px;
...
}
Just remove this margin-top and your drop down menu will work properly.
In your example there is a 4px margin space between the "Artists"-link and the drop down menu below. And if your cursors leaves the link and enters this "margin area", the browser interprets it as un-hovering the link - and hides the drop down.
Like dalucks said, remove the top margin from your CSS:
li#sub ul {
margin-top:0;
}
Also, reduce the left margin/paddings from the submenu UL and/or LI children. With the original large values (35px) the menu could be hovered over a lot of invisible space.
ul#menu li ul li a {
padding-left:5px;
}
Fiddle: http://jsfiddle.net/LXwTr/
Add Padding: 0 to this
li#sub ul {
padding: 0;
}
http://jsfiddle.net/tdQmE/
i've a menu with sub menus in it, i've added border at bottom while hovering but when i hover on the menu the menu height increases a bit, the whole menu takes a space at top and bottom when i put it in a div.
here is my fiddle : http://jsfiddle.net/p7Nsf/
<div class="head"></div>
<div class="menudiv">
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School</li>
<li>Vision and Mission </li>
<li>Principal’s desk
<li>Management
</ul> </li>
<li>Admission
<ul>
<li>Overview</li>
<li>Download application form</li>
</ul> </li>
<li>Gallery</li>
<li>School Calander</li>
<li>News & Events</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div><!-- menu div ends-->
<div class="foot"></div>
CSS
.menudiv
{
width:980px;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size:14px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #111312;
list-style: none;
position: relative;
display: inline-table;
border:3px solid #111312;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding-top: 10px; padding-left: 25px; padding-right: 25px; padding-bottom: 10px;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.head
{
width:500px;
height:200px;
background:#789;
}
.foot
{
width:500px;
height:200px;
background:#123;
}
Try this, your menu item jumps because you are adding border to the item so it increases its height by the 3 px border
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
}
http://jsfiddle.net/p7Nsf/1/
reduce padding on the anchor to compensate for the 3px
.menu ul li a {
padding-bottom: 7px;
}
http://jsfiddle.net/p7Nsf/2/
Update
.menu ul {
background: none repeat scroll 0 0 #111312;
border: 3px solid #111312;
display: inline-table;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
I removed the display prop
http://jsfiddle.net/p7Nsf/4/