mobile_navigation.css in Mobile Navigation 7.2
Same filename and directory in other branches
#mobile-navigation-menus { float: left; width: 100%; } .mobile-menu-inner { float: left; z-index: 9999; width: 100%; } .mobile-menu { background-color: #FFFFFF; float: left; margin: 0; padding: 0; position: relative; width: 100%; z-index: 10000; } .mobile-menu li { border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; clear: both; list-style: none outside none; margin: 0; overflow: hidden; } .mobile-menu > li:first-child { border-top: 1px solid #cccccc; } .mobile-menu li.item-with-ul { border-bottom: medium none; } .mobile-menu li.item-with-ul > *:first-child { background-image: url("images/right-arrow.png"); background-position: 92% center; background-repeat: no-repeat; border-bottom: 1px solid #cccccc; float: left; margin: 0; width: 100%; } .mobile-menu li ul { clear: both; overflow: hidden; margin: 0; padding: 0; } .mobile-menu li > a { float: left; padding: 4px 5%; width: 90%; } .mobile-menu > li.item-with-ul > * > a { border-right: 1px solid #cccccc; float: left; padding: 5px 7% 5px 5%; width: 68%; } .mobile-menu li ul li.item-with-ul > * > a { border-right: 1px solid #cccccc; float: left; padding: 5px 7% 5px 9%; width: 65%; } .mobile-menu.mobile-menu-slide li ul li.item-with-ul > * > a { border-right: 1px solid #cccccc; float: left; padding: 5px 7% 5px 7%; width: 65%; z-index: 99; } .mobile-menu li ul li ul li.item-with-ul > * > a { border-right: 1px solid #cccccc; float: left; padding: 5px 7% 5px 11%; width: 65%; } .mobile-menu li ul li ul li ul li.item-with-ul > * > a { border-right: 1px solid #cccccc; float: left; padding: 5px 7% 5px 20%; width: 58%; } .mobile-menu li ul li ul li ul li ul li.item-with-ul > * > a { border-right: 1px solid #cccccc; float: left; padding: 5px 7% 5px 15%; width: 65%; } .mobile-menu li ul li ul li ul li ul li ul li.item-with-ul > * > a { border-right: 1px solid #cccccc; float: left; padding: 5px 7% 5px 17%; width: 63%; } .mobile-menu li ul li ul li ul li ul li ul li ul li.item-with-ul > * > a { border-right: 1px solid #cccccc; float: left; padding: 5px 7% 5px 19%; width: 61%; } .mobile-menu li ul li ul li ul li ul li ul li ul li ul li.item-with-ul > * > a { border-right: 1px solid #cccccc; float: left; padding: 5px 7% 5px 21%; width: 59%; } .mobile-menu li ul li a { padding-left: 9%; width: 87%; } .mobile-menu li ul li ul li a { padding-left: 11%; width: 84%; } .mobile-menu li ul li ul li ul li a { padding-left: 13%; width: 82%; } .mobile-menu li ul li ul li ul li ul li a { padding-left: 20%; width: 80%; } .mobile-menu li ul li ul li ul li ul li ul li a { padding-left: 17%; width: 78%; } .mobile-menu li ul li ul li ul li ul li ul li ul li a { padding-left: 19%; width: 76%; } .mobile-menu li ul li ul li ul li ul li ul li ul li ul li a { padding-left: 21%; width: 74%; } .mobile-menu li ul li ul li ul li ul li ul li ul li ul li ul li a { padding-left: 23%; width: 72%; } .slide-menu-clip .mobile-menu .return-link { background-image: url("images/left-arrow.png"); background-position: 10% center; background-repeat: no-repeat; float: left; padding-left: 10%; } .slide-menu-clip .mobile-menu .return-link { border-bottom: 1px solid #cccccc; } .slide-menu-clip .mobile-menu .return-link a { border-left: 1px solid #cccccc; float: left; margin-left: 10%; } .mobile-menu li.item-with-ul li { background-image: none; } /** * Menu clip */ #slide-menu-clip { background-color: #ffffff; } .mobile-navigation-button-container { height: 45px; } .mobile-navigation-button { background-color: #ffffff; border: 1px solid #cccccc; border-radius: 5px 5px 5px 5px; cursor: pointer; font-weight: bold; margin: 0 10px; padding: 5px 10px; } .menu-tab-handler { background-color: #ffffff; color: #333333; cursor: pointer; font-weight: bold; padding: 5px 5px 5px 10px; position: absolute; } .menu-tab-handler.right { background-color: #ffffff; border: 1px solid #cccccc; font-weight: bold; right: -85px; top: 10px; width: 70px; } .menu-tab-handler.left { background-color: #ffffff; border: 1px solid #cccccc; font-weight: bold; left: -87px; top: 10px; width: 70px; } .menu-tab-handler.bottom { border: 1px solid #CCCCCC; border-radius: 0 0 10px 10px; bottom: -34px; color: #333333; font-weight: bold; left: 15px; padding: 5px 9px 8px 7px; z-index: 99; } .menu-tab-handler.top { border: 1px solid #CCCCCC; border-radius: 10px 10px 0 0; bottom: -34px; color: #333333; font-weight: bold; left: 20px; top: -30px; padding: 5px 9px 8px 7px; z-index: 99; } /* Positioning menu */ .mobile-menu-outer-wrapper.effect-modal_top { position: fixed; top: 0; z-index: 1000; } .mobile-menu-outer-wrapper.effect-modal_left { position: fixed; left: 0; top: 0; z-index: 1000; } .mobile-menu-outer-wrapper.effect-modal_right { position: fixed; right: 0; top: 0; z-index: 1000; } .mobile-menu-outer-wrapper.effect-modal_bottom { position: fixed; left: 0; bottom: 0; z-index: 1000; } .mobile-menu-outer-wrapper.effect-drawer_top { position: relative; float:left; } .mobile-menu-outer-wrapper.effect-drawer_left { position: absolute; } .mobile-menu-outer-wrapper.effect-drawer_right { position: absolute; } /** * Mask */ .mobile-navigation-mask { background-color: #333333; bottom: 0; display: none; filter: alpha(opacity=40); left: 0; position: fixed; opacity: 0.4; right: 0; top: 0; z-index: 999; } /* #mobile-menu-wrapper { z-index: 9999; } */
File
mobile_navigation.cssView source
-
- #mobile-navigation-menus {
- float: left;
- width: 100%;
- }
-
- .mobile-menu-inner {
- float: left;
- z-index: 9999;
- width: 100%;
- }
-
- .mobile-menu {
- background-color: #FFFFFF;
- float: left;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- z-index: 10000;
- }
-
- .mobile-menu li {
- border-bottom: 1px solid #cccccc;
- border-left: 1px solid #cccccc;
- border-right: 1px solid #cccccc;
- clear: both;
- list-style: none outside none;
- margin: 0;
- overflow: hidden;
- }
-
- .mobile-menu > li:first-child {
- border-top: 1px solid #cccccc;
- }
-
- .mobile-menu li.item-with-ul {
- border-bottom: medium none;
- }
-
- .mobile-menu li.item-with-ul > *:first-child {
- background-image: url("images/right-arrow.png");
- background-position: 92% center;
- background-repeat: no-repeat;
- border-bottom: 1px solid #cccccc;
- float: left;
- margin: 0;
- width: 100%;
- }
-
- .mobile-menu li ul {
- clear: both;
- overflow: hidden;
- margin: 0;
- padding: 0;
- }
-
- .mobile-menu li > a {
- float: left;
- padding: 4px 5%;
- width: 90%;
- }
-
- .mobile-menu > li.item-with-ul > * > a {
- border-right: 1px solid #cccccc;
- float: left;
- padding: 5px 7% 5px 5%;
- width: 68%;
- }
-
- .mobile-menu li ul li.item-with-ul > * > a {
- border-right: 1px solid #cccccc;
- float: left;
- padding: 5px 7% 5px 9%;
- width: 65%;
- }
-
- .mobile-menu.mobile-menu-slide li ul li.item-with-ul > * > a {
- border-right: 1px solid #cccccc;
- float: left;
- padding: 5px 7% 5px 7%;
- width: 65%;
- z-index: 99;
- }
-
- .mobile-menu li ul li ul li.item-with-ul > * > a {
- border-right: 1px solid #cccccc;
- float: left;
- padding: 5px 7% 5px 11%;
- width: 65%;
- }
-
- .mobile-menu li ul li ul li ul li.item-with-ul > * > a {
- border-right: 1px solid #cccccc;
- float: left;
- padding: 5px 7% 5px 20%;
- width: 58%;
- }
-
- .mobile-menu li ul li ul li ul li ul li.item-with-ul > * > a {
- border-right: 1px solid #cccccc;
- float: left;
- padding: 5px 7% 5px 15%;
- width: 65%;
- }
-
- .mobile-menu li ul li ul li ul li ul li ul li.item-with-ul > * > a {
- border-right: 1px solid #cccccc;
- float: left;
- padding: 5px 7% 5px 17%;
- width: 63%;
- }
-
- .mobile-menu li ul li ul li ul li ul li ul li ul li.item-with-ul > * > a {
- border-right: 1px solid #cccccc;
- float: left;
- padding: 5px 7% 5px 19%;
- width: 61%;
- }
-
- .mobile-menu li ul li ul li ul li ul li ul li ul li ul li.item-with-ul > * > a {
- border-right: 1px solid #cccccc;
- float: left;
- padding: 5px 7% 5px 21%;
- width: 59%;
- }
-
- .mobile-menu li ul li a {
- padding-left: 9%;
- width: 87%;
- }
-
- .mobile-menu li ul li ul li a {
- padding-left: 11%;
- width: 84%;
- }
-
- .mobile-menu li ul li ul li ul li a {
- padding-left: 13%;
- width: 82%;
- }
-
- .mobile-menu li ul li ul li ul li ul li a {
- padding-left: 20%;
- width: 80%;
- }
-
- .mobile-menu li ul li ul li ul li ul li ul li a {
- padding-left: 17%;
- width: 78%;
- }
-
- .mobile-menu li ul li ul li ul li ul li ul li ul li a {
- padding-left: 19%;
- width: 76%;
- }
-
- .mobile-menu li ul li ul li ul li ul li ul li ul li ul li a {
- padding-left: 21%;
- width: 74%;
- }
-
- .mobile-menu li ul li ul li ul li ul li ul li ul li ul li ul li a {
- padding-left: 23%;
- width: 72%;
- }
-
- .slide-menu-clip .mobile-menu .return-link {
- background-image: url("images/left-arrow.png");
- background-position: 10% center;
- background-repeat: no-repeat;
- float: left;
- padding-left: 10%;
- }
-
- .slide-menu-clip .mobile-menu .return-link {
- border-bottom: 1px solid #cccccc;
- }
-
- .slide-menu-clip .mobile-menu .return-link a {
- border-left: 1px solid #cccccc;
- float: left;
- margin-left: 10%;
- }
-
- .mobile-menu li.item-with-ul li {
- background-image: none;
- }
-
- /**
- * Menu clip
- */
- #slide-menu-clip {
- background-color: #ffffff;
- }
-
- .mobile-navigation-button-container {
- height: 45px;
- }
-
- .mobile-navigation-button {
- background-color: #ffffff;
- border: 1px solid #cccccc;
- border-radius: 5px 5px 5px 5px;
- cursor: pointer;
- font-weight: bold;
- margin: 0 10px;
- padding: 5px 10px;
- }
-
- .menu-tab-handler {
- background-color: #ffffff;
- color: #333333;
- cursor: pointer;
- font-weight: bold;
- padding: 5px 5px 5px 10px;
- position: absolute;
- }
-
- .menu-tab-handler.right {
- background-color: #ffffff;
- border: 1px solid #cccccc;
- font-weight: bold;
- right: -85px;
- top: 10px;
- width: 70px;
- }
-
- .menu-tab-handler.left {
- background-color: #ffffff;
- border: 1px solid #cccccc;
- font-weight: bold;
- left: -87px;
- top: 10px;
- width: 70px;
- }
-
- .menu-tab-handler.bottom {
- border: 1px solid #CCCCCC;
- border-radius: 0 0 10px 10px;
- bottom: -34px;
- color: #333333;
- font-weight: bold;
- left: 15px;
- padding: 5px 9px 8px 7px;
- z-index: 99;
- }
-
- .menu-tab-handler.top {
- border: 1px solid #CCCCCC;
- border-radius: 10px 10px 0 0;
- bottom: -34px;
- color: #333333;
- font-weight: bold;
- left: 20px;
- top: -30px;
- padding: 5px 9px 8px 7px;
- z-index: 99;
- }
-
- /* Positioning menu */
- .mobile-menu-outer-wrapper.effect-modal_top {
- position: fixed;
- top: 0;
- z-index: 1000;
- }
- .mobile-menu-outer-wrapper.effect-modal_left {
- position: fixed;
- left: 0;
- top: 0;
- z-index: 1000;
- }
- .mobile-menu-outer-wrapper.effect-modal_right {
- position: fixed;
- right: 0;
- top: 0;
- z-index: 1000;
- }
- .mobile-menu-outer-wrapper.effect-modal_bottom {
- position: fixed;
- left: 0;
- bottom: 0;
- z-index: 1000;
- }
- .mobile-menu-outer-wrapper.effect-drawer_top {
- position: relative;
- float:left;
- }
- .mobile-menu-outer-wrapper.effect-drawer_left {
- position: absolute;
-
- }
- .mobile-menu-outer-wrapper.effect-drawer_right {
- position: absolute;
- }
-
- /**
- * Mask
- */
- .mobile-navigation-mask {
- background-color: #333333;
- bottom: 0;
- display: none;
- filter: alpha(opacity=40);
- left: 0;
- position: fixed;
- opacity: 0.4;
- right: 0;
- top: 0;
- z-index: 999;
- }
- /*
- #mobile-menu-wrapper {
- z-index: 9999;
- }
- */