@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
margin: .55em;
color: black;
}
/* custom scrollbar */
::-webkit-scrollbar {
width: .95em;
}
::-webkit-scrollbar-track {
background-color: rgba(217, 217, 217, 0.5);
}
::-webkit-scrollbar-thumb {
background: rgba(184, 184, 184, 0.5);
box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
}
/* Advanced Checkbox Hack */
body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
position: absolute;
left: 0;
display: none;
width: 2em;
height: 2.25em;
padding: .35em;
font-size: 1.1em;
color: #fff;
transition: color .3s ease-in-out;
cursor: pointer;
user-select: none;
margin: 0;
background: rgba(0, 0, 0, 0.4);
}
/* big screens */
nav[role="off-canvas"] {
position: relative;
width: 50em;
margin: 0 auto;
transition-duration: .3s, .5s;
transition-timing-function: ease-in-out;
transition-property: left, opacity, box-shadow;
}
nav[role="off-canvas"] a {
color: #fff;
text-decoration: none;
font: 1.4em 'Open Sans', sans-serif;
transition: color .3s ease-in-out;
display: table-cell;
vertical-align: middle;
}
nav[role="off-canvas"] ul {
padding: 0;
margin: 0 auto;
width: 100%;
}
nav[role="off-canvas"] ul > li {
float: left;
padding: .5em 0;
width: 8em;
margin: .5em 0;
opacity: .8;
text-transform: uppercase;
display: table;
background: rgba(247, 52, 8, 0.65);
cursor: pointer;
text-align: center;
transition-duration: .3s;
transition-timing-function: ease-in-out;
transition-property: box-shadow, color, opacity, padding-left;
cursor: pointer;
}
nav[role="off-canvas"] ul > li:hover {
color: #fff;
opacity: 1;
box-shadow: 0.5em 0 0 0 rgba(255, 255, 255, 0.95);
}
nav[role="off-canvas"] ul > li:hover > a {
color: #fff;
}
nav[role="off-canvas"] ul > li:nth-child(2) {
background: rgba(247, 183, 8, 0.65);
}
nav[role="off-canvas"] ul > li:nth-child(3) {
background: rgba(32, 247, 8, 0.65);
}
nav[role="off-canvas"] ul > li:nth-child(4) {
background: rgba(8, 231, 247, 0.65);
}
nav[role="off-canvas"] ul > li:nth-child(5) {
background: rgba(8, 72, 247, 0.65);
}
/* small screens */
@media screen and (max-width: 44em) {
html,
body {
margin: 0;
overflow-x: hidden;
}
.content {
margin: 2.5em .5em 0 .5em;
}
nav[role="off-canvas"] {
position: absolute;
top: 3em;
left: -20em;
width: 20em;
opacity: 0;
}
nav[role="off-canvas"] ul > li {
height: 100%;
width: 100%;
text-align: left;
margin: 0;
}
nav[role="off-canvas"] ul > li:hover {
box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.45);
}
label {
display: block;
}
label:after {
position: absolute;
right: .25em;
top: 0;
content: "\2261";
font-size: 1.8em;
}
label:hover,
input:checked ~ label {
color: #000;
}
input:checked ~ nav[role="off-canvas"] {
opacity: 1;
left: 0;
box-shadow: -30em 0 0 30em rgba(0, 0, 0, 0.3);
}
input:checked ~ nav[role="off-canvas"] ul > li {
padding: .55em .55em .55em 1.5em;
}
input:checked ~ nav[role="off-canvas"] ul > li:hover {
padding-left: 3.5em;
}
input:checked ~ nav[role="off-canvas"] ul > li:after {
position: absolute;
right: .25em;
content: "\203A";
font: bold 1.4em sans-serif;
color: inherit;
}
input:checked ~ .content {
margin-left: 20.5em;
margin-right: -20.5em;
}
}
<input type="checkbox" id="menu">
<label for="menu" onclick></label>
<nav role="off-canvas">
<ul>
<li><a href="#">Stream</a></li>
<li><a href="#">Lab</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
Können Sie erzählen, wie wollen Sie Ihr ansprechendes Menü aussehen sollte? –
Warum ist Stackable keine gute Lösung? – Weedoze
@Weedoze Da ein stapelbares Hauptnavigationsmenü immer "offen" ist, deckt es den größten Teil der ersten Seite auf einem mobilen Bildschirm ab. Die führende Entwicklung von Semantic sagt, dass es keine Pläne für ein wirklich reaktionsfähiges Menü gibt, also suche ich nach etwas anderem. – pbarney