Question

我正致力于移动导航，目前我的导航项目全部叠加在一起。我想拥有它，所以当你点击一个顶级链接时，导航从右边滑过来显示下一个子菜单......用一个后退按钮带你回到一个关卡。

我希望实现的一个典型例子是“弗雷泽之家”。移动导航菜单...道歉，因为我不确定这种导航风格的正确术语，有很多选择。

我开始使用的示例 -

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>

仅限＆＃39;等级1＆＃39;应该在菜单崩溃时显示，然后在您点击/点按“等级1”时显示然后是＆＃39; Level 2＆＃39;菜单应该从右侧滑入，因此对于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。以全屏模式运行;）

＆＃13;

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";
   }
		
}

＆＃13;

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;}
}

＆＃13;

<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>

＆＃13;

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

2 个答案: