I am trying to create a simple, pure CSS push menu. The menu opens and closes when clicking on the Settings icon. This works already. However, I wish to move the icon inside the grey div and have it activate the menu when clicked. At the moment, the settings click only works when the icon is in the position it currently sits. If I move it inside the div, nothing happens.
Also, I would like to close the menu by clicking on the Settings text or left chevron icon inside the menu. I tried creating a second menu checkbox and associated styles, like so;
#menu-toggle-2:checked + .menu-icon {
right: 30%;
}
But doing this only moved the Settings div INSIDE the menu; it did not close the menu itself.
Here is the html code for the page and menu;
<head>
<style>
.content-container {
z-index: 0;
padding: 20px;
overflow: auto;
transition: all 300ms ease-in-out;
}
.slideout-sidebar {
position: fixed;
right: -28%;
z-index: 2;
width: 28%;
height: 100%;
padding: 20px;
transition: all 300ms ease-in-out;
}
.slideout-sidebar ul {
list-style: none;
}
.slideout-sidebar ul li {
cursor: pointer;
padding: 18px 0;
border-bottom: 1px solid #D1D4D7;
}
#menu-toggle {
display: none;
}
.menu-icon {
position: absolute;
top: 20px;
right: 20px;
z-index: 2;
transition: all 300ms ease-in-out;
cursor: pointer;
}
#menu-toggle:checked ~ .slideout-sidebar {
right: 0px;
}
#menu-toggle:checked + .menu-icon {
right: 30%;
}
#menu-toggle:checked ~ .content-container {
padding-right: 28%;
}
</style>
</head>
Body;
<body>
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="menu-icon">
<img class="icon" src="images2/ic-of-settings-gy.svg" style="width:33px;height:33px;" />
</label>
<div id="divMenu" class="slideout-sidebar">
<ul>
<li>
<img class="icon" src="images2/ic-of-chevron-left-gy.svg" />
<span style="padding-left:10px">Settings</span>
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="content-container">
<div class="container">
<div style="width:780px;height:800px;background-color:grey;">
</div>
</div>
</div>
</body>
And here is the image of the Settings menu item, which I would like to close the menu when clicked;
Thanks in advance
Managed to figure it out, if anyone needs the info. The trick is to stick a hidden input on the page, and a second one in your desired location, with the same ID. Code below.
<style>
#menu-toggle {
display: none;
}
.menu-icon {
position: absolute;
top: 1.25rem;
right: 1.25rem;
z-index: 2;
cursor: pointer;
}
content {
-ms-overflow-style: none;
-moz-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
overflow-y: auto;
}
nav {
position: fixed;
right: 0;
width: 28%;
height: 100%;
margin: 0 -28% 0 0;
-moz-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
nav ul {
height: 100%;
list-style: none;
padding: 0;
}
nav li {
padding: 1.125rem 0 1.125rem 0;
border-bottom: 0.0625rem solid rgba(209, 212, 215, 1);
}
label {
display: block;
cursor: pointer;
-moz-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
z-index: 500;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ nav {
margin: 0;
}
input[type="checkbox"]:checked ~ content {
-webkit-transform: translate3d(-28%, 0, 0);
-moz-transform: translate3d(-28%, 0, 0);
-o-transform: translate3d(-28%, 0, 0);
transform: translate3d(-28%, 0, 0);
}
</style>
<input type="checkbox" id="menu-toggle" />
<nav>
<ul>
<li class="font-weight-bold settings-list-item">
<label for="menu-toggle" class="list-spacer">
<img src="images/chevron-left.png" />
<span><b class="ng-tns-c1354-3 font-15 padding-left-20">Settings</b></span>
</label>
</li>
<li class="font-weight-bold settings-list-item">
Home
</li>
<li class="list-spacer">
About
</li>
<li class="list-spacer">
Contact
</li>
</ul>
</nav>
<content>
<div style="width:780px;height:800px;background-color:grey;">
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="nav-icon margin-top-35">
<img class="settings-icon" src="images/settings.png" />
</label>
</div>
</content>
Related
I made a menu that appears when clicking a hamburger button with CSS and a checkbox. It works nicely so far. But now I want it to disappear when clicking elsewhere on the page, not only when clicking on the hamburger button again. How do I do that, please?
HTML:
<div class="navigatie">
<input class="nav-toggle" id="nav-toggle" type="checkbox">
<nav>
<ul>
<li>Home</li>
<li>Werkwijze</li>
<li>Over ons</li>
<li>Faq</li>
<li>Accreditatie</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span><i class="fas fa-bars"></i></span>
</label>
</div>
CSS:
.nav-toggle {
display: none;
}
nav {
position: absolute;
bottom: 100%;
left: 30%;
background-color: #f1f1f1;
width: 40%;
transform: scale(1,0);
transform-origin: bottom;
transition: transform 400ms ease-in-out;
}
nav a {
color: #65A624;
font-size: 1rem;
opacity: 0;
transition: opacity 150ms ease-in;
display: block;
}
nav a:hover:not(.active) {
background-color: #555;
color: white;
}
nav a.active {
background-color: #65A624;
color: white;
}
.nav-toggle:checked ~ nav {
transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
Greetings,
Sandra.
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$("button.navbar-toggle").click();
}
});
});
Check out this jsfiddle sample.
http://jsfiddle.net/52VtD/5718/
CSS Solution
If you want it purely CSS you can do the example below, I've edited a few things because your code missed some CSS and HTML to make it reproducible correctly. But the point should be clear. ;)
A overlay appears after opening, you can close the menu by clicking anywhere in the overlay (darker background)
Advice: use JavaScript
I would recommend however to make it easier and use JavaScript if that is a option.
.nav-toggle-label {
width: 3rem;
height: 3rem;
margin: 0;
display: block;
background-color: #0F0;
}
.nav-toggle {
width: 0.1rem;
height: 0.1rem;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
nav {
width: 40%;
position: absolute;
top: 0%;
left: 30%;
z-index: 110;
background-color: #f1f1f1;
transform: scale(1, 0);
transform-origin: bottom;
transition: transform 400ms ease-in-out;
}
nav a {
color: #65A624;
font-size: 1rem;
opacity: 0;
transition: opacity 150ms ease-in;
display: block;
}
nav a:hover:not(.active) {
background-color: #555;
color: white;
}
nav a.active {
background-color: #65A624;
color: white;
}
.nav-toggle:checked~.navigatie nav {
transform: scale(1, 1);
}
.nav-toggle:checked ~ .navigatie a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
.nav-toggle-close {
width: 100%;
height: 100%;
position: absolute;
top: 0%;
left: 0%;
background-color: rgba(0, 0, 0, 0.3);
display: none;
z-index: 100;
}
.nav-toggle:checked ~ .nav-toggle-close {
display: block;
}
<input class="nav-toggle" id="nav-toggle" type="checkbox">
<label for="nav-toggle" class="nav-toggle-close"></label>
<div class="navigatie">
<nav>
<ul>
<li>Home</li>
<li>Werkwijze</li>
<li>Over ons</li>
<li>Faq</li>
<li>Accreditatie</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span><i class="fas fa-bars">Menu</i></span>
</label>
</div>
I am trying to create a navigation bar that slides out from the left side of the screen, without the use of JavaScript. All of the navigation elements are there, but hidden for the initial page opening, clicking on the "V" in the top right corner should open up the navigation but doesn't. Also, There is no other styling included on my page, I just want to make this work before moving forward.
I have tried a few different methods for creating this effect but to no avail. This most recent method was pulled directly from a tutorial on creating exactly what I was hoping to achieve, and still nothing.
nav {
width: 100%;
text-align: center;
}
nav a {
display: block;
padding: 15px 0;
}
nav li:first-child {
padding-top: 100px;
}
a {
text-decoration: none;
color: black;
}
li {
list-style-type: none;
}
.menu {
width: 240px;
height: 100vh;
position: absolute;
background-color: red;
left: -240px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
font-family: "lobster two";
font-size: 48px;
cursor: pointer;
float: right;
margin-top: 20px;
margin-right: 25px;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked - .menu {
position: absolute;
left: 0;
}
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-icon">V</label>
<header>
<div id="brand"><img class="top-logo" src="https://res.cloudinary.com/spacecatind/image/upload/v1560968515/Vinyl/placeholder_bjekss.png"></div>
</header>
<div id="nav-div">
<nav class="menu">
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">Menu</li>
<li class="nav-item">Cocktails</li>
<li class="nav-item">Events</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
</div>
Your selector is wrong, - isn't a valid selector
Change
#menu-toggle:checked - .menu
To
#menu-toggle:checked ~ #nav-div>.menu
nav {
width: 100%;
text-align: center;
}
nav a {
display: block;
padding: 15px 0;
}
nav li:first-child {
padding-top: 100px;
}
a {
text-decoration: none;
color: black;
}
li {
list-style-type: none;
}
.menu {
width: 240px;
height: 100vh;
position: absolute;
background-color: red;
left: -240px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
font-family: "lobster two";
font-size: 48px;
cursor: pointer;
float: right;
margin-top: 20px;
margin-right: 25px;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked~#nav-div>.menu {
position: absolute;
left: 0;
}
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-icon">V</label>
<header>
<div id="brand"><img class="top-logo" src="https://res.cloudinary.com/spacecatind/image/upload/v1560968515/Vinyl/placeholder_bjekss.png"></div>
</header>
<div id="nav-div">
<nav class="menu">
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">Menu</li>
<li class="nav-item">Cocktails</li>
<li class="nav-item">Events</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
</div>
I guess that you forgot to add animation.
#keyframes slidefFromRight{
0%{
transform:translateX(100px);
opacity:0;
}
50%{
transform:translateX(-30px);
}
100%{
transform:translateX(0);
opacity: 1;
}
}
Put the animation name under selector
#nav-div{
animation:slidefromRight;
animation-duration: 4s;
animation-delay: 0.5s;
opacity:0;
animation-fill-mode:forwards;
}
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>
I found a problem with my navigation bar. Im using tag nav, ul, li for it. My intention is to make an image move according to the hover li. Not sure what is wrong with the css... I want to make the li:nth-child(3) to move position using 'top' when li:nth-child(1) is hovered.
Here is my html
<nav> <img class="nav_bar" src="images/navigation_stick.png">
<ul class="subsection">
<li class="subsection">Animation
<!--<h4 class="subsection">Modelling</h4>-->
<h4 class="subsection">Project</h4>
<!--<h4 class="subsection">Reel</h4>-->
</li>
<li class="subsection">Graphic
<h4 class="subsection">Poster</h4>
<!--<h4 class="subsection">Illustration</h4>-->
</li>
<li>
<img src="images/navigation_button.png">
</li>
</ul>
</nav>
here is my css
li h4.subsection{
font-size: 14px;
font-weight: lighter;
padding-top: 0;
display: block;
max-height: 0;
opacity: 0;
transition: visibility 0s, padding 0.3s, max-height 0.3s, opacity 0.2s ease-in;
transition: padding 0.3s, max-height 0.4s, opacity 0.2s ease-out;
}
li:hover > h4{
padding-top: 5px;
max-height: 50px;
opacity: 1;
}
li:nth-child(3){
display: block;
position: fixed;
left: 92.92%;
top: 100px;
transition: all 1000ms ease;
}
li:nth-child(1):hover + li:nth-child(3){
top: 300px;
}
thanks for your kind help!
You need to use ~ instead of + in the selector. ~ is a "general sibling", where as + is the adjacent/next sibling selector. :nth-child(1) and :nth-child(3) are general siblings, not adjacent.
li h4.subsection {
font-size: 14px;
font-weight: lighter;
padding-top: 0;
display: block;
max-height: 0;
opacity: 0;
transition: visibility 0s, padding 0.3s, max-height 0.3s, opacity 0.2s ease-in;
transition: padding 0.3s, max-height 0.4s, opacity 0.2s ease-out;
}
li:hover > h4 {
padding-top: 5px;
max-height: 50px;
opacity: 1;
}
li:nth-child(3) {
display: block;
position: fixed;
left: 92.92%;
top: 100px;
transition: all 1000ms ease;
}
li:nth-child(1):hover ~ li:nth-child(3) {
top: 300px;
}
<nav> <img class="nav_bar" src="images/navigation_stick.png">
<ul class="subsection">
<li class="subsection">Animation
<!--<h4 class="subsection">Modelling</h4>-->
<h4 class="subsection">Project</h4>
<!--<h4 class="subsection">Reel</h4>-->
</li>
<li class="subsection">Graphic
<h4 class="subsection">Poster</h4>
<!--<h4 class="subsection">Illustration</h4>-->
</li>
<li>
<img src="images/navigation_button.png">
</li>
</ul>
</nav>
By default Flexslider is supposed to resize its viewport height according to the height of the current image being displayed. On my site Flexslider is fixed at the height of the largest image in the slideshow, leaving all shorter images with blank white space beneath them. Am I doing something to override the responsive height function of Flexslider? Is there any way to fix this?
Live draft: http://parkerrichard.com/freelance/studiogreen/residential/project-01.html
HTML:
<div class="flexslider">
<div class="arrows">
<img src="../img/arrow-left.png" class="arrow-left pull-left">
<img src="../img/arrow-right.png" class="arrow-right pull-right">
</div>
<ul class="slides" id="slideshow" ondragstart="return false;">
<li>
<img src="../img/residential/project-01/img-01.jpg" />
<div class="flex-caption right hidden-xs">
<div class="caption-content">
<p><span class="hcaption">PROJECT <span class="sm-spaced">1</span></span><br /></p>
<br />
Location: <span class="lite">Los Altos Hills, California</span><br />
Architect: <span class="lite">SDG Architects</span><br />
<br />
<p class="hcap">Earth-tone stone and concrete terraces <br />create Zen-like spaces around this home. <br />California outdoor living is experienced <br />in 'rooms', which include a pool and spa, <br />water feature wall with Buddha sculpture, <br />stone and gas fire pit, and outdoor kitchen <br />and dining pavilion. Each feature is set <br />against a backdrop of ornamental grasses, <br />perennials, and mature specimen trees.</p>
</div>
</div>
</li>
<li>
<img src="../img/residential/project-01/img-02.jpg" />
</li>
<li>
<img src="../img/residential/project-01/img-03.jpg" />
</li>
<li>
<img src="../img/residential/project-01/img-04.jpg" />
</li>
<li>
<img src="../img/residential/project-01/img-05.jpg" />
</li>
<li>
<img src="../img/residential/project-01/img-06.jpg" />
</li>
<li>
<img src="../img/residential/project-01/img-07.jpg" />
</li>
</ul>
</div>
CSS:
/*
* flexslider styling
*/
.flexslider {
background:none !important;
border:none !important;
box-shadow:none !important;
}
.slides {
overflow: hidden !important;
}
.slides div .flex-caption {
overflow: scroll !important;
}
.slides li img {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
.flex-direction-nav a {
color: #999 !important;
}
.flex-next {
padding-right: 30px !important;
}
.arrows {
position: absolute;
z-index: 90;
width: 100%;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.arrow-left {
padding-left: 15px;
opacity: 0;
transition: opacity .7s ease-out;
-moz-transition: opacity .7s ease-out;
-webkit-transition: opacity .7s ease-out;
-o-transition: opacity .7s ease-out;
}
.arrow-right {
padding-right: 20px;
opacity: 0;
transition: opacity .7s ease-out;
-moz-transition: opacity .7s ease-out;
-webkit-transition: opacity .7s ease-out;
-o-transition: opacity .7s ease-out;
}
.flexslider:hover .arrow-right, .flexslider:hover .arrow-left {
opacity: 0.8;
transition: opacity .7s ease-out;
-moz-transition: opacity .7s ease-out;
-webkit-transition: opacity .7s ease-out;
-o-transition: opacity .7s ease-out;
}
.flexslider:hover .flex-prev, .flexslider:hover .flex-next, .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
opacity: 0 !important;
z-index: 100;
}
#media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev { opacity: 0 !important;}
.flex-direction-nav .flex-next { opacity: 0 !important;}
.arrow-right, .arrow-left { opacity: 1}
}
.flex-control-nav {
text-align: right !important;
padding-right: 0px !important;
}
.flex-control-paging li {
margin: 0 0px 0 12px !important;
}
.flex-control-paging li a {
color: transparent !important;
}
.nodot .flex-control-paging li a {
display: none !important;
}
.flex-control-paging li a.flex-active {
background: #6dab3e !important;
}
/*
* flexslider caption styling
*/
.flex-caption {
position: absolute;
text-align: left;
font-size: 11px;
background:rgba(255, 255, 255, 0.7);
z-index: 100;
padding: 20px 10px 35px 30px;
width: 287px;
padding-top: 100%;
bottom: 0px;
display: none;
color: #000;
}
.caption-expand {
padding-right: 0px !important;
padding-left: 20px !important;
}
.right {
right: 0;
margin-bottom: 0px;
}
.show-caption {
position: absolute;
top: 48%;
right: 240px;
z-index: 99;
opacity: 0.75;
filter: alpha(opacity=75); /* For IE8 and earlier */
pointer-events: none;
display: none;
}
.hcaption {
font-size: 13px;
text-transform: uppercase;
}
.hcap {
margin-top: -7px;
}
.flex-caption p {
margin-bottom: -8px;
}
When you initiate in javascript the flexslider apply the property:
smoothHeight: true
Example:
$('.flexslider').flexslider({
animation: "slide",
smoothHeight: true
});