Witam,
Przerabiam pewien template i jest już tam ciekawe menu lecz ja będę chciał zrobić ich kilka i będą po dwa w jednej lini i chciałbym aby lewe menu otwierało się do prawej strony (na zasadzie rozkłądania kartki z zeszytu) a prawe menu otwierało się do lewej strony.
Tutaj już mam trochę zrobione (prawe menu nie działa, potem zrobię po prostu osoby js dla niego).
http://test3.naszastrona.eu/menu.html
Jak się po lewej klika "Open Menu" to chcę żeby tylko w prawo się otwierało, lewej strony nie chcę, lecz nie mogę tego wykombinować. :P
Tutaj jest kod .js
var Menu = (function() {
var $container = $( '#rm-container' ),
$cover = $container.find( 'div.rm-cover' ),
$middle = $container.find( 'div.rm-middle' ),
$right = $container.find( 'div.rm-right' ),
$open = $cover.find('a.rm-button-open'),
$close = $right.find('span.rm-close'),
$details = $container.find( 'a.rm-viewdetails' ),
init = function() {
initEvents();
},
initEvents = function() {
$open.on( 'click', function( event ) {
openMenu();
return false;
} );
$close.on( 'click', function( event ) {
closeMenu();
return false;
} );
$details.on( 'click', function( event ) {
$container.removeClass( 'rm-in' ).children( 'div.rm-modal' ).remove();
viewDetails( $( this ) );
return false;
} );
},
openMenu = function() {
$container.addClass( 'rm-open' );
},
closeMenu = function() {
$container.removeClass( 'rm-open rm-nodelay rm-in' );
},
viewDetails = function( recipe ) {
var title = recipe.text(),
img = recipe.data( 'thumb' ),
description = recipe.parent().next().text(),
url = recipe.attr( 'href' );
var $modal = $( '<div class="rm-modal"><div
class="rm-thumb" style="background-image: url(' + img +
')"></div><h5>' + title + '</h5><p>' +
description + '</p><a href="' + url + '">See the
recipe</a><span
class="rm-close-modal">x</span></div>' );
$modal.appendTo( $container );
var h = $modal.outerHeight( true );
$modal.css( 'margin-top', -h / 2 );
setTimeout( function() {
$container.addClass( 'rm-in rm-nodelay' );
$modal.find( 'span.rm-close-modal' ).on( 'click', function() {
$container.removeClass( 'rm-in' );
} );
}, 0 );
};
return { init : init };
})();
a to kod css
.rm-container {
margin-top:20px!important;
width: 33%;
height: 700px;
max-width: 370px;
display:inline-block;
position: relative;
-webkit-perspective: 1600px;
-moz-perspective: 1600px;
-o-perspective: 1600px;
-ms-perspective: 1600px;
perspective: 1600px;
color: #2a323f;
}
.rm-wrapper,
.rm-wrapper > div {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
text-align: center;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.rm-wrapper .rm-cover {
z-index: 100;
-webkit-transform-origin: 0% 50%;
-webkit-transition-delay: 0.2s;
-moz-transform-origin: 0% 50%;
-moz-transition-delay: 0.2s;
-o-transform-origin: 0% 50%;
-o-transition-delay: 0.2s;
-ms-transform-origin: 0% 50%;
-ms-transition-delay: 0.2s;
transform-origin: 0% 50%;
transition-delay: 0.2s;
}
.rm-wrapper .rm-middle {
z-index: 50;
box-shadow: 0 4px 10px rgba(0,0,0,0.7);
}
.rm-wrapper .rm-right {
z-index: 60;
-webkit-transform-origin: 100% 50%;
-webkit-transition-delay: 0s;
-moz-transform-origin: 100% 50%;
-moz-transition-delay: 0s;
-o-transform-origin: 100% 50%;
-o-transition-delay: 0s;
-ms-transform-origin: 100% 50%;
-ms-transition-delay: 0s;
transform-origin: 100% 50%;
transition-delay: 0s;
}
.rm-wrapper > div > div {
background: #fff url(../img/white_paperboard.jpg);
width: 100%;
height: 100%;
position: absolute;
padding: 30px;
box-shadow:
inset 0 0 0 16px #eaeae8,
inset 0 0 0 17px #636363,
inset 0 0 0 18px #eaeae8,
inset 0 0 0 19px #636363,
inset 0 0 0 20px #eaeae8,
inset 0 0 0 21px #636363;
}
.rm-container .rm-front,
.rm-container .rm-back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.rm-container .rm-back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.rm-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.05)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%);
}
.rm-middle .rm-overlay {
background: -moz-linear-gradient(left, rgba(0,0,0,0) 64%, rgba(0,0,0,0.05) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(64%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.05)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 64%,rgba(0,0,0,0.05) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 64%,rgba(0,0,0,0.05) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0) 64%,rgba(0,0,0,0.05) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 64%,rgba(0,0,0,0.05) 100%);
}
.rm-content {
padding: 20px;
}
.rm-logo,
.rm-content h2,
.rm-content h4,
a.rm-button-open,
.rm-modal h5 {
font-weight: 700;
text-transform: uppercase;
font-family: 'Arvo', Arial, sans-serif;
}
.rm-logo {
width: 100px;
height: 100px;
background: #323b4c url(../img/restaurant.jpg) no-repeat center center;
border-radius: 50%;
margin: 20px auto;
box-shadow:
0 0 0 3px #fff,
0 0 0 4px #e6b741,
0 0 0 5px #fff,
0 0 0 6px #e6b741,
0 0 0 7px #fff,
0 0 0 8px #e6b741;
}
.rm-content h2 {
letter-spacing: 2px;
font-size: 26px;
text-shadow: 1px 1px 0 #fff, 3px 3px 0 #e6b741;
}
.rm-content h3 {
font-size: 13px;
margin: 40px 0;
padding: 20px 40px;
color: #323b4c;
font-weight: 500;
border-top: 4px double #323b4c;
text-transform: uppercase;
line-height: 20px;
text-shadow: 1px 1px 0 rgba(255,255,255,0.8);
}
.rm-content h4 {
margin: 0 0 20px 0;
font-size: 16px;
padding-bottom: 10px;
color: #323b4c;
border-bottom: 4px double #323b4c;
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #E6B741;
letter-spacing: 2px;
}
.rm-content h4:not(:first-child) {
margin-top: 35px;
}
a.rm-button-open {
color: #323b4c;
font-size: 16px;
line-height: 45px;
margin: 10px auto;
display: block;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
a.rm-button-open:hover {
color: #e6b741;
}
.rm-info p {
line-height: 20px;
}
.rm-content dl{
margin: 0;
}
.rm-content dl dt,
.rm-content dl dd{
display: block;
margin: 0;
}
.rm-content dl dt {
font-weight: 500;
text-transform: uppercase;
}
.rm-content dl dd {
font-size: 13px;
padding: 4px 5px 15px;
line-height: 15px;
color: #333;
}
.rm-order p{
padding: 10px;
background: rgba(213, 193, 154, 0.2);
margin: 20px 0 0;
}
a.rm-viewdetails:before{
font-family: 'entypo-selected';
content: '\56';
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 15px;
margin-right: 4px;
text-align: center;
opacity: 0.7;
line-height: 16px;
text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.rm-modal {
position: absolute;
z-index: 10000;
width: 120%;
margin-left: -10%;
top: 50%;
padding: 40px;
background: #fff url(../img/white_paperboard.jpg);
box-shadow:
inset 0 0 0 16px #fff,
inset 0 0 0 17px #e6b741,
inset 0 0 0 18px #fff,
inset 0 0 0 19px #e6b741,
inset 0 0 0 20px #fff,
inset 0 0 0 21px #e6b741,
0 4px 20px rgba(0,0,0,0.4);
opacity: 0;
pointer-events: none;
-webkit-transform: translateZ(1000px);
-moz-transform: translateZ(100px); /* avoid flickering */
-o-transform: translateZ(1000px);
-ms-transform: translateZ(1000px);
transform: translateZ(1000px);
}
.rm-modal h5 {
margin: 0;
font-size: 20px;
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #E6B741;
}
.rm-modal .rm-thumb {
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-position: center center;
float: left;
margin: 0 20px 0 0;
box-shadow:
inset 1px 1px 3px rgba(0,0,0,0.2),
1px 1px 1px rgba(255,255,255,0.9);
}
a.rm-viewdetails,
.rm-modal a {
color: #e6b741;
font-weight: 500;
}
.rm-modal a {
float: right;
clear: both;
}
a.rm-viewdetails:hover,
.rm-modal a:hover {
color: #000;
}
.rm-close {
background: #e6b741;
text-transform: uppercase;
display: block;
position: absolute;
color: #fff;
font-size: 11px;
font-weight: 500;
line-height: 15px;
padding: 2px 5px;
top: -19px;
opacity: 0;
right: 30px;
cursor: pointer;
}
.rm-close-modal {
cursor: pointer;
right: 21px;
top: 21px;
display: block;
position: absolute;
width: 16px;
height: 16px;
background: #2a323f;
color: white;
text-align: center;
line-height: 14px;
font-size: 15px;
font-family: Arial, sans-serif;
}
/* Transitions */
.rm-wrapper,
.rm-wrapper > div {
-webkit-transition: all 0.6s ease-in-out, height 0s;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out, height 0s;
-ms-transition: all 0.6s ease-in-out, height 0s;
transition: all 0.6s ease-in-out, height 0s;
}
.rm-modal {
-webkit-transition:
-webkit-transform 0.6s ease-in-out,
opacity 0.6s ease-in-out;
-moz-transition:
-moz-transform 0.6s ease-in-out,
opacity 0.6s ease-in-out;
-o-transition:
-o-transform 0.6s ease-in-out,
opacity 0.6s ease-in-out;
-ms-transition:
-ms-transform 0.6s ease-in-out,
opacity 0.6s ease-in-out;
transition:
transform 0.6s ease-in-out,
opacity 0.6s ease-in-out;
}
.rm-close {
-webkit-transition: all 0.1s ease-in-out 0s;
-moz-transition: all 0.1s ease-in-out 0s;
-o-transition: all 0.1s ease-in-out 0s;
-ms-transition: all 0.1s ease-in-out 0s;
transition: all 0.1s ease-in-out 0s;
}
.rm-container.rm-open .rm-close {
-webkit-transition: all 0.3s ease-in-out 0.8s;
-moz-transition: all 0.3s ease-in-out 0.8s;
-o-transition: all 0.3s ease-in-out 0.8s;
-ms-transition: all 0.3s ease-in-out 0.8s;
transition: all 0.3s ease-in-out 0.8s;
opacity: 1;
}
.rm-container.rm-open .rm-wrapper > div {
box-shadow: 0 4px 5px -3px rgba(0,0,0,0.6);
}
.rm-container.rm-open .rm-cover {
-webkit-transform: rotateY(-180deg);
-webkit-transition-delay: 0s;
-moz-transform: rotateY(-180deg);
-moz-transition-delay: 0s;
-o-transform: rotateY(-180deg);
-o-transition-delay: 0s;
-ms-transform: rotateY(-180deg);
-ms-transition-delay: 0s;
transform: rotateY(-180deg);
transition-delay: 0s;
}
.rm-container.rm-open .rm-right {
-webkit-transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transform: rotateY(180deg);
-moz-transition-delay: 0.2s;
-o-transform: rotateY(180deg);
-o-transition-delay: 0.2s;
-ms-transform: rotateY(180deg);
-ms-transition-delay: 0.2s;
transform: rotateY(180deg);
transition-delay: 0.2s;
}
.rm-container.rm-in .rm-cover {
-webkit-transform: rotateY(-150deg);
-moz-transform: rotateY(-150deg);
-o-transform: rotateY(-150deg);
-ms-transform: rotateY(-150deg);
transform: rotateY(-150deg);
}
.rm-container.rm-in .rm-right {
-webkit-transform: rotateY(150deg);
-moz-transform: rotateY(150deg);
-o-transform: rotateY(150deg);
-ms-transform: rotateY(150deg);
transform: rotateY(150deg);
}
.rm-container.rm-in .rm-wrapper {
-webkit-transform: translateZ(-500px);
-moz-transform: translateZ(-500px);
-o-transform: translateZ(-500px);
-ms-transform: translateZ(-500px);
transform: translateZ(-500px);
}
.rm-container.rm-in .rm-cover,
.rm-container.rm-in .rm-right,
.rm-container.rm-nodelay .rm-right {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.rm-container.rm-in .rm-modal {
-webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px);
-o-transform: translateZ(0px);
-ms-transform: translateZ(0px);
transform: translateZ(0px);
opacity: 1;
pointer-events: auto;
}