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ć. 
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 = $( '
’ + title + ’
’ + description + 'See the recipex
’ ); $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 }; })();[/code] a tutaj kod CSS
[code].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; }