jquery menu with slide from left for sub menus

Question

I wanted to slide sub menus from left or right if i click on li.menu-items for each item of a menu which have sub menus. here is my html markup

        <ul class="menu">
                        <ul>
                            <li class="menu-item">
                                <a href="#">item 1
                                </a>
                                <ul class="sub-menu">
                                    <li class="menu-item">
                                        <a href="#">item 2</a>
                                    </li>
                                    <li class="menu-item">
                                        <ul class="sub-menu">
                                           <li><a href="">item 1</li></li>
                                           <li><a href="">item 1</li></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item">
                                <a href="#">item 4</a>
                                <ul class="sub-menu">
                                    <li class="menu-item">
                                        <a href="#">item5</a>
                                    </li>
                                    <li class="menu-item">
                                        <a href="#">item 6</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item"><a href="#">item 7</a></li>
                            <li class="menu-item"><a href="#">item 8</a></li>
                           
                        </ul>
                    </ul>

if I click on menu item which have sub-menu then the sub menu will open from slide left or right and other menu items should be hide and a back button should be there at top left to back on main menu

here is my js

$('.menu-item').click(function(e){
    if ($('.sub-menu', this).length >=1) {
        e.preventDefault();
    }
    $(this).siblings().find('> .sub-menu').hide();
    $(this).find('> .sub-menu').slideLeft();
    e.stopPropagation();
});

please help me for this

Answer 1

My code is not jQuery but I hope it works for you.

var x = document.getElementsByClassName('menu');
var y = x[0].getElementsByTagName('a');
for (let i = 0; i < y.length; i++) {
    y[i].addEventListener("click", function () {
        var z = this.nextElementSibling;
        if(z){
            var s = z.getAttribute('style');
            if(s === 'display:none;') {
                z.setAttribute('style', 'display:block;')
            } else {
                z.setAttribute('style', 'display:none;')
            }

        }
        
    });
}

<ul class="menu">
    <ul>
        <li class="menu-item">
            <a href="#">item 1</a>
            <ul class="sub-menu">
                <li class="menu-item">
                    <a href="#">item 2</a>
                </li>
                <li class="menu-item">
                    <a href="#">item 3</a>
                    <ul class="sub-menu">
                        <li class="menu-item">
                            <a href="#">item 4</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">item 5</a>
                        </li>
                    </ul>
                </li>
                <li class="menu-item">
                    <a href="#">item 6</a>
                </li>
            </ul>
        </li>
    </ul>
</ul>

Answer 2

I don't think is there any function in jQuery like slideLeft as far as I know. although you can do it with jQuery UI with a little trick like this.

$(this).show("slide", { direction: "left" }, 1000);

but I will prefer a custom CSS example based on jQuery classes. check below code example. if you need anything else. please let me know.

and yes you also did a small mistake: you are having a UL direct child of your Menu UL, Ul can only have LI as a direct child, Correct it and pls close all the tags properly.

$('.menu-item').click(function(e) {
  if ($('.sub-menu', this).length >= 1) {
    e.preventDefault();
  }
  debugger;
  $(this).siblings().find('> .sub-menu').removeClass('open');
  $(this).find('> .sub-menu').addClass("open");
  e.stopPropagation();
});

$('.back').click(function(e){
  $(this).closest('.sub-menu').removeClass('open');
  e.stopPropagation();
})

.menu {
  background: #cccccc;
  position: relative;
}
* {padding :0; margin: 0; box-sizing: border-box;}
.sub-menu {
  display: block;
  position: absolute;
  height: auto;
  width: 100%;
  left: -100%;
  transition: all 0.5s;
  top: 0%;
}

.sub-menu.open {
  left: 0;
  background: #666;
}

.back {cursor: pointer; margin-bottom: 20px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">

  <li class="menu-item">
    <a href="#">item 1</a>
    <ul class="sub-menu">
      <li class="back">back</li>
      <li class="menu-item">
        <a href="#">item 2</a>
      </li>
      <li class="menu-item">
        <ul class="sub-menu">
          <li class="back">back</li>
          <li><a href="">item 1</a></li>
          <li><a href="">item 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="menu-item">
    <a href="#">item 4</a>
    <ul class="sub-menu">
    <li class="back">back</li>
      <li class="menu-item">
        <a href="#">item5</a>
      </li>
      <li class="menu-item">
        <a href="#">item 6</a>
      </li>
    </ul>
  </li>
  <li class="menu-item"><a href="#">item 7</a></li>
  <li class="menu-item"><a href="#">item 8</a></li>


</ul>