JQuery CSS Menu Trouble

Question

I''m trying to create a sliding menu which is giving me a bit of trouble.

Not a CSS and JQuery guru by any stretch, looking for some pointers, especially with the JQ/JS as toggle looks a lot better but couldn't get it to adapt a class (why I have some CSS classes with "-on") to bring out the menu.

I have browsed some online guides but they weren't doing exactly what I wanted and I didn't fully understand them when it was copy-pasta.

Trying to build my own from scratch but come unstuck, at the moment the grey colour appears on the clicks, but the nav doesn't come with it.

Main objective is to create a basic sliding menu that 'pushes' the content to the right.

Mark Up

<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/slide.css" rel="stylesheet" type="text/css"/>
    <script src="~/Scripts/jquery-1.5.1.min.js"></script>
    <script>
        $(function () {
            $(".burger_on").click(function () {
                $(".page-wrap").removeClass("main-nav");
                $(".push-wrap").removeClass("push-wrap");
                $(".page-wrap").addClass("main-nav-on");
                $(".push-wrap").addClass("push-wrap-on");
                return false;
            });
        });

        $(function () {
            $(".burger_off").click(function () {
                $(".page-wrap").removeClass("main-nav-on");
                $(".push-wrap").removeClass("push-wrap-on");
                $(".page-wrap").addClass("main-nav");
                $(".push-wrap").addClass("push-wrap");

                return false;
            });
        });
    </script>
    <title></title>
</head>
<body>
    <div class="page-wrap">
        <div class="main-nav">
            <ul>
                <li class="nav-item">About</li>
                <li class="nav-item">Contact</li>
                <li class="nav-item">Home</li>
            </ul>
        </div>
        <div class="push-wrap">
            <button class="burger_on">☰</button>
            <button class="burger_off">☰</button>
            <div class="content">
                @RenderBody()
            </div>
        </div>
    </div>
</body>

CSS

body {
    font-family: Arial;
    background-repeat: repeat-x;
    background-position: center top;
    background-color: green;
    font-size: 0.8em;
}

.page-wrap {
    height:100%;
    width:100%;
}
.main-nav { /* change width to 20% when menu active*/
    width:0%;
    transition: 0.3s ease;
    background-color: darkgrey;
    height:100%;
}
.main-nav-on {
    float: left;
    width:20%;
    transition: 0.3s ease;
    background-color: darkgrey;
    height: 100%;
}
.push-wrap { /* change width to 80% when menu active*/
    width:100%;
    height: 100%;
}
.push-wrap-on {
    width:80%;
    height: 100%;
}

Sorry, may need some context - also doing that stopped the buttons working at all. — JammAndTea
– JammAndTea, Commented Jun 5, 2015 at 16:27
Wow, that's more than I was looking for, thank you, chuck it as the answer and I'll accept. — JammAndTea
– JammAndTea, Commented Jun 5, 2015 at 16:51

user4639281 · Accepted Answer · 2015-06-05 16:59:13Z

First, scripts in the head need a $(document).ready() wrapper so they don't execute before the DOM is loaded.

Second, you can set a flag variable to hold the state of the menu instead of querying the css.

Third, the easiest way is to use absolute positioning and alter the left property.

(Demo)

$(document).ready(function () {
    var open = false
    $("#burger").click(function () {
        if (!open) { // open it
            open = true;
            $('#off-canvas').css('left', '0px');
            $('#canvas').css('left', '200px');
        } else { // close it
            open = false;
            $('#off-canvas').css('left', '-200px');
            $('#canvas').css('left', '0px');
        }
    });
});

You should use unique id's instead of classes when referencing single elements.

If you want the #canvas to resize instead of moving, set right: 0; on #canvas

html, body {
  margin: 0;
  height: 100%;
}
.page-wrap {
    height:100%;
}
#off-canvas {
    position: absolute;
    left: -200px;
    background-color: darkgrey;
    height:100%;
    width: 200px;
    transition: left 0.3s ease-in-out;
}
#canvas {
    left: 0px;
    width: 100%;
    position: absolute;
    height: 100%;
    overflow: auto;
    transition: left 0.3s ease-in-out;
}

And here is what the HTML ends up looking like

<div id="off-canvas">
    <ul>
        <li class="nav-item">About</li>
        <li class="nav-item">Contact</li>
        <li class="nav-item">Home</li>
    </ul>
</div>
<div id="canvas">
    <button id="burger">☰</button>
    <div class="content">
        @RenderBody()
    </div>
</div>

Jordan Cortes · Accepted Answer · 2015-06-05 16:59:23Z

You were looking for something like this?

$(".menu-button").click(function(){
    $("nav").animate({width:'toggle'}, 300);
});

body, html {
    height: 100%;
    min-height: 100%;
}

.menu {
    background-color: Gray;
    width: 100%;
    padding: 5px 0px 5px 10px;
}

.menu-button {
    font-size: 1.5em;
}

nav {
    background-color: LightGray;
    width: 100px;
    height: 100%;
    padding: 15px;
    float: left;
}

nav > a {
    line-height:150%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
    <span class="menu-button">☰</span>
</div>
<nav>
    <a href="/">About</a>
    <a href="/">Contact</a>
    <a href="/">Home</a>
</nav>
<div>Hello</div>

Collectives™ on Stack Overflow

JQuery CSS Menu Trouble

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related