Please indicate the error. Why is the menu button not displayed when opening the menu?
After clicking on the Burger, the button remains under the menu. For spanы I used position: relative and z-index, but the result is the same.
Can there be a problem in the fact that transition is applied to spans when clicking?
$(document).ready(function(){
$('#nav-btn').click(function(){
$('#menu').toggleClass('is-opened');
$(this).toggleClass('open');
});
});
.container {
background-color: rgba(12, 20, 40, 0.24);
min-height: 600px;
}
#nav-btn {
width: 24px;
height: 24px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
cursor: pointer;
}
#nav-btn span {
display: block;
position: relative;
height: 3px;
width: 100%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 999;
}
#nav-btn span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn span:nth-child(2) {
top: 7px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn span:nth-child(3) {
top: 14px;
width: 70%;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn.open span:nth-child(1) {
will-change: transform;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
will-change: transform;
top: 18px;
width: 30px;
}
#nav-btn.open span:nth-child(2) {
will-change: transform;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
will-change: transform;
top: -3px;
width: 30px;
}
#nav-btn.open span:nth-child(3) {
width: 0%;
opacity: 0;
}
#menu {
background-color: black;
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: -160px;
margin-top: 0;
transition: all 0.3s ease;
}
#menu.is-opened {
background-color: black;
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: 0px;
margin-top: 0;
transition: all 0.3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<div id="nav-btn">
<span></span> <span></span> <span></span>
</div>
<div id="menu">
123
</div>
</div>
</body>
</html>
i gave z-index:10 to #nav-btn and it worked
Z index work perfectly fine due to position: absolute; you have to adjust your element and also when menu is open you will need to change the color. check snippet.
$(document).ready(function() {
$('#nav-btn').click(function() {
$('#menu').toggleClass('is-opened');
$(this).toggleClass('open');
});
});
.container {
background-color: rgba(12, 20, 40, 0.24);
min-height: 600px;
}
#nav-btn {
width: 24px;
height: 24px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
cursor: pointer;
z-index: 1;
}
#nav-btn span {
display: block;
position: relative;
height: 3px;
width: 100%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 999;
}
#nav-btn span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn span:nth-child(2) {
top: 7px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn span:nth-child(3) {
top: 14px;
width: 70%;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn.open span:nth-child(1) {
will-change: transform;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
will-change: transform;
top: 18px;
width: 30px;
}
#nav-btn.open span:nth-child(2) {
will-change: transform;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
will-change: transform;
top: -3px;
width: 30px;
}
#nav-btn.open span:nth-child(3) {
width: 0%;
opacity: 0;
}
#menu {
background-color: black;
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: -160px;
margin-top: 0;
transition: all 0.3s ease;
color: #fff;
}
#menu.is-opened {
background-color: black;
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: 0px;
margin-top: 0;
transition: all 0.3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<div id="nav-btn">
<span></span> <span></span> <span></span>
</div>
<div id="menu">
123
</div>
</div>
</body>
</html>
Related
I am attemping to move title "data analyst" to be centered in this piece of code.. I'm not sure why it's not already as code is labeled center in the .front-person-titles > span piece of css. I am very new to css/html (just started working on this portfolio webpage a few days ago.) Where in these lines of css would I change the code so that data analayst text is centered?? In addition to this, when I run code snippet in stackoverflow, the image is formatted the same as the gray box from .front-person-img css code and NOT from the .front-person-img > img code. I am not sure how to make the image respond to the > img code so that its formatting is separate as seen in this jpeg.
Thank you!
.front-section {
padding-top: 60px;
padding-bottom: 200px;
position: relative;
}
}
.section-block>.container,
.section-block {
position: relative;
}
/*=======================================================================
Front Section
=======================================================================*/
body.section-show .transition-mask {
position: absolute;
top: 260px;
height: 500px;
width: 500px;
left: 0;
right: 0;
margin: auto;
z-index: 22;
transform: rotate(45deg);
overflow: hidden;
-webkit-animation: fill2 .8s .4s both ease;
-moz-animation: fill2 .8s .4s both ease;
animation: fill2 .8s .4s both ease;
}
body .transition-mask:before {
content: ' ';
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
body.section-show .transition-mask:before {
-webkit-animation: fill .4s both ease;
-moz-animation: fill .4s both ease;
animation: fill .4s both ease;
background: #CCC;
}
#-webkit-keyframes fill2 {
0% {
transform: rotate(45deg);
}
100% {
z-index: 50;
transform: rotate(0deg);
height: 100%;
width: 100%;
top: 0;
bottom: auto;
}
}
#keyframes fill2 {
0% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
100% {
z-index: 50;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
height: 100%;
width: 100%;
top: 0;
bottom: auto;
}
}
#-webkit-keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.front-section {
padding-top: 60px;
padding-bottom: 200px;
position: relative;
}
.front-heading {
text-align: center;
margin-top: 190px;
}
.front-heading>h2 {
font-size: 55px;
font-weight: lighter;
letter-spacing: 15px;
position: relative;
position: relative;
line-height: 1em;
display: inline-block;
*display: inline;
*zoom: 1;
z-index: 10;
color: #999;
font-family: 'Playfair Display', serif;
font-style: italic;
}
.front-person-img {
width: 500px;
height: 500px;
overflow: hidden;
background: #F0F0F0;
position: relative;
z-index: 15;
-webkit-transition: height .5s .3s ease, transform .5s .8s ease;
-moz-transition: height .5s .3s ease, transform .5s .8s ease;
transition: height .5s .3s ease, transform .5s .8s ease;
margin: 200px auto;
margin-bottom: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 0;
}
.front-person-img > img {
max-width: 100%;
left: -40px;
top: 40px;
position: relative;
vertical-align: bottom;
}
.front-person-titles {
position: relative;
z-index: 10;
height: 500px;
width: 500px;
margin: auto;
margin-top: -500px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.front-person-titles>span {
position: absolute;
z-index: 5;
display: block;
width: 100%;
font-family: Hind, sans-serif;
color: #CCC;
text-align: center;
font-size: 24px;
letter-spacing: 25px;
line-height: 2em;
text-transform: lowercase;
}
.front-person-titles>.t1 {
right: 0;
bottom: 0;
-webkit-transform: rotate(-90deg) translateY(-100%);
-moz-transform: rotate(-90deg) translateY(-100%);
-ms-transform: rotate(-90deg) translateY(-100%);
-o-transform: rotate(-90deg) translateY(-100%);
transform: rotate(-90deg) translateY(-100%);
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.front-person-titles>.t2 {
top: 0px;
left: 0;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.front-person-titles>.t3 {
left: 0;
bottom: 5px;
-webkit-transform: translateY(100%) rotate(180deg);
-moz-transform: translateY(100%) rotate(180deg);
-ms-transform: translateY(100%) rotate(180deg);
-o-transform: translateY(100%) rotate(180deg);
transform: translateY(100%) rotate(180deg);
}
.front-person-links {
margin: auto;
width: 500px;
height: 500px;
margin-top: -500px;
z-index: 25;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: relative;
}
.front-person-links>ul>li {
display: block;
}
.front-person-links>ul {
font-size: 0;
z-index: 99;
position: absolute;
text-align: left;
white-space: nowrap;
left: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
padding: 0;
list-style: none;
margin-left: -15px;
}
.front-person-links>ul>li>a {
font-weight: bold;
display: block;
font-size: 14px;
padding: 25px 0;
cursor: pointer;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
position: relative;
color: #999;
text-align: left;
text-transform: uppercase;
letter-spacing: 3px;
text-decoration: none;
line-height: 1em;
}
.front-person-links>ul>li>a:before,
.front-person-links>ul>li>a:after {
content: ' ';
height: 6px;
width: 15px;
background: #CCC;
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
margin-right: 15px;
font-size: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
display: none;
}
.front-person-links>ul>li>a:after {
margin-left: 15px;
margin-right: 0;
display: none;
}
.front-person-links>ul>li>a:hover {
color: #B7A389;
}
.front-person-links>ul>li>a:hover:after,
.front-person-links>ul>li>a:hover:before {
width: 25px;
background: #999;
}
<!--=============================================================================
Front Section
===============================================================================-->
<section class='front-section'>
<div class='container'>
<div class='transition-mask'></div>
<div class='front-person-img'>
<!--person's image-->
<img src="https://i.ibb.co/qY05xXH/IMG-5876.jpg" alt="IMG-5876" border="0">
<!--/person's image-->
</div>
<!--person's titles-->
<div class='front-person-titles'>
<!--title1-->
<span class='t1'>
Data Analyst
</span>
<!--/title1-->
<!--title2-->
<span class='t2'>
Student
</span>
<!--/title2-->
<!--title3-->
<span class='t3'>
</span>
<!--/title3-->
</div>
I was able to get it looking how you want by modifying the .front-person-titles>.t1 code to the following:
.front-person-titles>.t1 {
right: 0;
bottom: 0;
-webkit-transform: rotate(-90deg) translateY(-100%) translateX(-7.5%);
-moz-transform: rotate(-90deg) translateY(-100%) translateX(-7.5%);
-ms-transform: rotate(-90deg) translateY(-100%) translateX(-7.5%);
-o-transform: rotate(-90deg) translateY(-100%) translateX(-7.5%);
transform: rotate(-90deg) translateY(-100%) translateX(-7.5%);
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
You can see a working JSFiddle here.
I have made a full page overlay menu that is displayed when click on the custom made icon. Its working fine on Android devices and in chrome inspector it works fine for all devices but when I test it on actual iPhone device menu doesn't appear.
Here is the screenshot of the icon before clicking it display like this :
When we click on it, display menu like this:
This menu is opened on iPhone x in chrome responsive tool but when I open it on actual iPhone device it didn't open.
I have tried a fix of adding onclick=void(0) like this
HTML Code
<div id="nav-icon2" onclick = "void(0)">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS:
#nav-icon2 {
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon2 span {
display: block;
position: absolute;
height: 9px;
width: 50%;
background: #d3531a;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon2 span:nth-child(even) {
left: 50%;
border-radius: 0 9px 9px 0;
}
#nav-icon2 span:nth-child(odd) {
left:0px;
border-radius: 9px 0 0 9px;
}
#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
top: 0px;
}
#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
top: 18px;
}
#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
top: 36px;
}
#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon2.open span:nth-child(1) {
left: 5px;
top: 7px;
}
#nav-icon2.open span:nth-child(2) {
left: calc(50% - 5px);
top: 7px;
}
#nav-icon2.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
#nav-icon2.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
#nav-icon2.open span:nth-child(5) {
left: 5px;
top: 29px;
}
#nav-icon2.open span:nth-child(6) {
left: calc(50% - 5px);
top: 29px;
}
JS:
$ = jQuery.noConflict();
$(document).ready(function(){
$('#nav-icon2').click(function(){
$(this).toggleClass('open');
});
});
But it didn't work for me. Here is my code for custom hamburger icon
Demo
Please, help me what's the problem I'll be very thankful to you.
I am trying to make this effect touch-friendly. I have a thumbnail gallery that has titles and descriptions. The title is displayed on load, and when the user hovers over the thumbnail they see the longer description. Then they can click on the entire image to go to the linked page.
I have tried several options, like this one but none seem to work. I'd be fine if the hover acted as a touch to display caption info, and a second touch will open the link that is assigned to the image. Right now, the first touch displays the description for a half second, then follows the link.
I'm open to CSS or js options- I just need to get something to work!
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
This is probably what you're looking for.
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 400px;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox-text a {
text-decoration: none;
color: #ffffff;
font-weight: 700;
padding: 5px;
border: 2px solid #ffffff;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
<div class="hvrbox">
<img src="https://picsum.photos/5760/3840?image=1067" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top hvrbox-layer_slideup">
<div class="hvrbox-text">Take me to Goolge</div>
</div>
</div>
I have a tricky problem which I have been unable to solve.
$(".btn-nav").on("click tap", function() {
$(".nav-container")
.toggleClass("showNav hideNav")
.removeClass("hidden");
$(this).toggleClass("animated");
});
html {
margin: 0 auto;
height: 100% -ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;
-webkit-content-zooming: none;
content-zooming: none;
}
body {
font-family: 'PT Sans', arial, serif;
margin: 0;
background-color: black;
}
button {
z-index: 1070;
background: none;
border: none;
}
button::-moz-focus-inner {
border: 0
}
:focus {
outline: none
}
::-moz-focus-inner {
border: 0
}
.btn-nav:hover {
cursor: pointer
}
.btn-nav:hover .bar {
background: #17BEBB
}
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
.btn-nav {
z-index: 1070;
display: block;
padding: 0.8% 0;
width: 3%;
height: 4%;
position: fixed;
left: 2%;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.btn-nav:focus {
outline: none
}
.middle {
margin: 0 auto
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.animated {
z-index: 1070;
}
.animated .arrow-top-r {
-webkit-transform: rotateZ(-45deg) translateY(180%);
-moz-transform: rotateZ(-45deg) translateY(180%);
-ms-transform: rotateZ(-45deg) translateY(180%);
-o-transform: rotateZ(-45deg) translateY(180%);
transform: rotateZ(-45deg) translateY(180%);
width: 55%;
}
.animated .arrow-middle-r {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
.animated .arrow-bottom-r {
-webkit-transform: rotateZ(45deg) translateY(-180%);
-moz-transform: rotateZ(45deg) translateY(-180%);
-ms-transform: rotateZ(45deg) translateY(-180%);
-o-transform: rotateZ(45deg) translateY(-180%);
transform: rotateZ(45deg) translateY(-180%);
width: 55%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
</body>
https://jsfiddle.net/6t04y9wo/6/
As you can see, the top-left navigation button is shown differently between Chrome and IE.
I tried to get everything work in percent units to avoid incompatibility with 4k monitors (or very different resolutions) or zooming (which is really hard to avoid on a touchscreen-monitor+ windows).
As far as I can see, the height of the buttonelement is measured really differently, and so the inner heights will be. I've tried many different settings for that, but I can't get it work and look good for both Chrome and Internet Explorer.
It seems that the margin here:
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
Is not correct, but I don't know how to fix it.
Maybe there is someone with some useful hints?
This would appear to be due to IE not calculating the height of the button correctly.
When using position: fixed; the position and dimensions of the element should be calculated in relation to the initial containing block:
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.
Fixed positioning (https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning)
It appears that IE is sizing the button in relation to the body. As you are using percentage height and no height has been specified on body this will result in the height for the button being set as auto. This can be overcome by adding height: 100%; to body so that the button's height can be calculated in relation to it.
The height of the bars in the button is set to 50% which with the padding will mean they exceed the height of the button. To overcome this you should set overflow: visible; on the button to allow them to be visible.
There is also a small typo that you will want to fix:
height: 100% -ms-content-zooming: none;
Should be:
height: 100%;
-ms-content-zooming: none;
You may also want to set a min-height and min-width to ensure the button shows when the viewport height is very small.
$(".btn-nav").on("click tap", function() {
$(".nav-container")
.toggleClass("showNav hideNav")
.removeClass("hidden");
$(this).toggleClass("animated");
});
html {
margin: 0 auto;
height: 100%;
-ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;
-webkit-content-zooming: none;
content-zooming: none;
}
body {
height: 100%;
font-family: 'PT Sans', arial, serif;
margin: 0;
background-color: black;
}
button {
overflow: visible;
z-index: 1070;
background: none;
border: none;
}
button::-moz-focus-inner {
border: 0
}
:focus {
outline: none
}
::-moz-focus-inner {
border: 0
}
.btn-nav:hover {
cursor: pointer
}
.btn-nav:hover .bar {
background: #17BEBB
}
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
.btn-nav {
z-index: 1070;
display: block;
padding: 0.8% 0;
width: 3%;
height: 4%;
position: fixed;
left: 2%;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
min-height: 20px;
min-width: 50px;
}
.btn-nav:focus {
outline: none
}
.middle {
margin: 0 auto
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.animated {
z-index: 1070;
}
.animated .arrow-top-r {
-webkit-transform: rotateZ(-45deg) translateY(180%);
-moz-transform: rotateZ(-45deg) translateY(180%);
-ms-transform: rotateZ(-45deg) translateY(180%);
-o-transform: rotateZ(-45deg) translateY(180%);
transform: rotateZ(-45deg) translateY(180%);
width: 55%;
}
.animated .arrow-middle-r {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
.animated .arrow-bottom-r {
-webkit-transform: rotateZ(45deg) translateY(-180%);
-moz-transform: rotateZ(45deg) translateY(-180%);
-ms-transform: rotateZ(45deg) translateY(-180%);
-o-transform: rotateZ(45deg) translateY(-180%);
transform: rotateZ(45deg) translateY(-180%);
width: 55%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
</body>
Alternatively, you could use viewport units to specify the dimensions of the button.
$(".btn-nav").on("click tap", function() {
$(".nav-container")
.toggleClass("showNav hideNav")
.removeClass("hidden");
$(this).toggleClass("animated");
});
html {
margin: 0 auto;
height: 100%;
-ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;
-webkit-content-zooming: none;
content-zooming: none;
}
body {
font-family: 'PT Sans', arial, serif;
margin: 0;
background-color: black;
}
button {
overflow: visible;
z-index: 1070;
background: none;
border: none;
}
button::-moz-focus-inner {
border: 0
}
:focus {
outline: none
}
::-moz-focus-inner {
border: 0
}
.btn-nav:hover {
cursor: pointer
}
.btn-nav:hover .bar {
background: #17BEBB
}
.bar {
display: block;
height: 50%;
width: 100%;
background: #fff;
margin: 22% auto;
}
.btn-nav {
z-index: 1070;
display: block;
padding: 0.8% 0;
width: 4vh;
height: 4vh;
position: fixed;
left: 2%;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
min-height: 20px;
min-width: 50px;
}
.btn-nav:focus {
outline: none
}
.middle {
margin: 0 auto
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.animated {
z-index: 1070;
}
.animated .arrow-top-r {
-webkit-transform: rotateZ(-45deg) translateY(180%);
-moz-transform: rotateZ(-45deg) translateY(180%);
-ms-transform: rotateZ(-45deg) translateY(180%);
-o-transform: rotateZ(-45deg) translateY(180%);
transform: rotateZ(-45deg) translateY(180%);
width: 55%;
}
.animated .arrow-middle-r {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
.animated .arrow-bottom-r {
-webkit-transform: rotateZ(45deg) translateY(-180%);
-moz-transform: rotateZ(45deg) translateY(-180%);
-ms-transform: rotateZ(45deg) translateY(-180%);
-o-transform: rotateZ(45deg) translateY(-180%);
transform: rotateZ(45deg) translateY(-180%);
width: 55%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
</body>
Just use pixels, 4k displays are scaled, my uhd notebook shows exactly the same page when I'm looking at a page with a 1200px width body.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Does anyone know if the explore button on https://glass.eleks.com/ is strictly CSS3? I would like to create something fairly similar on my website. It may require JQuery but I'm not sure. This is what I have currently pulled..
HTML
<div class="main-screen show">
<div class="main-screen-wrapper ">
<div class="start-exploring show">
<div class="button"><span></span>Explore</div>
<div class="bottom-line"></div>
<div class="right-border"></div>
<div class="top-border"></div>
<div class="left-border"></div>
<div class="bottom-border"></div>
<div class="rectangle-border"></div>
</div>
</div>
</div>
CSS
.main-screen.show {
background: rgba(0, 80, 200, 0.2);
}
.main-screen {
position: absolute;
z-index: 130;
width: 100%;
height: 100%;
background: #05092c;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#3A124080', endColorstr='#3A124080');
text-align: center;
-webkit-transition: background 3s;
-moz-transition: background 3s;
-ms-transition: background 3s;
-o-transition: background 3s;
transition: background 3s;
}
.start-exploring.show {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
opacity: 1;
}
.start-exploring.show {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
opacity: 1;
}
.main-screen .start-exploring {
-webkit-transform: perspective(500px) rotateX(-70deg);
-webkit-transform-origin: center center;
-moz-transform: perspective(500px) rotateX(-70deg);
-moz-transform-origin: center center;
-ms-transform: perspective(500px) rotateX(-70deg);
-ms-transform-origin: center center;
-o-transform: perspective(500px) rotateX(-70deg);
-o-transform-origin: center center;
transform: perspective(500px) rotateX(-70 deg);
transform-origin: center center;
opacity: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.start-exploring {
display: inline-block;
margin-top: 50px;
cursor: pointer;
position: relative;
}
.start-exploring .button {
background: rgba(5, 9, 44, 0.5);
width: 320px;
height: 60px;
font-size: 20px;
line-height: 60px;
text-transform: uppercase;
color: #ffffff;
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
letter-spacing: 8px;
}
.start-exploring.show .bottom-line {
-webkit-animation: start-exploring-show 1s linear;
-moz-animation: start-exploring-show 1s linear;
-ms-animation: start-exploring-show 1s linear;
-o-animation: start-exploring-show 1s linear;
animation: start-exploring-show 1s linear;
}
.start-exploring .bottom-line {
position: absolute;
width: 150px;
height: 2px;
background: #19f5e8;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transition: all .05s linear;
-moz-transition: all .05s linear;
-ms-transition: all .05s linear;
-o-transition: all .05s linear;
transition: all .05s linear;
}
.right-border {
position: absolute;
width: 2px;
height: 0px;
background: #19f5e8;
bottom: 0;
right: 0;
margin: auto;
}
.top-border {
position: absolute;
width: 0px;
height: 2px;
background: #19f5e8;
top: 0;
right: 0;
margin: auto;
}
.left-border {
position: absolute;
width: 2px;
height: 0px;
background: #19f5e8;
top: 0;
left: 0;
margin: auto;
}
.bottom-border {
position: absolute;
width: 0px;
height: 2px;
background: #19f5e8;
bottom: 0;
left: 0;
margin: auto;
}
.rectangle-border {
position: absolute;
top: 0;
width: 100%;
height: 100%;
outline-color: rgba(255,255,255,1);
outline-style: solid;
outline-width: 0;
-webkit-transform: scale(1,1);
-webkit-transform-origin: center center;
-moz-transform: scale(1,1);
-moz-transform-origin: center center;
-ms-transform: scale(1,1);
-ms-transform-origin: center center;
-o-transform: scale(1,1);
-o-transform-origin: center center;
transform: scale(1,1);
transform-origin: center center;
}
It's a lot more than that! But yes it's pure CSS3, no JavaScript at all.
Here's the full code: http://jsbin.com/ecuSEXIm/1/edit