/*.dropdownMenuLista {
-webkit-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
-moz-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
-ms-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
-o-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
max-height: 0;
display: block;
padding: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
}
.dropdownMenu {
-webkit-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
-moz-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
-ms-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
-o-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
transition: max-height 0.6s, opacity 0.2s, visibility 0s;
max-height: 290px;
opacity: 1;
visibility: visible;
padding: 0;
}*/
ul.ulDropMenu{
float: left;
}
ul.ulDropMenu li{
float: left;
list-style: none;
position: relative;
}
ul.ulDropMenu li a{
display: block;
padding: 9px 14px;
}
ul.ulDropMenu li ul{
display: none;
position: absolute;
background-color: #fff;
border-radius: 4px;
padding: 8px;
}
ul.ulDropMenu li:hover ul{
display: block;
}
ul.ulDropMenu li ul li{
width: 120px;
}
ul.ulDropMenu li ul li a{
padding: 6px 14px;
color: #2A2A2A;
}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<ul class="ulDropMenu">
<li class="pr-5 dropdownMenu">
<a class="nav-link" id="navbarDropdown" aria-haspopup="true" aria-expanded="false" role="button" data-toggle="dropdown" style="transition: color .4s;" href="#">Drop Menu
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdownMenuLista">
<li aria-labelledby="navbarDropdown">
<a style="transition: color .4s;" href="#">items</a>
<a style="transition: color .4s;" href="#">items</a>
<a style="transition: color .4s;" href="#">items</a>
</li>
</ul>
</li>
</ul>
How to put an animation with transition on this drop menu? I have this code that should put an animation on drop menu, but it's not working.
When i add the classes dropdownMenuLista and dropdownMenu the dropmenu stop working.
I'm using bootstrap, but I don't want to use the JS drop menu from bootstrap. I need a CSS version of the drop menu for some purposes.....
The whole thing could be cleaned up a lot, but doing this would not explain to you what is wrong, so I will change only what is necessary.
The core issue here is that you cannot animate from max-height of display: none to display: block, because there is no max-height for non-block items.
Thus we need to remove switching of display of ul.ulDropMenu li:hover ul(. dropdownMenuLista) element and show/hide some other way. Since it is hidden in .dropdownMenuLista class, by max-height, opacity and visibility props, we need to enable those on hover.
Additionally, your visibility animation was 4 secs but others were < 1sec. Thus the possibly visible animations would run through before the element actually became visible after 4 seconds.
All changes are marked with comments it the snippet.
.dropdownMenuLista {
-webkit-transition: max-height 1s, opacity 0.2s 0.1s;
-moz-transition: max-height 1s, opacity 0.2s 0.1s;
-ms-transition: max-height 1s, opacity 0.2s 0.1s;
-o-transition: max-height 1s, opacity 0.2s 0.1s;
transition: max-height 1s, opacity 0.2s 0.1s;
/* removed visibility animation */
max-height: 0;
display: block;
padding: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
}
.dropdownMenu {
-webkit-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
-moz-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
-ms-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
-o-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
transition: max-height 0.6s, opacity 0.2s, visibility 0s;
max-height: 290px;
opacity: 1;
visibility: visible;
padding: 0;
}
ul.ulDropMenu{
float: left;
}
ul.ulDropMenu li{
float: left;
list-style: none;
position: relative;
}
ul.ulDropMenu li a{
display: block;
padding: 9px 14px;
}
ul.ulDropMenu li ul{
/* display: none; - cannot animate */
position: absolute;
background-color: #fff;
border-radius: 4px;
padding: 8px;
}
ul.ulDropMenu li:hover ul{
/* display: block; - cannot animate */
/* show by enabling all props that
hide this element in .dropdownMenuLista
style */
max-height: 290px;
visibility: visible;
opacity: 1;
}
ul.ulDropMenu li ul li{
width: 120px;
}
ul.ulDropMenu li ul li a{
padding: 6px 14px;
color: #2A2A2A;
}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<ul class="ulDropMenu">
<li class="pr-5 dropdownMenu">
<a class="nav-link" id="navbarDropdown" aria-haspopup="true" aria-expanded="false" role="button" data-toggle="dropdown" style="transition: color .4s;" href="#">Drop Menu
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdownMenuLista">
<li aria-labelledby="navbarDropdown">
<a style="transition: color .4s;" href="#">items</a>
<a style="transition: color .4s;" href="#">items</a>
<a style="transition: color .4s;" href="#">items</a>
</li>
</ul>
</li>
</ul>
Related
I have a question about an html list. I have created a list with HTML and styled it with CSS. The list has children. See the screenshot I attached. My question is the following: I want to add an arrow after the text of the parent, when it has children. The arrow should point down. When the dropdown is opened, the arrow should point up.
This is about Wordpress. I have put the code in this jsfiddle: https://jsfiddle.net/ralphsmit/o4a3L86m/1/. Note that all styling is removed, therefore it looks quite ugly ;-), but the concept is the same.
The arrow should look like this: https://www.kisspng.com/png-chevron-corporation-computer-icons-arrow-symbol-ar-1215165/. If the menuitem is opened, the arrow should be pointing upwards. Furthermore, a menuitem has a standard opacity of .5, which increases to 1.0 when it is hovered. The arrow should do the same thing. When the page (Say ''News'') is the current opened page, the text turns red. I've done this with the .current_page_item class. It would be awesome if the arrow could do this too!
ul li.current_page_item > a {
color: rgba(255, 0, 0, 1.0);
}
I would be very grateful if you could help me with this!
/* Define a fixed width for the entire menu */
.navigation {
width: 80%;
position: relative;
top: 0px;
left: 0px;
margin-bottom: 28px;
pointer-events: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
nav ul:hover > li {
opacity: 0.5;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .3s ease;
transition: all .2s ease;
}
nav ul li:hover {
opacity: 1;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .3s ease;
transition: all .2s ease;
}
nav>ul, .sub-menu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and sub-menu) have padding and background color */
.mainmenu a {
display: block;
font-family: 'Playfair Display', sans-serif;;
font-weight: normal;
text-decoration: none;
font-size: 37px;
padding: 10px;
color: rgba(255, 255, 255, 1.0);
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
/* add hover behaviour */
.mainmenu a:hover {
opacity: 1.0 !important;
}
/* when hovering over a .mainmenu item,
display the sub-menu inside it.
we're changing the sub-menu's max-height from 0 to 600px;
*/
.mainmenu li:hover .sub-menu {
display: block;
max-height: 600px;
}
/*
we now overwrite the background-color for .sub-menu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.sub-menu a {
background-color: rgb(0, 0, 0);
opacity: 0.5;
margin-left: 24px;
font-size: 22px;
}
/* hover behaviour for links inside .sub-menu */
.sub-menu a:hover {
background-color: rgb(0, 0, 0);
opacity: 1.0;
}
/* this is the initial state of all sub-menus.
we set it to max-height: 0, and hide the overflowed content.
*/
.sub-menu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
ul li.current_page_item > a {
color: rgba(255, 0, 0, 1.0);
}
.navigation {
width: 80%;
position: relative;
top: 0px;
left: 0px;
margin-bottom: 28px;
pointer-events: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
nav ul:hover > li {
opacity: 0.5;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .3s ease;
transition: all .2s ease;
}
nav ul li:hover {
opacity: 1;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .3s ease;
transition: all .2s ease;
}
nav>ul, .sub-menu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and sub-menu) have padding and background color */
.mainmenu a {
display: block;
font-family: 'Playfair Display', sans-serif;;
font-weight: normal;
text-decoration: none;
font-size: 37px;
padding: 10px;
color: rgba(255, 255, 255, 1.0);
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
/* add hover behaviour */
.mainmenu a:hover {
opacity: 1.0 !important;
}
/* when hovering over a .mainmenu item,
display the sub-menu inside it.
we're changing the sub-menu's max-height from 0 to 600px;
*/
.mainmenu li:hover .sub-menu {
display: block;
max-height: 600px;
}
.fa-chevron-up {
display: none;
opacity: 0;
}
.mainmenu li:hover .fa-chevron-up {
display: inline-block;
opacity: 1;
}
.fa-chevron-down {
opacity: 1;
}
.mainmenu li:hover .fa-chevron-down {
display: none;
}
/*
we now overwrite the background-color for .sub-menu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.sub-menu a {
background-color: rgb(0, 0, 0);
opacity: 0.5;
margin-left: 24px;
font-size: 22px;
}
/* hover behaviour for links inside .sub-menu */
.sub-menu a:hover {
background-color: rgb(0, 0, 0);
opacity: 1.0;
}
/* this is the initial state of all sub-menus.
we set it to max-height: 0, and hide the overflowed content.
*/
.sub-menu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
ul li.current_page_item > a {
color: rgba(255, 0, 0, 1.0);
}
* {
margin:0;
padding:0;
}
body {
background-color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<nav>
<ul id="menu-header-menu" class="mainmenu"><li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22">Work</li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23">About</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19">
<a href="http://localhost/wordpress/about/">News <i class="fas fa-chevron-down"></i><i class="fas fa-chevron-up"></i>
</a>
<ul class="sub-menu">
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20">Page two – dropdown two</li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21">Page two – dropdown one</li>
</ul>
</li>
<li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24">Link 1</li>
<li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25">2</li>
<li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26">3</li>
<li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27">4</li>
<li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-28">5
<ul class="sub-menu">
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-30">Drop 1
<ul class="sub-menu">
<li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31">Drop 2</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29">6</li>
<li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32">7link</li>
</ul>
</nav>
</body>
</html>
Use font-awesome icons to get the arrows.
Go through this link https://www.w3schools.com/icons/fontawesome5_intro.asp or you can also visit their official site
Hope it'll help
you can use Pseudo-elements
.menu-item-has-children {
position: relative;
margin-left: 40px;
}
.menu-item-has-children:before {
content: '';
background: url(https://www.kforce.com/scripts/tablesaw/icons/png/icon-chevron-down.png);
position: absolute;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-size: cover;
left: -30px;
top: 12px;
}
.menu-item-has-children:hover:before {
transform: rotate(180deg);
}
Working fiddle: https://jsfiddle.net/av70zbcq/
Here you go : https://jsfiddle.net/qunyma6c/
This is a CSS only solution
What I did is find the has-children class, Then added a "CSS after selector" that's where the arrow icon will be, I used an arrow character but you can simply change that to an image or an icon as you like, Then added a hover for the after selector for the rotation and transition.
.menu-item-has-children { position: relative; padding-left: 20px; }
.menu-item-has-children::after {
position: absolute;
top: 20px;
left: 5px;
content: "▼";
color: #fff!important;
}
.menu-item-has-children:hover::after {
-webkit-transition: -webkit-transform .2s ease-in-out;
-ms-transition: -ms-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
I am creating a vertical dropdown menu with several sub menus that only shown whenever i click the corresponding
icon (which is angle down arrow) in the menu. after the sub-menu is shown the angle down arrow should be reverted to be angle up arrow that whenever clicked the sub-menu disappears again.
what i could do till now is that when i click the angle-down arrow for the first time the sub-menu slides but no reverted arrow or any functionality any more so i can not
hide the sub-menu again.
HTML: one sample menu item
<li class="menu">
<a href="#" tabindex=0>First</a>
<label for="close-1" ><i class="fa fa-angle-up"></i></label>
<input type="radio" id="close-1" name="toggle1" >
<label for="open-1"><i class="fa fa-angle-down" ></i></label>
<input type="radio" name="toggle1" id="open-1">
<ul class="sub-menu">
<li>Test</li>
<li>Test</li>
</ul>
</li>
CSS:
input[type="radio"] {
display: none;
}
.menu {
position: relative;
padding: 1em ;
font-weight: 700;
width: 100%;
border: 1px solid #eee;
border-right: none;
}
.sub-menu {
max-height: 0;
transition: max-height 0.4s ease-in-out;
overflow: hidden;
padding: 0.5em;
}
.menu label {
position: absolute;
right: 10px;
top: 20px;
transition: 0.4s ease-in-out;
}
input[type="radio"]:checked + .sub-menu{
max-height: 320px;
transition: max-height 0.4s ease-in-out;
}
I tried some thing like that but did not work
input[type="radio"]:checked label:nth-of-type(2) {
opacity: 0;
visibility: hidden;
}
input[type="radio"]:checked label:nth-of-type(1) {
opacity: 1;
visibility: visible;
}
My idea is to toggle the two arrows showing and i think my problem would be solved, but i have no idea to achieve that without js.
Added some animation and made it absolute by following your code: Fiddle
No animation: Fiddle
.menu {
position: relative;
padding: 1em;
font-weight: 700;
width: 100%;
border: 1px solid #eee;
border-right: none;
}
.sub-menu {
max-height: 0;
transition: max-height 0.4s ease-in-out;
-webkit-transition: max-height 0.4s ease-in-out;
-moz-transition: max-height 0.4s ease-in-out;
-ms-transition: max-height 0.4s ease-in-out;
overflow: hidden;
padding: 0, 0.5em, 0.5em;
}
.close {
opacity: 0;
}
.open {
opacity: 1;
z-index: 5;
}
#open-1:checked~.close {
opacity: 1;
}
input[type="radio"] {
display: none;
}
input[type="radio"]~label {
position: absolute;
right: 10px;
top: 20px;
transition: 0.4s ease-in-out;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-ms-transition: 0.4s ease-in-out;
cursor: pointer;
}
#open-1:checked~.open {
opacity: 0;
z-index: 0;
}
#close-1:checked~.sub-menu {
max-height: 0px;
transition: max-height 0.4s ease-in-out;
-webkit-transition: max-height 0.4s ease-in-out;
-moz-transition: max-height 0.4s ease-in-out;
-ms-transition: max-height 0.4s ease-in-out;
}
#open-1:checked~.sub-menu {
max-height: 320px;
transition: max-height 0.4s ease-in-out;
-webkit-transition: max-height 0.4s ease-in-out;
-moz-transition: max-height 0.4s ease-in-out;
-ms-transition: max-height 0.4s ease-in-out;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<li class="menu">
<a href="#" tabindex=0>First</a>
<input type="radio" id="open-1" name="toggle1">
<label class="open" for="open-1">
<i class="fa fa-angle-down"></i>
</label>
<input type="radio" id="close-1" name="toggle1">
<label class="close" for="close-1">
<i class="fa fa-angle-up"></i>
</label>
<ul class="sub-menu">
<li>Test</li>
<li>Test</li>
</ul>
</li>
.Button_Image {
width: 40px;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
opacity: 1;
}
.Button:hover .Button_Image {
opacity: 0;
}
.Button_Name {
font-size: 18px;
color: black;
line-height: 40px;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
opacity: 0;
}
.Button:hover .Button_Name {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" class="Button btn btn-success btn-block">
<img class="Button_Image" src="https://i.stack.imgur.com/hiAkR.png">
<span class="Button_Name">Football</span>
</a>
I have a button which has 2 elements inside.
Image of a sport
Name of the sport
When either of these have the css value display: none; the visible one is aligned to center perfectly.
But I needed to add a fade-in-out functionality, so I wasn't able to use display keyword. Instead I went for opacity.
Which resulted these 2 elements to stay side by side even if one is hidden.
How can I center these, when the other one is hidden?
This image has been captured during the transmission event:
The current state is like this:
But I need it like this:
You can achieve what you want with absolute positioning of the image. Is something like this what you want?:
.sportbtn {
border: green 1px solid;
width: 150px;
height: 40px;
position: relative;
line-height: 40px;
}
.sportimg {
/* centered in button */
width: 30px;
transition: left 1s, margin-left 1s;
position: absolute;
left: 50%;
margin-left: -15px; /* half the image width */
margin-top: 5px;
}
.sportname {
transition: opacity 1s;
opacity: 0;
margin-left: 40px;
}
.sportbtn:hover .sportname {
opacity: 1;
}
.sportbtn:hover .sportimg {
margin-left: 0px;
left: 5px;
}
<div class="sportbtn">
<img class="sportimg" src="https://d30y9cdsu7xlg0.cloudfront.net/png/23344-200.png" />
<span class="sportname">Football</span>
</div>
I'm using a CSS transition to show the sub-menu. The main-menu sits in the right hand column and the sub-menu appears when the user hovers over it. The first menu items slides out of the left on the menu and then the other menu items drop down from it.
The problem I have is that the sub-menu needs to be wider than the main-menu and when the user hovers over, the menu starts too far over the right. I want the menu to get bigger at the same speed that it moves out but where it will have reached the maximum width before it's finished moveing. How to I achieve this?
.mainmenu ul li ul{
margin-left: 0;
max-height:61px;
width:263px;
overflow: hidden;
-webkit-transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in;
-moz-transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in;
-o-transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in;
-ms-transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in;
transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in, width 0s ease-in 1s;
}
.mainmenu li:hover ul{
margin-left: -262px;
width:263px;
max-height: 999px;
-webkit-transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s;
-moz-transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s;
-o-transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s;
-ms-transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s;
transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s, width 0s ease-in;
}
#mobile_menu .mainmenu li ul{
display: block;
position:static;
margin: 0;
max-height: 999px;
}
<div id="mobile_menu">
<div class="mainmenu">
<ul>
<li><a href='/home-0.html' class='active' >Home</a></li>
<li><a href='/blog-25.html' class='' >Blog</a></li>
<li>
<a href='/contact-us-8.html' class='' >Contact Us</a>
<ul>
<li><a href='/contact-us/find-us-27.html' >Find Us</a></li>
<li><a href='/contact-us/about-us-28.html' >About Us</a></li>
<li><a href='/contact-us/meet-the-team-29.html' >Meet the Team</a></li>
</ul>
</li>
</ul>
</div>
</div>
There is some work on it and had to restructure the CSS, but it is basically like follows:
HTML:
<div id="mobile_menu">
<div class="mainmenu">
<ul>
<li><a href='#' class='active'>Home</a></li>
<li><a href='#' class=''>Blog</a></li>
<li>
<a href='#' class=''>Contact Us</a>
<ul>
<li><a href='#'>Find Us</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Meet the Team</a></li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
#mobile_menu .mainmenu {
width: 100px;
}
#mobile_menu .mainmenu ul {
padding: 0;
width: 100px;
}
#mobile_menu .mainmenu ul li {
list-style: none;
}
#mobile_menu .mainmenu ul li ul {
height: 18px;
margin-left: 0;
margin-top: -18px;
overflow: hidden;
-webkit-transition: height 1s 1s, margin-left 1s, width 1s;
-moz-transition: height 1s 1s, margin-left 1s, width 1s;
-o-transition: height 1s 1s, margin-left 1s, width 1s;
transition: height 1s 1s, margin-left 1s, width 1s;
width: 0;
}
#mobile_menu .mainmenu ul li:hover ul {
height: 100px;
margin-left: 100px;
width: 100%;
}
... and of course the JSfiddle as well. :)
I tried to make a menu, which has 3 menu items and 1 subitem. If I click on second item, first child item should display. But not normally display it. It should animate it and slide it. I think there is a way with transition but I don't really know CSS3. And I want to have a pure css solution.
Here my HTML code:
<div id="menu">
<ul>
<li>First</li>
<li class="active">Second
<ul class="child">
<li>First child</li>
</ul>
</li>
<li>Third</li>
</ul>
</div>
I created this fiddle. Now I want to show First child menu item slowly if I click on Second menu item.
The only thing that I did before was checking transition but I just don't get it.
Can someone give me a hint?
Cheers
See your jsfiddle updated http://jsfiddle.net/3kEg4/3/
#menu {
height: auto;
width: auto;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu ul li {
float: left;
position: relative;
}
#menu ul li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#menu ul li a:hover {
background-color: #0C3;
}
#menu ul li ul {
position: absolute;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
height: 0px;
overflow:hidden;
}
#menu ul li:hover ul {
height: 100px;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
}
(inspired from http://jsfiddle.net/ashukasama/2BqGY/)
You can use some CSS3 animations to achieve this effect.
#menu ul li ul{
opacity:0;
-webkit-transition: .6s ease;
-moz-transition: .6s ease;
-ms-transition: .6s ease;
-o-transition: .6s ease;
height: 0;
}
#menu ul li:hover ul {
opacity: 1;
height: 100px;
}
JSFIDDLE
radio active states
JSFIDDLE Radio
Stackoverflow Q
jQuery
$('.subMenu').on('click', function() {
$('.subMenu ul').slideToggle(1000);
});
JSFIDDLE jQuery
i think this is better
#menu ul li ul{
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
position: absolute;
}
#menu ul li:hover ul {
visibility: visible;
opacity: 1;
position: relative;
}
Works great as well. Please do add prefixes. Hope this helps someone.