CSS Sliding Menu

  • follow us in feedly
Published June 16, 2013 by Brad Knutson
CSS Sliding Menu

In my previous blog post, I discussed how to make a CSS-only accordion. Shortly thereafter I was building a WordPress theme based on the twentytwelve theme and structure. If you’re familiar with the twentytwelve theme, you know that it is responsive out of the box. For smaller screen widths, the navigation menu disappears altogether and is replaced with a “menu” button. The theme uses Javascript to display the navigation menu when the menu button is clicked.

jQuery Sliding Menu

This got me thinking – why is Javascript required for this effect? We could use the same checkbox technique I outlined in the CSS accordion example to accomplish the same thing. We just need to tweak the code a little.

I decided on putting together a mobile example, so when you view the demo below, shrink your browser down (if you’re not on a mobile device) to see how it would look. I wanted a small bar that was fixed at the top of the screen that when clicked slides down to show the content beneath it. This content could be text, it could be a form, or it could be your navigation menu. It’s a good idea on mobile sites to save as much viewable space as possible for your content, so allowing the user to show or hide the menu is a plus.

CSS Sliding Menu Example

View Demo

HTML

The HTML is fairly simple. I used basically the same structure as the accordion example.

<body>
<div class="slide-up">
<div>
                <input id="slide-up" name="slide-up" type="checkbox" />
                <label for="slide-up"></label>
<div class="article">
Content goes here
</div>
</div>
</div>
        <!-- Other content goes here -->
    </body>

CSS

I’ll reuse a lot of the CSS from the accordion example, but tweak it a little to get the bar to stick to the top of the page.

html {
    background-color: #333333;
}
html, body {
    padding: 0px;
    margin: 0px;
}
body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    height: 100%;
}
body > p {
    padding: 0px 40px;
    color: #EFEFEF;
}
.first {
    margin-top: 60px;
}
.slide-up{
	width: 100%;
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		0px 2px 2px rgba(0,0,0,0.1);
    position: fixed;
    top:0px;
}
.slide-up label {
    background-image: url('arrow.png');
	background-color: #EFEFEF;
    background-position: 5% 50%;
    background-repeat: no-repeat;
	padding: 5px;
	position: relative;
	display: block;
	height: 30px;
	cursor: pointer;
    border: 1px solid #CCC;
}
.slide-up label:hover{
    background-image: url('arrow.png');
	background-color: #F3F3F3;
    background-position: 5% 50%;
    background-repeat: no-repeat;
}
.slide-up input + label {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.slide-up input:checked + label,
.slide-up input:checked + label:hover{
    background-image: url('arrow.png');
	background-color: #CDECC5;
    background-position: 5% 50%;
    background-repeat: no-repeat;
	color: #3d7489;
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		0px 2px 2px rgba(0,0,0,0.1);
}
.slide-up input{
	display: none;
}
.slide-up .menu{
	background: rgb(255, 255, 255);
	overflow: hidden;
	height: 0px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.slide-up .menu p{
	font-style: italic;
	color: #777;
	line-height: 23px;
	font-size: 14px;
	padding: 20px;
}
.slide-up input:checked ~ .menu{
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	height: 155px;
}

That’s really all there is to it – a fairly simplistic example. You could accomplish much more interesting and eye-catching effects, so get creative with it!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">