Initial idea of a mobile-menu
This commit is contained in:
parent
ea04444a59
commit
5cdc60b006
2 changed files with 52 additions and 1 deletions
|
@ -19,6 +19,13 @@ body {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* header menu hides on mobile screen, no padding needed anymore */
|
||||
@media screen and (max-width:40em) {
|
||||
.header {
|
||||
padding-bottom:0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header .headline {
|
||||
text-align:left;
|
||||
color: #ffe;
|
||||
|
@ -68,6 +75,37 @@ body {
|
|||
transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
/* background-color:#f3f3f0; */
|
||||
list-style: none;
|
||||
margin: -0.5em -1em;
|
||||
}
|
||||
|
||||
.mobile-menu li {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.mobile-menu li a {
|
||||
display:block;
|
||||
width:100%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0.3em;
|
||||
padding-left: 1em;
|
||||
font-size: 1.1em;
|
||||
font-weight:bold;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
|
||||
.mobile-menu li a.is-active {
|
||||
background-color:#d6d6d4;
|
||||
}
|
||||
|
||||
.mobile-menu li a:hover {
|
||||
background-color: #ededea;
|
||||
transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.columns {
|
||||
padding:0 10px;
|
||||
}
|
||||
|
|
15
index.html
15
index.html
|
@ -20,7 +20,7 @@
|
|||
<header class="header">
|
||||
<a class="#header"><img src="images/logo-green.png"></a>
|
||||
<h2 class="tagline show-for-medium">The friendly neighborhood tech community</h2>
|
||||
<ul class="header-subnav">
|
||||
<ul class="header-subnav show-for-medium">
|
||||
<li><a href="#">Zom.bi</a></li>
|
||||
<li><a href="#" class="is-active">Blog</a></li>
|
||||
<li><a href="#">Wiki</a></li>
|
||||
|
@ -28,6 +28,19 @@
|
|||
</ul>
|
||||
</header>
|
||||
|
||||
<div class="row show-for-small-only">
|
||||
<div class="columns small-12">
|
||||
<div class="whitebox">
|
||||
<ul class="mobile-menu">
|
||||
<li><a href="#">Zom.bi</a></li>
|
||||
<li><a href="#" class="is-active">Blog</a></li>
|
||||
<li><a href="#">Wiki</a></li>
|
||||
<li><a href="#">Mumble</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row main">
|
||||
<div class="medium-9 columns content-box">
|
||||
<!-- Post begin -->
|
||||
|
|
Loading…
Reference in a new issue