mirror of
https://github.com/lkddi/nexusphp.git
synced 2026-04-14 20:40:49 +08:00
support menu modify
This commit is contained in:
xiaomlove
185
public/ddlevelsfiles/ddlevelsmenu-mobile.css
vendored
Normal file
185
public/ddlevelsfiles/ddlevelsmenu-mobile.css
vendored
Normal file
@@ -0,0 +1,185 @@
|
||||
.notransition{ /* class to temporarily disable CSS3 transition. No not edit */
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* ######### Mobile Menu CSS ######### */
|
||||
|
||||
|
||||
nav.mobilelevelsmenu{
|
||||
position: fixed;
|
||||
width: 240px; /* width of menu. Percentage value accepted */
|
||||
height: 100%; /* height of menu */
|
||||
border: 1px solid black;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.5s; /* animate UL menus within mobile container into view */
|
||||
transition: all 0.5s; /* animate UL menus within mobile container into view */
|
||||
}
|
||||
|
||||
nav.mobilelevelsmenu.open{
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.5s; /* animate UL menus within mobile container into view */
|
||||
transition: all 0.5s; /* animate UL menus within mobile container into view */
|
||||
}
|
||||
|
||||
nav.mobilelevelsmenu ul{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: lightyellow;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 10px gray;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: left 0.5s;
|
||||
transition: left 0.5s; /* animate UL menus' left property inside mobile container to show them */
|
||||
}
|
||||
|
||||
|
||||
nav.mobilelevelsmenu ul li.breadcrumb{ /* Breadcrumb DIV that gets added to top of each sub level UL menu */
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid gray;
|
||||
background: black;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav.mobilelevelsmenu ul span.left{ /* SPAN inside breadcrumb containing "left" arrow markup */
|
||||
margin-right: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
color: darkred;
|
||||
}
|
||||
|
||||
|
||||
nav.mobilelevelsmenu ul li{
|
||||
|
||||
}
|
||||
|
||||
nav.mobilelevelsmenu ul li a{
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
color: black;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
nav.mobilelevelsmenu ul li a:hover{
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
nav.mobilelevelsmenu ul li a span.right{ /* SPAN inside LI headers containing "right" arrow markup */
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* ############# Animated Drawer icon (horizontal mobile menu toggler) CSS ############# */
|
||||
|
||||
.animateddrawer{
|
||||
font-size: 10px; /* Base font size. Adjust this value to modify size of drawer icon */
|
||||
width: 3em;
|
||||
height: 2.8em;
|
||||
outline: none;
|
||||
display: none;
|
||||
position: relative;
|
||||
background: white;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.animateddrawer:before, .animateddrawer:after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 0.6em; /* height of top and bottom drawer line */
|
||||
background: black;
|
||||
border-radius: 2px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.3s ease-in; /* set transition type and time */
|
||||
transition: all 0.3s ease-in;
|
||||
}
|
||||
|
||||
.animateddrawer:after{
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.animateddrawer span{
|
||||
width: 100%;
|
||||
height: 0.6em; /* height of middle drawer line */
|
||||
background: black;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.3em; /* set this to - half of middle drawer line height */
|
||||
border-radius: 2px;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
-webkit-transition: all 0.3s ease-in 0.3s; /* set transition type and time */
|
||||
transition: all 0.3s ease-in 0.3s;
|
||||
}
|
||||
|
||||
.animateddrawer span::after{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 0.6em; /* height of middle drawer line */
|
||||
background: black;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
-webkit-transition: all 0.3s ease-in 0.3s; /* set transition type and time */
|
||||
transition: all 0.3s ease-in 0.3s;
|
||||
}
|
||||
|
||||
.animateddrawer.open{
|
||||
}
|
||||
|
||||
.animateddrawer.open:before{ /* style when .open class is added to button */
|
||||
top: 50%;
|
||||
margin-top: -0.3em; /* set this to - half of top drawer line height */
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animateddrawer.open:after{ /* style when .open class is added to button */
|
||||
bottom: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animateddrawer.open span{ /* style when .open class is added to button */
|
||||
-ms-transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.animateddrawer.open span:after{ /* style when .open class is added to button */
|
||||
-ms-transform: rotate(-90deg);
|
||||
-webkit-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
Reference in New Issue
Block a user