I am working on the invite page, in which the envelope is shown first and after clicking on envelope it shows content, the problem is that the envelope is not responsive, I am using display:flex for my main page, but the template I used for envelope does not use flex, when I remove it, it works fine but my main page broke down, so is there any way to fix it?:
(the envelope looks like this on mobile screen)
.frame {
width: 550px;
height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
top: 250px;
left: 208px;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 580px;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
top: 30px;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 0;
height: 0;
position: absolute;
top: 0;
z-index: 310;
}
.left {
border-left: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
}
.right {
border-right: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
left: 300px;
}
.top {
border-right: 300px solid transparent;
border-top: 200px solid #03a9f4;
border-left: 300px solid transparent;
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 600px;
height: 190px;
position: absolute;
background: #2b67cb;
top: 160px;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
/* height: 100vh;
width: 100%; */
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
The border properties unfortunately don't take responsive percentages, so your .top .left and .right elements will not be responsive. You could instead create those envelope shapes with clip-path and then combined with a few other CSS updates and your envelope will adjust with screen size. Demo included
.frame {
width: 100%;
max-width: 550px;
height: 100%;
max-height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
bottom: 0;
left: 50%;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transform: translateX(-50%);
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: translateX(-50%) scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 100%;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
bottom: 0;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 310;
}
.left {
background: #337efc;
clip-path: polygon(0 0, 0 90%, 50% 50%);
}
.right {
background: #337efc;
clip-path: polygon(100% 0, 100% 90%, 50% 50%);
}
.top {
background: #03a9f4;
clip-path: polygon(0 0, 100% 0, 50% 62.5%);
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
background: #2b67cb;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
Related
Below is the code I've got set up for my responsive menu. On the hamburger menu, I have some Javascript set so that the menu will close after clicking on one of the links inside of it.
Javascript:
var elements = document.getElementsByTagName('li');
var closeHamp = function() {
document.getElementsByClassName('cp_menuicon')[0].click();
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', closeHamp, false);
}
What I'd like to do is also have the hamburger menu close when navigating between pages using the forward or backward arrow on a web browser. I've played around with a few bits of Javascript but haven't been able to achieve the result I'm looking for. If anyone knows how I could close the hamburger menu when navigating between pages I'd appreciate you sharing your knowledge with me. Thank you.
Menu:
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
CSS:
.body {background-color: white;
font-family: sans-serif;
}
.searchbar {float: right;
}
.image {text-align: center;
}
.setsumei {margin-left: 20px;
margin-right: 20px;
}
.footer {width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {content: "";
display: block;
}
.site-footer,
.page-wrap:after {height: 20px;
}
.site-footer {text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {list-style: none;
}
a {text-decoration: none;
color: black;
}
.cp_cont {height: auto;
}
/* menu */
.cp_offcm03 {position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {height: 100%;
}
.cp_offcm03 li {display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {display: none;
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {display: none;
}
/* content */
.cp_container {position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {display: block;
margin-right: 0;
}
.cp_offcm03 a {padding: 20px;
}
/* menu toggle */
.cp_mobilebar {display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {display: block;
opacity: .6;
}
#h-menu_black {display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {overflow: hidden;
position: fixed;
}
}
I am trying to create this button in html with a little animation as below.
How can I make the below polygon shape in css, and how to move it to a regular rectangle in animation on hover?
This is what I am trying to make it look like:
And here is how it should look like on hover:
Thanks for any help
A bit messy, but it is what I get so far:
body {
background-color: #FFB504;
}
.cta {
color: white;
border: none;
width: 240px;
height: 80px;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-family: sans-serif;
cursor: pointer;
position:relative;
background-color: transparent;
outline: none;
}
.cta-content {
padding-right: 20px;
transition: all .3s ease;
z-index:1;
}
.cta:before {
clip-path: polygon(10px 10px, 230px 10px, 190px 70px, 10px 70px);
transition: all .3s ease;
will-change: clip-path;
background-color: #0081B1;
}
.cta-border, .cta-border:before, .cta-border:after, .cta:before {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all .3s ease;
}
.cta-border{
overflow: hidden;
}
.cta-border:before {
clip-path: polygon(0px 0px, 220px 0px, 170px 80px, 0px 80px);
border: 2px solid white;
}
.cta-border:after {
transform-origin: center center;
transform: translate(-28px, -69px) rotate(32deg);
border-right: 2px solid white;
height: 94.34px;
}
.cta:hover .cta-content {
padding-right: 0;
}
.cta:hover:before, .cta:hover .cta-border:before {
clip-path: polygon( 0px 0px, 240px 0px, 240px 80px, 0px 80px);
}
.cta:hover .cta-border:after {
transform: translate(0,0) rotate(0);
}
<button class="cta">
<span class="cta-content">HIRE ME</span>
<span class="cta-border"></span>
</button>
I have a circle class element .circle and a navigation bar on a demo homepage home.html. I need clicking on one of the navigation's elements href to resume.html) to do an animation (growing its dimension) to have it matched in size to a similar element .circleRe on the linked page (resume.html) and only then move to that page. So, how to delay loading the second page while doing the animation?
P.S. The circle also response to hovering (and slightly enlarging it to have a text.)
I've tried using JavaScript and had partial success, but it seems that the href cancels the animation effect. #keyframes does not seem to be the right solution
nav {
overflow: hidden;
background-color: #333;
position: fixed;
z-index: 10
}
nav a {
font-family: DoubleBass;
font-weight: normal;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
.circle {
background: #D73309;
opacity: 0.7;
width: 37.5vmin;
height: 37.5vmin;
border-radius: 50%;
margin: 0 auto;
position: fixed;
z-index: 1;
top: -100px;
right: -70px;
-webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s;
/* Safari */
transition: width 1.2s, height 1.2s, box-shadow 1.2s;
}
.quotes {
opacity: 0;
font-size: .9em;
line-height: 120%;
padding: 70px 0px 0px 20px;
}
.circle:hover {
width: 60vmin;
height: 60vmin;
opacity: 1;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.circle:hover .quotes {
opacity: 1;
-webkit-transition: opacity 1.2s;
transition: opacity 1.2s;
}
.circleRe {
background: #D73309;
opacity: 1;
width: 140vmax;
height: 140vmax;
border-radius: 50%;
margin: 0 auto;
position: absolute;
z-index: 1;
top: -500px;
right: -400px;
}
<header>
<nav>
Home
Resume
Archive
Films
</nav>
</header>
<body>
<div class="circle">
<p class="quotes"></p>
</div>
</body>
$('.links').click(function(e) {
e.preventDefault();
//Show the UI Loader here
$('.loaders').show();
setTimeout(function() {
//Hide the UI Loader after 5 seconds
$('.loaders').hide();
}, 5000);
});
nav {
overflow: hidden;
background-color: #333;
position: fixed;
z-index: 10
}
nav a {
font-family: DoubleBass;
font-weight: normal;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
.circle {
background: #D73309;
width: 37.5vmin;
height: 37.5vmin;
border-radius: 50%;
margin: 0 auto;
position: fixed;
z-index: 100;
top: -100px;
right: -70px;
-webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s;
/* Safari */
transition: width 1.2s, height 1.2s, box-shadow 1.2s;
}
.quotes {
opacity: 0;
font-size: .9em;
line-height: 120%;
padding: 70px 0px 0px 20px;
}
.loaders {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 0px;
left: 0px;
opacity: .5;
/* in FireFox */
filter: alpha(opacity=50);
/* in IE */
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav>
<a id='lnkHome' class='links' href="JavaScript:void(0);">Home</a>
<a id='lnkResume' class='links' href="JavaScript:void(0);">Resume</a>
<a id='lnkArchieve' class='links' href="JavaScript:void(0);">Archive</a>
<a id='lnkFilms' class='links' href="JavaScript:void(0);">Films</a>
</nav>
</header>
<body>
<div class="circle">
<p class="quotes">
</p>
</div>
<div class="loaders" style="display:none;"></div>
</body>
Note:- Show loader on click and after some times, you can hide that loader.
so the user will not be able to interact with DOM(UI).
Hope this helps!
EDIT
Solved it. See post below.
/ END OF EDIT
EDIT
NOT related to the suggested topic above and not solved by changing to vh as measurement of top-value instead as shown in this fiddle (as suggested by the first comments here): http://jsfiddle.net/wm02ovx8/3/. The div still doesn't animate in, but rather pops up in the blink of an eye.
/ END OF EDIT
I'm trying to animate a drawer div from top and into view. The animation works fine as long as it's in view to begin with (the "top" css property value being more than -1), but since I have a negative value that is calc(-100% + 30px) on the top property it just "pops up" instead. What am I missing here?
[Fiddle] (To open the menu, press the index word on the right)
HTML:
<div id="closeIndexLayer"></div>
<div id="alignLinks">
<div id="anchorLinks"></div>
</div>
<div id="indexMenu">Index</div>
CSS:
div#alignLinks {
position: fixed;
display: flex;
align-items: baseline;
justify-content: flex-start;
flex-flow: wrap;
left: 30px;
top: calc(-100% + 30px);
background: rgba(255,0,0,.60);
/* transform: translateX(-50%); */
height: calc(100% - 30px);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
z-index: 250 !important;
min-width: 425px;
max-width: 425px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
div#anchorLinks {
display: flex;
/* position: fixed; */
flex-flow: wrap;
height: auto;
/* position: absolute; */
/* background: rgba(0,0,0,.5); */
top: 0px;
right: 0px;
z-index: 250;
}
div#closeIndexLayer {
position: fixed;
display:none;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
background: green;
z-index: 250;
}
a.anchorLink {
width: auto;
background: hsla(210, 11%, 8%, 1);
border-radius: 3px;
text-decoration: none;
font-size: 2rem;
margin-top: 16px;
margin-bottom: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 140ms ease-in-out;
-moz-transition: all 140ms ease-in-out;
-ms-transition: all 140ms ease-in-out;
-o-transition: all 140ms ease-in-out;
transition: all 140ms ease-in-out;
}
#indexMenu {
position: fixed;
display: block;
z-index: 249;
top: 50%;
height: 18px;
right: -18px;
padding: 0px 6px 0px 6px;
transform: translateY(-50%) rotate(270deg);
background: rgba(255,255,255,.15);
border-radius: 5px 5px 0px 0px;
font-family: 'Nunito Sans', sans-serif;
font-size: 10px;
box-shadow: 0px 1px 2px rgba(255,255,255,.12), 0px 2px 3px rgba(255,255,255,.24);
cursor: pointer;
}
Javascript:
function showIndex() {
var elem = document.getElementById("alignLinks");
thestyle = window.getComputedStyle(elem),
thetop = thestyle.getPropertyValue('top');
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos <= 0) {
pos++;
elem.style.top = pos + 'px';
} else {
clearInterval(id);
}
}
}
function hideIndex() {
var elem = document.getElementById("alignLinks");
thestyle = window.getComputedStyle(elem),
thetop = thestyle.getPropertyValue('top');
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos >= 0) {
pos--;
elem.style.top = pos + 'px';
} else {
clearInterval(id);
}
}
}
document.getElementById("indexMenu").addEventListener("click", function(){
var closeIndexLayer = document.getElementById("closeIndexLayer");
closeIndexLayer.style.display = "block";
showIndex();
});
document.getElementById("closeIndexLayer").addEventListener("click", function(){
var closeIndexLayer = document.getElementById("closeIndexLayer");
closeIndexLayer.style.display = "none";
hideIndex();
});
//</editor-fold>
I solved it another way instead, and in a way I'm more familiar with. The way I found that worked for me adds a class to the element and that class have animation properties. Then if you want to animate out, just add the animation properties to the element that is being animated (in this case the id #alignLinks).
[Fiddle]
Javascript:
let drawer = document.getElementById("alignLinks");
document.getElementById('indexMenu').onclick = function() {
if(this.innerHTML === 'Index')
{
this.innerHTML = 'Close';
drawer.classList.add('topAnimDown');
} else {
this.innerHTML = 'Index';
var computedStyle = window.getComputedStyle(drawer),
topProp = computedStyle.getPropertyValue('top');
drawer.style.topProp = topProp;
drawer.classList.remove('topAnimDown');
}
}
HTML
<div id="closeIndexLayer"></div>
<div id="alignLinks">
<div id="anchorLinks"></div>
</div>
<div id="indexMenu">Index</div>
CSS
body {
background: hotpink;
}
div#alignLinks {
position: fixed;
display: flex;
align-items: baseline;
justify-content: flex-start;
flex-flow: wrap;
left: 30px;
top: calc(-100% + 30px);
background: rgba(255,0,0,.60);
/* transform: translateX(-50%); */
height: calc(100% - 30px);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
z-index: 250 !important;
min-width: 425px;
max-width: 425px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
transition: 3s ease-in-out;
}
.topAnimDown {
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
transition: 3s ease-in-out;
top: 0 !important;
}
div#anchorLinks {
display: flex;
/* position: fixed; */
flex-flow: wrap;
height: auto;
/* position: absolute; */
/* background: rgba(0,0,0,.5); */
top: 0px;
right: 0px;
z-index: 250;
}
div#closeIndexLayer {
position: fixed;
display:none;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
background: green;
z-index: 250;
}
a.anchorLink {
width: auto;
background: hsla(210, 11%, 8%, 1);
border-radius: 3px;
text-decoration: none;
font-size: 2rem;
margin-top: 16px;
margin-bottom: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 140ms ease-in-out;
-moz-transition: all 140ms ease-in-out;
-ms-transition: all 140ms ease-in-out;
-o-transition: all 140ms ease-in-out;
transition: all 140ms ease-in-out;
}
#indexMenu {
position: fixed;
display: block;
z-index: 249;
top: 50%;
height: 18px;
right: -18px;
padding: 0px 6px 0px 6px;
transform: translateY(-50%) rotate(270deg);
background: rgba(255,255,255,.15);
border-radius: 5px 5px 0px 0px;
font-family: 'Nunito Sans', sans-serif;
font-size: 24px;
box-shadow: 0px 1px 2px rgba(255,255,255,.12), 0px 2px 3px rgba(255,255,255,.24);
cursor: pointer;
}
I have one question about responsive left sidebar open close function.
I have created this DEMO from codepen.io
You can see in the demo there is a button (Click to show blue div). When you click this button then blue div will open from left side. It is ok but if you change your browser width < 800px then the .left div will displayed. After than if you click again (Click to show blue div) the blue div not opening, also at the same time if you change your browser width>880px then you can see the blue div still be opened because you clicked it before.
I want to make it when browser width<880px and when i click the (Click to show blue div) then i want to show blue div from left side.
How can i do that anyone can help me in this regard ?
HTML
<div class="test_container">
<div class="left">
<div class="left_in">Here is a some text</div>
<div class="problem-div">
<div class="proglem-div-in">
<!--Here is a some menu-->
</div>
</div>
</div>
<div class="gb" data-id="1" data-state="close">Click To Show Blue Div</div>
<div class="right">
<div class="bb"></div>
</div>
</div>
CSS
.test_container {
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
max-width: 980px;
min-width: 300px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background-color: #000;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 140px;
}
.left {
display: block;
position: absolute;
float: left;
width: 30%;
overflow: hidden;
padding: 0px;
bottom: 0;
top: 0;
left: 0;
background-color: red;
border-right: 1px solid #d8dbdf;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.left_in {
z-index: 999 !important;
position: absolute;
float: left;
width: 100%;
height: 100%;
background-color: red;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(25rem);
transform: translateX(25rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes slideLeft {
0% {
-webkit-transform: translateX(15rem);
transform: translateX(15rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.aa {
background-color: #f7f7f7;
/*background-color: #dfdfdf;
background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc);
background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/
width: 0;
top: 0;
border-radius: 0%;
z-index: 1000;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
}
.click_open_close {
right: 0px;
padding: 10px;
color: #fff;
position: absolute;
background-color: green;
cursor: pointer;
z-index: 999;
display: none;
}
.pp {
right: 0px;
padding: 10px;
color: #fff;
position: absolute;
background-color: green;
cursor: pointer;
}
.right {
display: block;
position: absolute;
width: 70%;
bottom: 0;
top: 0;
right: 0%;
background-color: pink;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.gb {
cursor: pointer;
position: absolute;
left: 30%;
padding: 10px;
color: #fff;
background-color: black;
z-index: 9999;
}
.problem-div {
z-index: 999 !important;
position: absolute;
float: left;
width: 0%;
height: 100%;
background-color: blue;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
#media all and (max-width: 840px) {
.left {
left: -60%;
z-index: 9999999999999 !important;
}
.secret {
float: left;
display: block;
}
.right {
width: 100%;
}
.click_open_close {
display: block;
}
}
JS
$(".gb").on('click', function() {
var id = $(this).data("id");
var state = $(this).data("state");
if (state === "close") {
$(this).data("state", 'open');
$(".problem-div").animate({
width: "100%"
}, 200).find(".proglem-div-in").animate({
width: "100%"
}, 200);
} else {
$(this).data("state", 'close');
$(".problem-div").animate({
width: "0%"
}, 200).find(".proglem-div-in").animate({
width: "0%"
}, 200);
}
});
The problem is with CSS, replace media query css with this CSS:
#media all and (max-width: 840px) {
.left {
z-index: 9999999999999 !important;
}
.secret {
float: left;
display: block;
}
.click_open_close {
display: block;
}
}