6
\$\begingroup\$

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;
}
Improve this question
\$\endgroup\$
0

1 Answer 1

Reset to default
5
\$\begingroup\$

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.

Improve this answer
\$\endgroup\$
3
  • \$\begingroup\$ 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? \$\endgroup\$
    – Alex Garrett
    Jan 28, 2014 at 15:48
  • \$\begingroup\$ @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. ;) \$\endgroup\$
    – kleinfreund
    Jan 28, 2014 at 15:51
  • \$\begingroup\$ Sorry, misunderstood you. Makes a lot of sense now. \$\endgroup\$
    – Alex Garrett
    Jan 28, 2014 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.