Slide out CSS menu

Question 1

I've developed a simple CSS transition solution for a slide out menu with a single toggle, and would love some feedback on if anything could be simplified or improved.

Markup

<!DOCTYPE html>
<html>
 <head>
 <title>Slide out menu</title>
 <link rel="stylesheet" href="css/main.css">
 <meta name="viewport" content="initial-scale=1">
 </head>
 <body class="menu menu-open">
 <header>
 <a href="#" class="menu-toggle">Toggle</a>
 </header>
 <nav class="menu-side">
 This is a side menu
 </nav>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script>
 (function() {
 var body = $('body');
 $('.menu-toggle').bind('click', function() {
 body.toggleClass('menu-open');
 return false;
 });
 })();
 </script>
 </body>
</html>

Styles

body {
 padding-right:50px;
}
.menu {
 overflow-x:hidden;
 position:relative;
 left:0;
}
.menu-open {
 margin-left:241px;
}
.menu-open .menu-side {
 left:0;
}
.menu-side,
.menu {
 -webkit-transition: all 0.2s ease-in;
 -moz-transition: all 0.2s ease-in;
 transition: all 0.2s ease-in;
}
.menu-side {
 position:fixed;
 left:-231px;
 top:0;
 width:210px;
 border-right:1px solid #000;
 height:100%;
 background-color:#333;
 color:#fff;
 padding:10px;
}

Question 2

HTML:

In addition to your existing viewport meta tag, I suggest adding the width value:
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Also moving the tag before you load your stylesheets and the title code help your performance. MDN on using the viewport meta tag.
A header element typically contains headings and other introductory content. The Toggle-link should be part of your navigation as well, because that's what it is. HTML5 Doctor is a great ressource, if you want to know more about this.

CSS:

Generally one should avoid using all in transitions. Using the actual properties you're going to animate is more performant

It would be a help to have a jsfiddle demo of this to test around.

Question 3

Thanks for the feedback. The only thing I'd have to pick up on is that in my opinion the header could house the navigational toggle. w3c says "a group of introductory or navigational aids". Is the toggle not a navigational aid? HTML5 Doctor also mentions that "a recent change to the spec you can now include the <nav> element within the <header>", so do you think the navigation could just sit within the header all together?

Question 4

@AlexGarrett Yes, it is. But it's a part of your actual navigation and shouldn't be seperated from it. You can move the whole navigation to the header, but the toggle alone there is misplaced. That's what I've meant. ;)

Question 5

Sorry, misunderstood you. Makes a lot of sense now.

user35408user35408user35408 · Accepted Answer · 2014-01-27 20:36:27Z

HTML:

In addition to your existing viewport meta tag, I suggest adding the width value:
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Also moving the tag before you load your stylesheets and the title code help your performance. MDN on using the viewport meta tag.
A header element typically contains headings and other introductory content. The Toggle-link should be part of your navigation as well, because that's what it is. HTML5 Doctor is a great ressource, if you want to know more about this.

CSS:

Generally one should avoid using all in transitions. Using the actual properties you're going to animate is more performant

It would be a help to have a jsfiddle demo of this to test around.

Thanks for the feedback. The only thing I'd have to pick up on is that in my opinion the header could house the navigational toggle. w3c says "a group of introductory or navigational aids". Is the toggle not a navigational aid? HTML5 Doctor also mentions that "a recent change to the spec you can now include the <nav> element within the <header>", so do you think the navigation could just sit within the header all together?
@AlexGarrett Yes, it is. But it's a part of your actual navigation and shouldn't be seperated from it. You can move the whole navigation to the header, but the toggle alone there is misplaced. That's what I've meant. ;)

Stack Exchange Network

Slide out CSS menu

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Slide out CSS menu

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions