CSS + jQuery toggle menu

Question

I am working on a menu using jQuery + CSS3.

I have an up arrow on the right side of the menu and when clicked the menu slides up and the image switches to a down arrow.

The only problem is that if you click the down arrow, it does't slide back down, even though I've provided a somewhat legit piece of code in order for it to work.

I am new to jquery so any help would be very much appreciated!

HTML:

<nav id="tfc-new-nav">
    <div class="wrapper">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="cart.html">Shopping Cart</a></li>
            <li><a href="login.html">My Account</a></li>
        </ul>
    </div>
    <div class="hide-menu menu-active"></div>
</nav>

CSS:

.wrapper {
    display: block;
    height: 100%;
    width: 1000px;
    position: relative;
    margin: 0 auto;
}

#tfc-new-nav {
    display: block;
    height: 45px;
    width: 100%;
    background: #808E91;
    position: relative;
    top: 50px;
}

#tfc-new-nav ul {
    list-style: none;
}

#tfc-new-nav ul li {
    display: block;
    height: 45px;
    width: 10%;
    float: left;
    text-align: center;
    line-height: 45px;
}

#tfc-new-nav ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Felix Titling', serif;
    cursor: pointer;
    -webkit-transition: background .3s ease-in;
    -moz-transition: background .3s ease-in;
    -ms-transition: background .3s ease-in;
    -o-transition: background .3s ease-in;
    transition: background .3s ease-in;
}

#tfc-new-nav ul li a:hover {
    background: #50798D;
}

#tfc-new-nav .hide-menu {
    position: absolute;
    top: 20px;
    right: 10px;
    cursor: pointer;
}

#tfc-new-nav .hide-menu.menu-active {
    display: block;
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/6/61/Black_Up_Arrow.png');
    background-size: 100% 100%;
    height: 7px;
    width: 7px;
}

#tfc-new-nav .hide-menu.menu-hidden {
    display: block;
    background-image: url('http://www.wpclipart.com/signs_symbol/BW/direction_arrows/down_arrow.png');
    background-size: 100% 100%;
    height: 7px;
    width: 7px;
}

JavaScript:

$(document).ready(function() {

    $("#tfc-new-nav .hide-menu.menu-active").click(function() {

        $("#tfc-new-nav").animate({

            top: "30px"

        });

        $(this).removeClass("menu-active");
        $(this).addClass("menu-hidden");

        $(this).animate({
            top: "35px"
        });

    });

    $("#tfc-new-nav .hide-menu.menu-hidden").click(function() {

        $("#tfc-new-nav").animate({

            top: "95px"

        });

        $(this).removeClass("menu-hidden");
        $(this).addClass("menu-active");

        $(this).animate({
            top: "20px"
        });

    });

});

LIVE DEMO

I actually have a header above the menu which the menu will slide under, but that's not included in the fiddle, just on the actual page. But that should give you an idea. — ModernDesigner
– ModernDesigner, Commented Jan 3, 2013 at 1:56

Zoltan Toth · Accepted Answer · 2013-01-03 02:07:19Z

3

You should delegate your events, like

$("#tfc-new-nav").on("click", ".menu-hidden", function() {
    ...
});

DEMO

answered Jan 3, 2013 at 2:07

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

str11 Over a year ago

I was wondering if they would change live as it doesn't make sense, though the new selector for .on() seems pretty pointless unless it has speed improvements.

str11 · Accepted Answer · 2013-01-03 02:02:37Z

0

Use .live() instead .click()

Example:

$("#tfc-new-nav .hide-menu.menu-hidden").live("click", function() {
    // Do stuff here
}

This takes into account updated manipulation of the DOM, tested and worked

answered Jan 3, 2013 at 2:02

str11

4375 silver badges13 bronze badges

4 Comments

Zoltan Toth Over a year ago

@ModernDesigner It is - .live() - As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

ModernDesigner Over a year ago

Huh. That's weird because I'm using the latest version of jQuery (on my site, not the fiddle) using http://code.jquery.com/jquery.min.js

Gabe Over a year ago

Just because some method is marked as deprecated doesn't mean it won't work. It means you should stop using it because it won't be update and will be removed on a upcoming version.

ModernDesigner Over a year ago

Ohh, thanks for the understanding. Like I said, I'm still a bit new to jQuery. So what I did was use .on() instead of .click() and for future readers I'll see if I can still edit the answer. Thanks! :-)

Shawn Northrop · Accepted Answer · 2013-01-03 01:58:07Z

0

You should be able to call $.slideToggle() to handle this and minify your code.

Here is a link to the manual entry: http://api.jquery.com/slideToggle/

This will animate and set display:none when the anitmation is complete.

answered Jan 3, 2013 at 1:58

Shawn Northrop

6,0747 gold badges45 silver badges86 bronze badges

1 Comment

ModernDesigner Over a year ago

No, $.slideToggle() won't work because the menu slides under the header but the bottom part is still visible, that way the user can still click the down arrow to reveal the menu again. I didn't include the header in the jsFiddle (didn't think it was necessary).

Collectives™ on Stack Overflow

CSS + jQuery toggle menu

LIVE DEMO

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related