CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MattEm
MattEm

Reputation: 181

Menu only "clickable" once

I have a menu div that is opacity 0, visibility hidden initially. I essentaially want this div to be made available on a click of another div ( its a menu that sticks to the top of my page, discoverable/hide-able via click).

This works great.... ONE TIME...

I can click the "#menuIcon" and my menu is availble. I can click and it is hidden. Then my menu is forever hidden and will not become available again. Help me fix this??

jQuery code
/* Discovers menu on clicks */
$('#menuIcon').click(function () {
    if ($('#menu ul').css('visibility') == 'hidden') {
        $('#menu ul').css('visibility', 'visible');
        $('#menu ul').animate({
            opacity: 1
        }, 500);
    } else {
        $('#menu ul').animate({
            opacity: 0
        }, 500,
        function () {
            $('#menu ul').css('visibility', 'hidden');
        });
    }
});

Upvotes: 0

Views: 93

Answers (4)

divy3993
divy3993

Reputation: 5810

If you want you can try this totally different approach and it's simple too.

Used : fadeToggle() plugin JQuery

JSFiddle : DEMO

CSS

html, body {
    margin:0%;
    width:100%;
    height:100%;
}
.header {
    display:block;
    width:100%;
    height:50px;
    margin:0%;
    background:#2b2937;
    padding:5px 0px;
}
.menu {
    display:block;
    float:right;
    width:80px;
    height:auto;
    background:lightgreen;
    text-align:center;
    color:white;
    padding:5px 0px;
    margin-top:10px;
    cursor:pointer;
}

.menu-list
{
    display:none;
    padding:0px;
    background:lightgreen;
    float:right;
    position:fixed;
    top:60px; /* Header height=50px + top/bottom-padding=5px so, 50+5+5 = 60px*/
    right:0px;
}

li
{
    padding:5px 0px;
}

HTML

<div class="header"> <span class="menu">
        MENU
    </span>

</div>
<span class="menu-list">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
</span>

JS

$(".menu").click(function()
                 {
                     $(".menu-list").fadeToggle();
                 });

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

Typo:

$('#menu ul').animate({opacity : 0 }, 500, function() {
            $('#menu ul').css('visibility','hidden');
        });

jsfiddle: http://jsfiddle.net/9geoh4vz/1/

Upvotes: 1

Josh
Josh

Reputation: 133

In your animate script, you forget to close the parentheses in the proper location this should fix it:

$('#menuIcon').click(function () {
    if ($('#menu ul').css('visibility') == 'hidden') {
        $('#menu ul').css('visibility', 'visible');
        $('#menu ul').animate({
            opacity: 1
        }, 500);
    } else {
        $('#menu ul').animate({
            opacity: 0
        }, 500,
        function () {
            $('#menu ul').css('visibility', 'hidden');
        });
}
});

Also, note that JSFiddle is your friend. Use it to help tidy up your script and check for errors in your script

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : You can use a variable to know if menu has been shown for once and use it in your if condition.

Note : - you can use is(':visible') instead of .css('visibility') and user show() / hide() for making menu visible and hidden as shown in code below

var isVisibleOnce = false;
/* Discovers menu on clicks */
$('#menuIcon').click( function() {
    //check if isVisibleOnce is false and menu not visible
    //then show menu
    if(!isVisibleOnce  && !$('#menu ul').is(':visible')) {
        //set isVisibleOnce to true
        isVisibleOnce  = true;
        $('#menu ul').animate({opacity : 1 }, 500,function(){
           $('#menu ul').show();
       });
    }
    else {   
        $('#menu ul').animate({opacity : 0 }, 500), function() {
            $('#menu ul').hide();
        });
    }
});

Upvotes: 0

Related Questions