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>
/*.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>
Thanks for reading. The problem with my code started when I added the hover effect on the images since then the layout stopped being responsive and images just clutter on top of each other when I resize the browser. Any help will be valued, since I am not able to find a solution since days :(
http://wall-e.blue/tobias/index.html
#col_1 {
float:right;
padding: 3%;
width: 24%;
max-width: 100%;
height: auto; }
#col_2 {
float: left;
padding: 3%;
width: 24%;
text-align: left;
max-width: 100%;
height: auto;
}
.wow {
position:relative;
width: 330px;
height:510px;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
-ms-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.wow img {
position:relative;
top:0;
left:0;
z-index:1
}
.overlay {
font-family: arial;
font-size: 1em;
color: black;
padding-top: 10px;
z-index:2;
opacity:0;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-ms-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.wow:hover > .overlay {
opacity:1;
width:560px;
height:310px height:auto;
}
#media all and (max-width : 768px) {
#col_1 {
width: 94%;
padding: 1%;
}
#col_2 {
width: 94%;
padding: 1%;
}
<body>
<br>
<br>
<div id="title">
<span class="titulo" > Tobias Willmann</span>
<br>
<br>
<span class="mail" > </span>
</div>
<div id="links">
<ul>
<li> About</li>
<li>Contact</li>
</ul>
<br>
<br>
<div id="col_1">
<div class="wow">
<img src="Katerinaneu_web.jpg" />
<div class="overlay">2016_hahahhaha</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a href= "easter.html" > <img src= "easter_web.jpg" /> </a>
<div class="overlay">2016_nnn</div>
</div>
</div>
<div id="col_2">
<div class="wow">
<img src="Marina_closeup.jpg" />
<div class="overlay">2015_nnn</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<img src="adriana_web.jpg" />
<div class="overlay">2015_i know you love</div>
</div>
</div>
.wow {
height:510px;
}
At Marina closeup
Makes the image go on top of the other image as I can see so far.
I have been watching tutorials on creating a responsive navbar and one thing I am trying to create is a responsive menu button. I have created the button as you can see here:
http://jsfiddle.net/nickmadd/LvhCh/4/
The HTML
<nav class="navbar navbar-default affix-top nav-links" data-spy="affix" data-offset-top="100" role="navigation">
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<div class="navbar-header"> <a class="navbar-brand" href="/"><img src="media/img/nav-logo.png" alt="Driven Car Sales Logo" class="img-rounded logo-nav navbar-brand" /></a>
</div>
<div class="nav-collapse navbar-responsive-collapse" data-toggle="collapse" data-target=".navbar-nav">
<ul class="nav navbar-nav">
<li>Used Cars
</li>
<li>Get Finance
</li>
<li class="dropdown">About Driven<strong class="caret"></strong>
<ul class="dropdown-menu">
<li> <a href "#">The Team</a>
</li>
<li> <a href "#">Our Partners</a>
</li>
</ul>
<!--Drop Down End-->
</li>
<li>How To Find Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</nav>
The CSS
.navbar-toggle {
display: block;
}
.logo-nav {
height: 2.3em;
width: auto;
}
.brand {
font-size: 2em;
margin: 20px 0 25px;
}
.navbar-brand {
opacity: 0;
color: #ff0066;
-webkit-transition:opacity 0.3s ease-in;
-moz-transition:opacity 0.3s ease-in;
-o-transition:opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
margin-left: 0px;
}
.navbar {
border-radius: 0px;
border-left: none;
border-right: none;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar- default .navbar-nav>.open>a:focus {
color: #fff;
background-color: #DD3B4D;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
color: #fff;
}
.dropdown-menu {
color: #fff;
background-color: #DD3B4D;
}
.dropdown-menu>li>a {
color: #fff;
}
nav.affix {
top: 0;
width: 100%;
z-index: 1000;
}
nav.affix .navbar-brand {
opacity: 1;
height: 2.3em;
width: auto;
}
.navbar-header {
width: 0px;
-webkit-transition:width .4s ease-in-out;
-moz-transition:width .4s ease-in-out;
-o-transition:width .4s ease-in-out;
transition:width .4s ease-in-out;
margin: 0 1em 0 1em
}
nav.affix .navbar-header {
width: 8em;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
margin: 0 1em 0 0;
}
.nav-links {
font: 600 15px/1.5'Arimo';
}
.navbar-nav > li:last-child {
border-right: 1px solid #475d88;
}
ul.nav a:hover {
color: #fff !important;
background-color: #DD3B4D !important;
-webkit-transition: background-color 0.6s ease;
-moz-transition: background-color 0.6s ease;
-o-transition: background-color 0.6s ease;
transition: background-color 0.6s ease;
}
nav.affix .navbar-brand {
display: inline-block;
}
The issue is that when it opens in the browser it is still there even in a large viewpoint. I need it to appear when it get's towards mobile size. I could go and do this with media queries but I'm sure that bootstrap is meant to do this for you?
Am I missing something?
It's because you are overriding the Bootstrap css with your own css, at the very top of your css you have:
.navbar-toggle {
display: block;
}
which tells ".navbar-toggle" to always show. Remove this and it will show/hide correctly. Also these docs might be useful if you have any more trouble.
Update
Updated fiddle with correct syntax. The main issue was that you had .nav-collapse instead of .navbar-collapse.
You are missing the hidden class which is a large part of bootstrap's responsiveness on different viewport sizes. Check out this bootply
Your button works fine when you make it hidden on large and medium viewports:
<button class="navbar-toggle hidden-md hidden-lg" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
Read about the sizes and hiding here. You can add that class to everything in bootstrap, so move it around if you want to hide more or less.
I am trying to use the collapse function in Bootstrap after watching some tutorials I tried it out myself and I am left with no links showing on a large viewport.
Here is my code does anbody notice anything that might be wrong with it?
The HTML:
<nav class="navbar navbar-default affix-top nav-links" data-spy="affix" data-offset-top="100" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/"><img src="media/img/nav-logo.png" alt="Driven Car Sales Logo" class="img-rounded logo-nav navbar-brand"></a>
</div>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>Used Cars
</li>
<li>Get Finance
</li>
<li class="dropdown">About Driven<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
<a href"#">The Team</a>
</li>
<li>
<a href"#">Our Partners</a>
</li>
</ul> <!--Drop Down End-->
</li>
<li>How To Find Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</nav>
The custom CSS:
.logo-nav {
height: 2.3em;
width: auto;
}
.brand {
font-size: 2em;
margin: 20px 0 25px;
}
.navbar-brand {
opacity: 0;
color: #ff0066;
-webkit-transition:opacity 0.3s ease-in;
-moz-transition:opacity 0.3s ease-in;
-o-transition:opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
margin-left: 0px;
}
.navbar {
border-radius: 0px;
border-left: none;
border-right: none;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar- default .navbar-nav>.open>a:focus {
color: #fff;
background-color: #DD3B4D;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
color: #fff;
}
.dropdown-menu {
color: #fff;
background-color: #DD3B4D;
}
.dropdown-menu>li>a {
color: #fff;
}
nav.affix {
top: 0;
width: 100%;
z-index: 1000;
}
nav.affix .navbar-brand {
opacity: 1;
height: 2.3em;
width: auto;
}
.navbar-header {
width: 0px;
-webkit-transition:width .4s ease-in-out;
-moz-transition:width .4s ease-in-out;
-o-transition:width .4s ease-in-out;
transition:width .4s ease-in-out;
margin: 0 1em 0 1em
}
nav.affix .navbar-header {
width: 8em;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
margin: 0 1em 0 0;
}
.nav-links {
font: 600 15px/1.5 'Arimo';
}
.navbar-nav > li:last-child{
border-right: 1px solid #475d88;
}
ul.nav a:hover {
color: #fff !important;
background-color: #DD3B4D !important;
-webkit-transition: background-color 0.6s ease;
-moz-transition: background-color 0.6s ease;
-o-transition: background-color 0.6s ease;
transition: background-color 0.6s ease;
}
nav.affix .navbar-brand {
display: inline-block;
}
Sorry for the amount of CSS I didn't realise how much there was ha.
I have had a good play about and can't seem to stop this from happening.
Remove the collapse class
Link http://jsfiddle.net/LvhCh/1/
<div class="nav-collapse navbar-responsive-collapse" data-toggle="collapse" data-target=".navbar-nav">