mobile_navigation.css in Mobile Navigation 7
#mobile-menu-inner {
float: left;
z-index: 9999;
}
#mobile-menu,
.mobile-menu {
background-color: #ffffff;
float: left;
margin: 0;
padding: 0;
width: 100%;
}
#mobile-menu li,
.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,
.mobile-menu li.item-with-ul {
border-bottom: medium none;
}
#mobile-menu li.item-with-ul > *:first-child,
.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,
.mobile-menu li ul {
clear: both;
overflow: hidden;
margin: 0;
padding: 0;
}
#mobile-menu li > a,
.mobile-menu li > a {
float: left;
padding: 4px 5%;
width: 90%;
}
#mobile-menu > li.item-with-ul > * > a,
.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,
.mobile-menu li ul li.item-with-ul > * > a {
border-right: 1px solid #cccccc;
float: left;
padding: 5px 7% 5px 9%;
width: 65%;
}
.slidemenu #mobile-menu li ul li.item-with-ul > * > a,
.slidemenu .mobile-menu li ul li.item-with-ul > * > a {
border-right: 1px solid #cccccc;
float: left;
padding: 5px 7% 5px 7%;
width: 65%;
}
#mobile-menu li ul li ul li.item-with-ul > * > a,
.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,
.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,
.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,
.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,
.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,
.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;
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,
.mobile-menu li.item-with-ul li {
background-image: none;
}
/**
* Menu clip
*/
#slide-menu-clip {
background-color: #ffffff;
}
#collapsed-menu-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-attached-button {
background-color: #ffffff;
color: #333333;
cursor: pointer;
font-weight: bold;
height: 20px;
padding: 5px 5px 5px 10px;
position: absolute;
width: 41px;
}
#menu-attached-button.left {
background-color: #ffffff;
border: 1px solid #cccccc;
font-weight: bold;
right: -56px;
top: 10px;
}
#menu-attached-button.right {
left: -56px;
top: 10px;
}
#menu-attached-button.top {
border-radius: 0 0 10px 10px;
bottom: -30px;
color: #333333;
font-weight: bold;
left: 20px;
padding: 5px 0 5px 5px;
}
#menu-attached-button.bottom {
left: 20px;
top: -30px;
}
/**
* 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.css
View source
-
- #mobile-menu-inner {
- float: left;
- z-index: 9999;
- }
-
- #mobile-menu,
- .mobile-menu {
- background-color: #ffffff;
- float: left;
- margin: 0;
- padding: 0;
- width: 100%;
- }
-
- #mobile-menu li,
- .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,
- .mobile-menu li.item-with-ul {
- border-bottom: medium none;
- }
-
- #mobile-menu li.item-with-ul > *:first-child,
- .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,
- .mobile-menu li ul {
- clear: both;
- overflow: hidden;
- margin: 0;
- padding: 0;
- }
-
- #mobile-menu li > a,
- .mobile-menu li > a {
- float: left;
- padding: 4px 5%;
- width: 90%;
- }
-
- #mobile-menu > li.item-with-ul > * > a,
- .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,
- .mobile-menu li ul li.item-with-ul > * > a {
- border-right: 1px solid #cccccc;
- float: left;
- padding: 5px 7% 5px 9%;
- width: 65%;
- }
-
- .slidemenu #mobile-menu li ul li.item-with-ul > * > a,
- .slidemenu .mobile-menu li ul li.item-with-ul > * > a {
- border-right: 1px solid #cccccc;
- float: left;
- padding: 5px 7% 5px 7%;
- width: 65%;
- }
-
- #mobile-menu li ul li ul li.item-with-ul > * > a,
- .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,
- .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,
- .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,
- .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,
- .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,
- .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;
- 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,
- .mobile-menu li.item-with-ul li {
- background-image: none;
- }
-
- /**
- * Menu clip
- */
- #slide-menu-clip {
- background-color: #ffffff;
- }
-
- #collapsed-menu-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-attached-button {
- background-color: #ffffff;
- color: #333333;
- cursor: pointer;
- font-weight: bold;
- height: 20px;
- padding: 5px 5px 5px 10px;
- position: absolute;
- width: 41px;
- }
-
- #menu-attached-button.left {
- background-color: #ffffff;
- border: 1px solid #cccccc;
- font-weight: bold;
- right: -56px;
- top: 10px;
- }
-
- #menu-attached-button.right {
- left: -56px;
- top: 10px;
- }
-
- #menu-attached-button.top {
- border-radius: 0 0 10px 10px;
- bottom: -30px;
- color: #333333;
- font-weight: bold;
- left: 20px;
- padding: 5px 0 5px 5px;
- }
-
- #menu-attached-button.bottom {
- left: 20px;
- top: -30px;
- }
-
- /**
- * 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;
- }