滑动菜单切换的需要选择汉堡

Question

 
function openNav() { 
 
    document.getElementById("mySidenav").style.width = "50%"; 
 
    document.getElementById("mySidenav2").style.width = "50%"; 
 
} 
 

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

<style> 
 
     body { 
 
      font-family: "Lato", sans-serif; 
 
     } 
 

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

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

 
       .leftSidenav a:hover, .offcanvas a:focus { 
 
        color: #f1f1f1; 
 
       } 
 

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

 
     @media screen and (max-height: 450px) { 
 
      .leftSidenav { 
 
       padding-top: 15px; 
 
      } 
 

 
       .leftSidenav a { 
 
        font-size: 18px; 
 
       } 
 
     } 
 

 
       .rightSidenav { 
 
      height: 100%; 
 
      width: 0; 
 
      position: fixed; 
 
      z-index: 1; 
 
      top: 0; 
 
      right: 0; 
 
      background-color: #111; 
 
      overflow-x: hidden; 
 
      transition: 0.5s; 
 
      padding-top: 60px; 
 
     } 
 

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

 
       .rightSidenav a:hover, .offcanvas a:focus { 
 
        color: #f1f1f1; 
 
       } 
 

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

 
     @media screen and (max-height: 450px) { 
 
      .rightSidenav { 
 
       padding-top: 15px; 
 
      } 
 

 
       .leftSidenav a { 
 
        font-size: 18px; 
 
       } 
 
     } 
 
    </style>

<div id="mySidenav" class="leftSidenav"> 
 
     <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
     <a href="#">About</a> 
 
     <a href="#">Services</a> 
 
     <a href="#">Clients</a> 
 
     <a href="#">Contact</a> 
 
    </div> 
 

 
    <div id="mySidenav2" class="rightSidenav"> 
 
     <a href="#">About 2</a> 
 
     <a href="#">Services 2</a> 
 
     <a href="#">Clients 2</a> 
 
     <a href="#">Contact 2</a> 
 
    </div> 
 

 
    <h2>Would like toggle switch</h2> 
 
    <p>As of now open and close are 2 different icons</p> 
 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

我在菜单由我的汉堡包图标激活的幻灯片。无论屏幕大小如何，我只使用汉堡包图标。截至目前，我的代码使用汉堡包图标在左右菜单中滑动。有一个单独的关闭图标来关闭菜单。我想使用汉堡包图标来打开和关闭我的菜单，并且如果可能的话，在菜单打开时将汉堡包图标变为X.

我试图做我的自我，我无法做到这一点。

谢谢你的帮助。

Answer 1

你可以使用你的开关来切换状态类。你有很多重复的样式可以组合到一个类中。 要重复使用您的切换开关，您可以将其修复。这使您可以在状态更改时将其设置为屏幕中心。

function toggleNav() { 
 
    (document.body || document.documentElement).classList.toggle('nav-is-open'); 
 
}

body { 
 
    font-family: "Lato", sans-serif; 
 
    padding-top: 30px; 
 
} 
 

 
.toggleNav { 
 
    position: fixed; 
 
    left: 5px; 
 
    top: 5px; 
 
    font-size: 30px; 
 
    cursor: pointer; 
 
    z-index: 10; 
 
    opacity: 1; 
 
    
 
    transition: transform .5s ease, color .5s, opacity .5s; 
 
} 
 

 
.nav-is-open .toggleNav { 
 
    transform: translateX(calc(50vw - 40px)); 
 
    color: #fff; 
 
    opacity: .5; 
 
} 
 

 
.nav-is-open .toggleNav::before { 
 
    content: '\000D7'; 
 
} 
 

 
.nav-is-open .toggleNav > span { 
 
    display: none; 
 
} 
 

 
.nav-is-open .toggleNav:hover { 
 
    opacity: 1; 
 
} 
 

 
/* Combine same styles of both sides in one class */ 
 
.Sidenav { 
 
    position: fixed; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 0; 
 
    z-index: 1; 
 

 
    padding-top: 60px; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: width .5s ease; 
 
} 
 

 
.leftSidenav { 
 
    left: 0; 
 
} 
 

 
.rightSidenav { 
 
    right: 0; 
 
    /* Instead of having width: 0 we transform it to the side 
 
    This prevents text from wrapping */ 
 
    width: 50%; 
 
    transform: translateX(100%); 
 
    transition: transform .5s ease; 
 
} 
 

 
/* Combine link styles into one */ 
 
.Sidenav a { 
 
    display: block; 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    transition: 0.3s; 
 
} 
 

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

 
.nav-is-open .Sidenav { 
 
    width: 50%; 
 
    transform: translateX(0); 
 
} 
 

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

<div class="Sidenav leftSidenav"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
</div> 
 

 
<div class="Sidenav rightSidenav"> 
 
    <a href="#">About 2</a> 
 
    <a href="#">Services 2</a> 
 
    <a href="#">Clients 2</a> 
 
    <a href="#">Contact 2</a> 
 
</div> 
 

 
<a class="toggleNav" onclick="toggleNav()"><span>&#9776;</span></a>

我包的跨度内的线路，所以上课的时候.nav-is-open存在我们就可以只隐藏的跨度，并用CSS添加另一个符号。