Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .navContainer,
- .contentWrapper,
- .navContainer2L,
- .iconBar,
- .iconBar:after,
- .iconBar:before,
- .resMenuIcon,
- .resNav_wrapper{
- -webkit-transition: all 0.3s ease-in-out 0s;
- -moz-transition: all 0.3s ease-in-out 0s;
- -ms-transition: all 0.3s ease-in-out 0s;
- -o-transition: all 0.3s ease-in-out 0s;
- transition: all 0.3s ease-in-out 0s;
- }
- .contentWrapper.level1{
- -webkit-transform: translateX(-300px);
- -moz-transform: translateX(-300px);
- -ms-transform: translateX(-300px);
- -o-transform: translateX(-300px);
- transform: translateX(-300px);
- }
- .contentWrapper.level2{
- -webkit-transform: translateX(-340px);
- -moz-transform: translateX(-340px);
- -ms-transform: translateX(-340px);
- -o-transform: translateX(-340px);
- transform: translateX(-340px);
- }
- .contentWrapper.level3{
- -webkit-transform: translateX(-380px);
- -moz-transform: translateX(-380px);
- -ms-transform: translateX(-380px);
- -o-transform: translateX(-380px);
- transform: translateX(-380px);
- }
- .resNav_wrapper{
- width: 300px;
- height: 100%;
- background: #A21216;
- position: fixed;
- right: 0;
- top: 0;
- z-index: 9999;
- padding: 30px 0;
- -webkit-transform: translateX(100%);
- -moz-transform: translateX(100%);
- -ms-transform: translateX(100%);
- -o-transform: translateX(100%);
- transform: translateX(100%);
- }
- .contentWrapper.level2 .resNav_wrapper{
- width: 340px;
- }
- .contentWrapper.level3 .resNav_wrapper{
- width: 380px;
- }
- .navContainer{
- display: block;
- background: #A21216;
- position: absolute;
- height: 100%;
- top: 0;
- right: 0;
- bottom: 0;
- width: 300px;
- -webkit-transform: translateX(100%);
- -moz-transform: translateX(100%);
- -ms-transform: translateX(100%);
- -o-transform: translateX(100%);
- transform: translateX(100%);
- }
- .contentWrapper.level1 .navContainer.depth1{
- width: 300px;
- -webkit-transform: translateX(0);
- -moz-transform: translateX(0);
- -ms-transform: translateX(0);
- -o-transform: translateX(0);
- transform: translateX(0);
- }
- .contentWrapper.level2 .navContainer.depth1{
- background: #6b0616;
- width: 340px;
- -webkit-transform: translateX(0);
- -moz-transform: translateX(0);
- -ms-transform: translateX(0);
- -o-transform: translateX(0);
- transform: translateX(0);
- }
- .contentWrapper.level3 .navContainer.depth1{
- background: #6b0616;
- width: 380px;
- -webkit-transform: translateX(0);
- -moz-transform: translateX(0);
- -ms-transform: translateX(0);
- -o-transform: translateX(0);
- transform: translateX(0);
- }
- .contentWrapper.level3 .navContainer.depth2 .menuTitle,
- .contentWrapper.level3 .navContainer.depth2 .menuBack,
- .contentWrapper.level3 .navContainer.depth2 > ul,
- .contentWrapper.level2 .navContainer.depth1 > ul{
- display: none;
- }
- .contentWrapper.level3 .navContainer.depth2:before,
- .contentWrapper.level2 .navContainer.depth1:before{
- content: "1";
- position: absolute;
- top: 10px;
- left: 0;
- text-align: center;
- width: 40px;
- color: rgba(255, 255, 255, 0.5);
- font-size: 40px;
- }
- .contentWrapper.level3 .navContainer.depth2:before{
- content: "2";
- }
- .navContainer.depth2{
- border-left: 1px solid rgba(0, 0, 0, 0.2);
- }
- .contentWrapper.level2 .navContainer.depth2{
- background: #A21216;
- width: 300px;
- -webkit-transform: translateX(0px);
- -moz-transform: translateX(0px);
- -ms-transform: translateX(0px);
- -o-transform: translateX(0px);
- transform: translateX(0px);
- }
- .contentWrapper.level3 .navContainer.depth2{
- background: #6b0616;
- width: 340px;
- -webkit-transform: translateX(0px);
- -moz-transform: translateX(0px);
- -ms-transform: translateX(0px);
- -o-transform: translateX(0px);
- transform: translateX(0px);
- }
- .navContainer.depth3{
- border-left: 1px solid rgba(0, 0, 0, 0.2);
- }
- .contentWrapper.level3 .navContainer.depth3{
- width: 300px;
- -webkit-transform: translateX(0px);
- -moz-transform: translateX(0px);
- -ms-transform: translateX(0px);
- -o-transform: translateX(0px);
- transform: translateX(0px);
- }
- .resMenuIcon{
- height: 50px;
- width: 50px;
- display: block;
- background: #A21216;
- color: #fff;
- padding: 10px;
- position: absolute;
- top: 50px;
- left: -70px;
- z-index: 10;
- margin: 0;
- cursor: pointer;
- }
- .logged-in .resMenuIcon,
- .admin-bar .resMenuIcon{
- top: 82px;
- }
- .resOpen .resMenuIcon{
- left: -50px;
- }
- .resMenuIcon .iconBar:after,
- .resMenuIcon .iconBar:before{
- content: " ";
- width: 30px;
- height: 2px;
- display: block;
- background: #fff;
- position: absolute;
- top: -8px;
- }
- .resMenuIcon .iconBar:after{
- top: 8px;
- }
- .resMenuIcon .iconBar{
- position: relative;
- width: 30px;
- height: 2px;
- display: block;
- background: #fff;
- margin-top: 0;
- }
- .menuIconClose.resMenuIcon .iconBar{
- background: none;
- }
- .menuIconClose.resMenuIcon .iconBar:after{
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- -o-transform: rotate(-45deg);
- transform: rotate(-45deg);
- left: 0;
- top: 0;
- }
- .menuIconClose.resMenuIcon .iconBar:before{
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- transform: rotate(45deg);
- right: 0;
- top: 0;
- }
- .navContainer ul{
- padding: 0;
- margin: 0;
- list-style: none;
- }
- .navContainer ul li{
- display: block;
- position: relative;
- -webkit-transition: all 0.5s ease-in-out 0s;
- -moz-transition: all 0.5s ease-in-out 0s;
- -ms-transition: all 0.5s ease-in-out 0s;
- -o-transition: all 0.5s ease-in-out 0s;
- transition: all 0.5s ease-in-out 0s;
- }
- .navContainer ul li .subMenu a,
- .navContainer ul li a{
- display: block;
- color: #fff;
- font-size: 20px;
- line-height: 1;
- text-transform: capitalize;
- padding: 20px 30px 20px 50px;
- box-shadow: inset 0 -2px rgba(0,0,0,0.15);
- }
- .navContainer ul li .subMenu a{
- font-size: 18px;
- }
- .navContainer ul li a:hover{
- background: rgba(0, 0, 0, 0.1);
- }
- .subMenu{
- display: none;
- }
- .subMenuArrow{
- font-family: 'FontAwesome';
- font-size: 24px;
- line-height: 1;
- color: #fff;
- position: absolute;
- right: 20px;
- top: 16px;
- cursor: pointer;
- height: 26px;
- width: 26px;
- cursor: pointer;
- z-index: 1;
- text-align: center;
- }
- .subMenuArrow:before{
- content: "\f105";
- font-family: 'FontAwesome';
- line-height: 1;
- color: #fff;
- }
- .menuTitle{
- display: inline-block;
- width: 100%;
- color: #fff;
- font-size: 24px;
- line-height: 1;
- text-transform: uppercase;
- padding: 20px 30px 20px 50px;
- box-shadow: inset 0 -2px rgba(0,0,0,0.15);
- }
- .menuBack{
- position: relative;
- display: inline-block;
- width: 100%;
- text-align: left;
- color: #fff;
- font-size: 18px;
- line-height: 1;
- padding: 20px 30px 20px 50px;
- box-shadow: inset 0 -2px rgba(0,0,0,0.15);
- text-transform: uppercase;
- cursor: pointer;
- }
- .menuBack:before{
- font-size: 24px;
- line-height: 1;
- color: #fff;
- position: absolute;
- left: 30px;
- top: 16px;
- cursor: pointer;
- content: "\f104";
- font-family: 'FontAwesome';
- color: #fff;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement