I am working on a website with some friends for fun and we are having an issue with the nav menu not showing up after we press the button, I had to use flexbox to align my hamburger menu to the navbar originally, but now when we press it, it isnt showing any of the sub menus at all.
Yes, we realize that webkit is for scss, it was just there for examples
.topnav {
flex-grow: 1;
max-height: 100px;
}
.navbarItems a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 24px;
}
.navbarItems a:hover {
background-color: darkgray;
color: black;
}
.navbarItems a.active {
background-color: white;
color: white;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
background-color: grey;
}
/* Hambuger Menu */
.burger {
background: none;
outline: 0;
cursor: pointer;
border-top: 4px solid currentColor;
width: 28px;
transition: border-top 0.1s ease-in-out;
-webkit-transition: border-top 0.1s ease-in-out;
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-top: 4px solid currentColor;
width: 100%;
margin-top: 5px;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger:after {
content: "";
display: block;
border-top: 4px solid currentColor;
width: 100%;
margin-top: 5px;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
position: relative;
align-self: center;
}
.burger-check {
display: none;
}
.burger-check:checked ~ .burger {
border-top: 4px solid transparent;
transition: border-top 0.5s ease-in-out;
-webkit-transition: border-top 0.5s ease-in-out;
}
.burger-check:checked ~ .burger:before {
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
align-self: center;
}
.burger-check:checked ~ .burger:after {
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.navigation {
overflow: hidden;
background-color: black;
max-height: 0;
-webkit-transition: max-height 0.5s ease-in-out;
transition: max-height 1.5s ease-in-out;
}
.burger-check:checked ~ .navigation{
overflow: visible;
background-color: purple;
max-height: 100%;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
p {
background-color: floralwhite;
font-family: 'Libre Baskerville', serif;
font-size: 30px;
text-align: center;
}
body {
background-color: floralwhite;
font-family: 'Libre Baskerville', serif;
font-size: 30px;
text-align: centeR;
}
h1 {
font-family: 'Libre Baskerville', serif;
font-style: italic;
text-align: center;
}
a {
color: inherit;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
font-size: 25px;
padding: 5px 0;
}
li a {
text-decoration: none;
}
li a:hover {
text-decoration: underline;
}
.img {
width:1000px;
height:400px;
}
.header {
width: 322px;
height: 219px;
}
h4 {
font-family: 'Libre Baskerville', serif;
text-align: center;
list-style: square;
}
<div class="topnav" id="myTopnav">
<div class="navbarItems">
Home
About
</div>
</div>
<input class="burger-check" id="burger-check" type="checkbox">
<label for="burger-check" class="burger"></label>
</div>
<nav id="navigation1" class="navigation">
<ul>
<li><h1>Professional Awards</h1></li>
<li>Advisor of the Year Award</li>
<li>Emerging Advisor of the Year Award</li>
<li>Emerging Professional of the Year Award</li>
<li>Hall of Fame Award</li>
<li>Outstanding Service Award</li>
<li>Student of the Year</li>
<li><h1>Service Learning Awards</h1></li>
<li>Community Service Award</li>
<li>Environmental Action Awareness</li>
<li>Safety Awareness Award</li>
<li>Service Learning Individual Award</li>
<li>Special Olympics Award</li>
<li><h1>Special Recognition Awards</h1></li>
<li>BPA Marketing and Public Relations</li>
<li>BPA Merit Scholar</li>
<li>Chapter Activities Award of Excellence</li>
<li>Membership Explosion Award</li>
<li>Recruiter of the Year Award</li>
<li>Social Media Award</li>
<li>The Professional Cup</li>
</ul>
</nav>
Ive got some problems with animating :before element. It's a little bit messy but im leaving it at stage that i ended my job. So everytinhgs work beside that :before element - arrow in FA. It should smoothly slide to right side, but its only jumping eaven with transition time seted up.
HTML and CSS:
.seemore span {
overflow: hidden;
position: relative;
color: white;
left: -90px;
width: 10px !important;
}
.seemore {
overflow: hidden;
transition: all 0.35s ease-in-out;
}
.usluga:hover {
background: #dc0d1d;
transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
/* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
color: white !important;
transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
left: 0px;
transition: all 0.35s ease-in-out;
}
.seemore:before {
content: " ";
background: red;
widows: 10px;
height: 10px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #dc0d1d;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
}
.usluga:hover .seemore:before {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
left: 130px;
transition: all 0.3s ease-out;
}
<div class="usluga">
<p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
<p class="normalfont">Druk<br>Wielkoformatowy</p>
<p class="seemore"><span>zobacz więcej</span></p>
</div>
Transition goes from initial value to a new value and bounces back.
You do not have an initial left property set for your element.
Just add left: 0 to the initial stats and it should work.
.seemore span {
overflow: hidden;
position: relative;
color: white;
left: -90px;
width: 10px !important;
}
.seemore {
overflow: hidden;
transition: all 0.35s ease-in-out;
}
.usluga:hover {
background: #dc0d1d;
transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
/* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
color: white !important;
transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
left: 0px;
transition: all 0.35s ease-in-out;
}
.seemore:before {
content: " ";
background: red;
widows: 10px;
height: 10px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #dc0d1d;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
/* Setting initial 'left' value */
left: 0;
}
.usluga:hover .seemore:before {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
left: 130px;
transition: all 0.3s ease-out;
}
<div class="usluga">
<p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
<p class="normalfont">Druk<br>Wielkoformatowy</p>
<p class="seemore"><span>zobacz więcej</span></p>
</div>
I've been working on a site and I've encountered a problem with transitions which only only happens in Chrome. Somehow Chrome doesn't want to do the transition which every other browser I use ( Safari, Firefox ) does.
Here's the HTML:
<div class="kategoria_box">
<div class="kategoria_box_header">
<h4>Fürdő</h4>
</div>
<div class="kategoria_box_image">
<a href="termekek/kategoriak/furdo/">
<img src="http://mondano.hu/img/furdo.jpg">
<span class="caption">
<p>Fürdőszoba</p>
</span>
</a>
</div>
</div>
and here's the CSS:
div.kategoria_box_image {
font-size: 1.5em;
font-weight: 200;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
}
div.kategoria_box_image img {
left: 0;
max-width: 460px;
-webkit-transition: all 600ms ease-out;
-moz-transition: all 600ms ease-out;
-o-transition: all 600ms ease-out;
-ms-transition: all 600ms ease-out;
transition: all 600ms ease-out;
}
div.kategoria_box_image .caption {
opacity: 0;
height: 100%;
text-align: left;
padding: 60px 0 0px 0px;
background-color: #fff;
position: absolute;
color: #5d5d5d;
z-index: 100;
-webkit-transition: all 600ms ease-out;
-moz-transition: all 600ms ease-out;
-o-transition: all 600ms ease-out;
-ms-transition: all 600ms ease-out;
transition: all 600ms ease-out;
left: 0;
}
div.kategoria_box_image:hover .caption {
opacity: 0.82;
}
Is something wrong about my code apart from being coded in my own unique style ?
You don't need the webkit- prefix anymore. You forgot to set top:0 for span.caption
http://caniuse.com/#feat=css-transitions
Here's my codepen:
http://codepen.io/dschu/pen/XbwYom
div.kategoria_box_image {
font-size: 1.5em;
font-weight: 200;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
}
div.kategoria_box_image img {
left: 0;
max-width: 460px;
transition: all 600ms ease-out;
}
div.kategoria_box_image .caption {
opacity: 0;
height: 100%;
text-align: left;
padding: 60px 0 0px 0px;
background-color: #fff;
position: absolute;
color: #5d5d5d;
z-index: 100;
transition: all 600ms ease-out;
top: 0;
left: 0;
}
div.kategoria_box_image:hover .caption {
opacity: 0.82;
}
I'm building an image overlay from right to left transition. The transition is working fine but the caption is 45% width of the image and I want the transition to stop at the end of caption width not continue till the end of image width.
This is my code
.screenshot {
float: left;
margin: 50px;
position: relative;
overflow: hidden;
}
.screenshot > * {
display: block;
}
.screenshot h3 {
margin: 8px;
padding: 0;
text-indent: 0;
text-align: right;
font: 21px/25px "TwCenMT";
text-transform: none;
text-decoration: none;
color: #fff;
letter-spacing: normal;
}
.screenshot-caption {
position: absolute;
width: 45%;
height: 100%;
background: rgb(93, 84, 77);
background: rgba(93, 84, 77, .7);
color: #ed4e6e;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.screenshot-caption h1 {
color: #fff;
}
.screenshot-caption a {
display: table;
margin: 0 auto;
bottom:0;
text-align: center;
background: #2c3e50;
padding: 6px 12px;
color: #000;
text-decoration: none;
}
.screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 0;
}
.screenshot-caption_right {
top: 0;
left: 100%;
}
.screenshot:hover .screenshot-caption {
top: 0;
left: 0;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.screenshot:hover .screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1;
}
<div class="screenshot">
<img src="http://fillmurray.com/300/200">
<div class="screenshot-caption screenshot-caption_right">
<h1>Right to Left</h1>
Read More
</div>
</div>
http://jsfiddle.net/vhp2nL7k/
The transition should be 45% of the image according to caption width
As you want the transition to stop the end of caption, the absolute position of the caption at that time would be left = 100-(width of caption div)% = 55% in this case.
.screenshot {
float: left;
margin: 50px;
position: relative;
overflow: hidden;
}
.screenshot > * {
display: block;
}
.screenshot h3 {
margin: 8px;
padding: 0;
text-indent: 0;
text-align: right;
font: 21px/25px "TwCenMT";
text-transform: none;
text-decoration: none;
color: #fff;
letter-spacing: normal;
}
.screenshot-caption {
position: absolute;
width: 45%;
height: 100%;
background: rgb(93, 84, 77);
background: rgba(93, 84, 77, .7);
color: #ed4e6e;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.screenshot-caption h1 {
color: #fff;
}
.screenshot-caption a {
display: table;
margin: 0 auto;
bottom:0;
text-align: center;
background: #2c3e50;
padding: 6px 12px;
color: #000;
text-decoration: none;
}
.screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 0;
}
.screenshot-caption_right {
top: 0;
left: 100%;
}
.screenshot:hover .screenshot-caption {
top: 0;
left: 55%;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.screenshot:hover .screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1;
}
<div class="screenshot">
<img src="http://fillmurray.com/300/200">
<div class="screenshot-caption screenshot-caption_right">
<h1>Right to Left</h1>
Read More
</div>
</div>
I want to make a sliding menu using solely CSS. The menu will reveal a list of items and a close button inside it. I currently have an anchor tag on my homepage that is styled correctly, but it does not do anything when clicked.
HTML:
<body class="homepage body-push">
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Focus</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
</body>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
UPDATE: I finally found a way to get it working.
HTML:
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Menu</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu h1.logo a {
font-family: 'Raleway', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.15em;
line-height: 40px;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
}
.menu h1.logo a:hover {
color: #f85c37;
}
.menu img.logo {
margin: 20px 0;
max-width: 160px;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
Javascript:
// Menu settings
$('#menuToggle, .menu-close').on('click', function(){
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toleft');
$('#theMenu').toggleClass('menu-open');
});
// Scrollable menu on small devices
$(window).bind("load resize", function(){
if($(window).height() < 400){
$(".menu").css("overflow-y","scroll");
}
else {
$(".menu").css("overflow-y","hidden");
}
});
I would recommend reading this: http://www.sitepoint.com/css3-sliding-menu/
If the article is TL;DR then use
/* Revealing 3D Menu CSS */
body
{
font-family: sans-serif;
font-size: 100%;
padding: 0;
margin: 0;
color: #333;
background-color: #221;
}
/* main page */
article
{
position: fixed;
width: 70%;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 30px 15%;
background-color: #fff;
overflow: auto;
z-index: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
article:after
{
position: absolute;
content: ' ';
left: 100%;
top: 0;
right: 0;
bottom: 0;
background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
pointer-events: none;
}
/* navigation */
nav
{
position: fixed;
left: -16em;
top: 0;
bottom: 0;
background-color: #654;
border-right: 50px solid #765;
box-shadow: 4px 0 5px rgba(0,0,0,0.2);
z-index: 1;
cursor: pointer;
}
nav:after
{
position: absolute;
content: ' ';
width: 0;
height: 0;
right: -70px;
top: 50%;
border-width: 15px 10px;
border-style: solid;
border-color: transparent transparent transparent #765;
}
nav ul
{
width: 14em;
list-style-type: none;
margin: 0;
padding: 1em;
}
nav a:link, nav a:visited
{
display: block;
width: 100%;
font-weight: bold;
line-height: 2.5em;
text-indent: 10px;
text-decoration: none;
color: #ffc;
border-radius: 4px;
outline: 0 none;
}
nav a:hover, nav a:focus
{
color: #fff;
background-color: #543;
text-shadow: 0 0 4px #fff;
box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}
/* hovering */
article, article:after, nav, nav *
{
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
nav:hover
{
left: 0;
}
nav:hover ~ article
{
-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
transform: translateX(16em) perspective(600px) rotateY(10deg);
}
nav:hover ~ article:after
{
left: 60%;
}
This can be used to create a 3d sliding menu as seen here