CODEWITHSUNDEEP
javascriptjqueryhtml
victor
victor

Reputation: 537

slide children ul of parent from left to right jquery

I have a div that contains a menu, that menu slide from left to rigth when the user click on a button, everything is ok until here, but i can't replied the same effect when I tried to show the next target.

The skeleton of the menu is below:

<button id="icons-header" class="hamburguer">
 Push me!
</button>
<div id="sideBar" class="container-fluid sidebar visible">
<div class="row">
    <div class="menu-left">
            <ul id="mm-1" class="mm-list visible"> /This is the principal menu
                <li><a class="mm-next" href="#" data-target="#women">Women</a></li>
                <li><a class="mm-next" href="#" data-target="#men">Men</a></li>
                <li><a class="mm-next" href="#" data-target="#kids">Kids</a></li>
            </ul>

            <!-- from here to the final are the sub elements -->
            <ul id="men" class="mm-list">
                <li><a class="mm-next icon" href="#" data-target="#mm-1">
            <i class="glyphicon glyphicon-triangle-left"></i>  Home</a></li>
                <li class="menu-title"><span> Men</span></li>
                <li><a class="mm-next" href="#" data-target="#men-clothing">clothes</a></li>
                <li><a class="mm-next" href="#" data-target="#mm-bags">stuff</a></li>
            </ul>

            <ul id="men-clothing" class="mm-list">
                <li><a class="men-bags" href="#" data-target="#men">
            <i class="glyphicon glyphicon-triangle-left"></i>  Men</a></li>
                <li class="menu-title"><span> clothes</span></li>
                <li><a href="#">element</a></li>
                <li><a href="#">element</a></li>
                <li><a href="#">element</a></li>
                <li><a href="#">element</a></li>
                <li><a href="#">element</a></li>

            </ul>

The first effect to show the menu is this:

var hidden = $('#sideBar');
        var element = $('#mm-1');
        if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
            hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');

        } else {
            hidden.animate({"left":"0px"}, "slow").addClass('visible');

        }

That code I replied to show the new segment but not works, my complete code is jsfiddle

Upvotes: 0

Views: 336

Answers (3)

KRS
KRS

Reputation: 41

@victor, In this case you can do something like this(I just made changes in JS). Please take a look at once.

<script>
$(function(){
$(".hamburguer").click(function(){
  var button =  $(this).attr('class');
    console.log(typeof button);
    if(button == "hamburguer")
    {
        $(this).removeClass('hamburguer');
        $(this).addClass('blueCross');
        $('#mm-1').show();
        /*$('#sideBar').show(300);*/
    }else
    {
        $(this).removeClass('blueCross');
        $(this).addClass('hamburguer');
        $(".mm-list").hide();
    }
    var hidden = $('#sideBar');
    var element = $('#mm-1');
    if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
        hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');

    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
        $('#mm-1').show();
    }
});
$(document).on('click', '.mm-next', function (e) {

    e.preventDefault();
    var hidden = $('#sideBar');
    var target = $(this).data("target");
    var others = $("div.menu-left").find(".mm-list").not(target);
    others.hide();
    hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
    hidden.animate({"left":"0px"}, "slow").removeClass('visible');
    $(target).show();
    return false;
});

});
</script>

Let me know if it helped.

Upvotes: 1

KRS
KRS

Reputation: 41

Class name 'hamburguer' create issue as they seems non-identical in supplied javascript. Please check it once. Let me know if it helped.

Upvotes: 0

shakyl mansuri
shakyl mansuri

Reputation: 191

There is error in your code, You class name is different in you javascript. I have made some changes in your javascript please take a look into it and let me know if it doesn't work

$(function(){
$(".hamburguer").click(function(){
        var button =  $(this).attr('class');
        console.log(typeof button);
        if(button == "hamburguer")
        {
            $(this).removeClass('hamburguer');
            $(this).addClass('blueCross');
            $('#mm-1').show();
            /*$('#sideBar').show(300);*/

        }else
        {
            $(this).removeClass('blueCross');
            $(this).addClass('hamburguer');
            $(".mm-list").hide();

        }
        var hidden = $('#sideBar');
        var element = $('#mm-1');
        if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
            hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');

        } else {
            hidden.animate({"left":"0px"}, "slow").addClass('visible');

        }


    });
    $(document).on('click', '.mm-next', function (e) {
        e.preventDefault();
        var target = $(this).data("target");
        var others = $("div.menu-left").find(".mm-list").not(target);
        others.hide();
        $(target).show();

        return false;
    });
    });

Upvotes: 0

Related Questions