创建从右到左的离屏子菜单导航

Question

我正在开发移动导航，目前我的导航项都堆叠在一起。我想要它，所以当您单击顶级链接时，导航会从右侧滑过以显示下一个子菜单...带有后退按钮可将您带回一个级别。

我希望实现的一个主要示例是“House of Fraser”移动导航菜单...抱歉，我只是不确定这种导航风格的正确术语，有很多选择.

我开始使用的示例 -

https://jsfiddle.net/StuartP/pp9664bs/3/

<nav id="navxs">
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <ul>
            <li>
                <a href="#">Level1</a>
                <div class="container">
                    <ul>
                        <li>
                            <a href="#">Level2</a>
                                <ul>
                                    <li>
                                        <a href="#">Level 3</a>
                                        <a href="#">Level 3</a>
                                    </li>
                                </ul>

                        </li>
            <li>
              <a href="#">Level2</a>
                                <ul>
                                    <li>
                                        <a href="#">Level 3</a>
                                        <a href="#">Level 3</a>
                                    </li>
                                </ul>
            </li>
                    </ul>
                </div>
            </li>
        </ul>
</div>

<div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>
</div>

</nav>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
</script>

当菜单折叠时，只有“1 级”应显示，然后当您单击/点按“1 级”时，“2 级”菜单应从右侧滑入，3 级菜单应如此。

任何帮助将不胜感激

谢谢 斯图尔特

Answer 1

对于遇到此帖子的其他人...我终于设法在这里找到了我想要的东西 -

http://github.danielcardoso.net/sliding-menu/#

我真的需要加快我的 Javascript 的速度，甚至远程考虑将它放在一起，所以感谢 Daniel Cardoso 优雅的滑动导航，再次感谢 Tobii 的级联导航选项。

Answer 2

好的，为了实现你想要的，我对你的代码做了一些修改。

首先，我需要确保各个级别在菜单中不会相互重叠。为此，我将此padding-left:20px; 添加到ul css 中的代码中。

    ul li {
      list-style: none;   
      padding-left:20px;  /*added this line*/
    }

其次，我需要修改您openNav() 以接收一个参数，一个数字。根据该数字，您可以知道您所在的级别，并且可以修改mySidenav 元素的宽度。

第三，我给你做了一个按钮来反转动作。

只要你与 a 标签的宽度保持一致，这一切都可以工作，或者如果你不能这样做，请稍微调整一下 ul 元素的填充，以便将较低级别进一步移动mySidenav div。

另外，我在代码中添加number * 70 和/或65 也是有原因的，因为你的起始代码的填充。我没有时间深入研究你的代码，并找出究竟是什么原因，但你可以，以优化代码并摆脱70 px。

document.getElementById("mySidenav").style.width = number * 70 + 50 + width + "px";

祝你好运，这是一个工作示例 PS。以全屏模式运行它；）

openNav = function(number) {
    var width =  document.getElementById("mySidenav").clientWidth;
    if (number == 1) {
      if (width == 0) {
    	  document.getElementById("mySidenav").style.width = number * 70 + 50 + width + "px";
    	  document.getElementById("main").style.marginLeft = number * 70 + 50 + width + "px";
      }
    } else if (number==2){
   	document.getElementById("mySidenav").style.width = 65 +  120 + "px";
    	document.getElementById("main").style.marginLeft = 65 +  120 + "px";
    } else {
       document.getElementById("mySidenav").style.width = 65 +  185 + "px";
       document.getElementById("main").style.marginLeft = 65 +  185 + "px";
    }
}

closeNav = function() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}

backOneLevel = function() {
   var width =  document.getElementById("mySidenav").clientWidth;
   if (width > 120) {
   	document.getElementById("mySidenav").style.width = width - 65 + "px";
   	document.getElementById("main").style.marginLeft = width - 65 + "px";
   } else {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
   }
		
}

ul li {
	  list-style: none;   
      padding-left:20px;  /*added this line*/
}
  
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
     overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

	.sidenav a:hover {
    color: #f1f1f1;
	}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px;}
}

<nav id="navxs">

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <ul>
    <li>
     <a href="#" onclick="openNav(2)" >Level1</a>
      <div class="container">
        <ul>
          <li>
            <a href="#" onclick="openNav(3)">Level2</a>
            <ul>
              <li>
                <a href="#">Level 3</a>
                <a href="#">Level 3</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" onclick="openNav(3)">Level2</a>
            <ul>
              <li>
                <a href="#">Level 3</a>
                <a href="#">Level 3</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

<div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav(1)">&#9776; </span>
  <button type="button" onclick="backOneLevel()">Go one level back</button>
</div>

</nav>