zombi/theme-base
11
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Initial idea of a mobile-menu

Browse source
This commit is contained in:
madmaurice 2016-10-25 19:27:17 +00:00
parent ea04444a59
commit 5cdc60b006
2 changed files with 52 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
css/index.css
View file

@ -19,6 +19,13 @@ body {
margin-bottom: 1rem; 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 { .header .headline {
text-align:left; text-align:left;
color: #ffe; color: #ffe;
@ -68,6 +75,37 @@ body {
transition: all 0.35s ease-in-out; 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 { .columns {
padding:0 10px; padding:0 10px;
} }

15
index.html
View file

@ -20,7 +20,7 @@
<header class="header"> <header class="header">
<a class="#header"><img src="images/logo-green.png"></a> <a class="#header"><img src="images/logo-green.png"></a>
<h2 class="tagline show-for-medium">The friendly neighborhood tech community</h2> <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="#">Zom.bi</a></li>
<li><a href="#" class="is-active">Blog</a></li> <li><a href="#" class="is-active">Blog</a></li>
<li><a href="#">Wiki</a></li> <li><a href="#">Wiki</a></li>
@ -28,6 +28,19 @@
</ul> </ul>
</header> </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="row main">
<div class="medium-9 columns content-box"> <div class="medium-9 columns content-box">
<!-- Post begin --> <!-- Post begin -->