I don’t always script, but when I do I use data attribute based behaviors.
That’s enough memes for one article. The rest will be a look at how you can quite easily create a responsive menu that is a togglable drawer on smaller screens. The menu will include a search field that is togglable on large screens. Everything (even animations and click handlers) will be implemented completely with just HTML and CSS.
Read on, or just see the whole example at CodePen.
Let’s start with some basic menu markup.
<body> <header class="hi"> <div class="hi-menu"> <a class="hi-menu-logo"> <figure class="figure"> <img class="image" src="logo.png" /> <figcaption class="caption">Site Name</figcaption> </figure> </a> <nav class="hi-nav"> <ul class="hi-nav-list"> <li class="hi-nav-item"><a class="hi-nav-link" href="#">Ichi</a></li> <li class="hi-nav-item"><a class="hi-nav-link" href="#">Ni</a></li> <li class="hi-nav-item"><a class="hi-nav-link" href="#">San</a></li> <li class="hi-nav-item"><a class="hi-nav-link" href="#">Shi</a></li> <li class="hi-nav-item"><a class="hi-nav-link" href="#">Go</a></li> <li class="hi-nav-item"><a class="hi-nav-link" href="#">Roku</a></li> </ul> </nav> <form class="hi-search"> <label class="hi-search-label" for="global-search">Search</label> <input class="hi-search-field" id="global-search" placeholder="What are you looking for?" type="search" /> <button class="hi-search-button" type="submit"> <span class="text">Search</span> </button> </form> </div> </header> <!-- A hero image and content section exist here --> </body>
See a Pen of this code (plus some CSS to make it a little less horrible).
What I have done here is hide the menu off to the left:
.hi-menu {
left: -100%;
position: fixed;
}
There is no way to bring the menu on screen using only CSS, right? Wrong. To bring the menu on screen we need to set the left property to 0:
.hi-menu {
left: 0;
}
But how are we going to apply this rule? If we just put it in our CSS the menu is always visible. This is where the magic comes in. I’m going to use a checkbox with id hi-menu placed right after the opening of the body. When this checkbox is checked, the menu should be visible.
<input type="checkbox" id="hi-menu" />
#hi-menu:checked ~ .hi .hi-menu {
left: 0;
}
Using a label for this checkbox as a menu button should work perfectly:
<label class="hi-menu-button" for="hi-menu"> <span class="text">Menu</span> </label>
See a Pen of how this works in practice (I’ve added some more CSS to make it a little prettier).
Support for wider screens is not implemented, so let’s take a look at how we can do that. First by making the menu a little narrower:
@media screen and (min-width: $beta_start){
.hi-menu {
width: 40%;
}
}
And then rewriting the whole header to always be visible and include a horizontally centered menu. The search field should get its own button to toggle hidden and shown states too.
Adding the search checkbox and button:
<!-- Snip --> <input type="checkbox" id="search-menu" /> <!-- Snip --> <nav class="hi-nav"> <ul class="hi-nav-list"> <!-- The rest of the menu --> <li class="hi-nav-item hi-nav-search"> <label class="hi-nav-search-action hi-nav-link" for="search-menu"><span class="text">Search</span></label> </li> </nav>
And finally styling a horizontal menu and the new search functionality:
@media screen and (min-width: $gamma_start){</pre>
.hi {
background: transparentize(white, .05);
box-shadow: 0 0 .1em $color_profile_2;
left: 0;
padding: 1em 0;
position: fixed;
right: 0;
top: 0;
z-index: 9001;
}
.hi-menu-button {
right: -5em;
}
.hi-menu {
background-color: transparent;
box-shadow: none;
margin: 0 auto;
max-width: $gamma_max;
padding: 0;
position: static;
width: 100%;
}
.hi-nav {
margin: 0 auto;
text-align: center;
width: auto;
}
.hi-nav-item {
border: none;
display: inline-block;
&:first-child {
border: none;
}
}
.hi-nav-search {
display: inline-block;
}
.hi-search {
border: none;
box-shadow: 0 0 .1em $color_profile_2;
left: 25%;
margin-top: 0;
opacity: 0;
pointer-events: none;
position: absolute;
right: 25%;
top: 110%;
transition: all .15s
}
#search-menu:checked ~ .hi .hi-search {
opacity: 1;
pointer-events: all;
top: 110%;
}
}
See the complete Pen (and look: no JS!).