Difference between revisions of "Template:SJTU-BioX-Shanghai/Navigator1"
| (12 intermediate revisions by the same user not shown) | |||
| Line 69: | Line 69: | ||
background-color: white; | background-color: white; | ||
| + | |||
| + | transition: left 0.2s; | ||
} | } | ||
#nav nav { | #nav nav { | ||
margin-left: 1em; | margin-left: 1em; | ||
| + | z-index: 1; | ||
} | } | ||
#nav #nav-trigger { | #nav #nav-trigger { | ||
| − | position: | + | z-index: 2; |
| + | position: fixed; | ||
top: 0px; | top: 0px; | ||
left: 0px; | left: 0px; | ||
height: 100%; | height: 100%; | ||
width: 0.5em; | width: 0.5em; | ||
| + | |||
| + | transition: width 0.2s; | ||
background-color: #55A463; | background-color: #55A463; | ||
| Line 97: | Line 103: | ||
font-size: 0.8em; | font-size: 0.8em; | ||
} | } | ||
| − | #nav nav | + | #nav nav li { |
position: relative; | position: relative; | ||
} | } | ||
| + | |||
#nav ul ul { | #nav ul ul { | ||
| − | |||
position: absolute; | position: absolute; | ||
| − | left: | + | left: 100%; |
top: 0px; | top: 0px; | ||
| + | width: 0em; | ||
| + | |||
| + | margin: 0px; | ||
| + | |||
transition: opacity 0.3s ease-out 0.2s, width 0s linear 0.5s; | transition: opacity 0.3s ease-out 0.2s, width 0s linear 0.5s; | ||
opacity: 0; | opacity: 0; | ||
| − | |||
overflow: hidden; | overflow: hidden; | ||
| + | |||
| + | background-color: white; | ||
| + | box-shadow: 2px 0 1px grey; | ||
} | } | ||
| − | #nav nav | + | #nav nav li:hover ul, #nav nav li ul:hover { |
| + | transition: opacity 0.3s ease-out 0s, width 0s linear 0s; | ||
opacity: 1; | opacity: 1; | ||
width: 15em; | width: 15em; | ||
| Line 123: | Line 136: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
height: 2em; | height: 2em; | ||
| + | } | ||
| + | #nav nav > ul > li > a { | ||
| + | padding-left: 1.2em; | ||
| + | } | ||
| + | #nav nav > ul > li > a:not(:last-child)::before { | ||
| + | content: "+"; | ||
| + | position: absolute; | ||
| + | left: 0em; | ||
} | } | ||
| + | #content.nav-toggle #nav #nav-trigger { | ||
| + | width: 0.9em; | ||
| + | } | ||
| + | #content.nav-toggle #nav #nav-trigger svg { | ||
| + | transform: matrix(-1,0,0,1,3,0) | ||
| + | } | ||
| + | #content.nav-toggle #nav { | ||
| + | left: -11em; | ||
| + | } | ||
</style> | </style> | ||
</aside> | </aside> | ||
</html> | </html> | ||
Latest revision as of 07:21, 17 September 2015