时间戳

首页 > 解决方案 > 滑入式菜单的 CSS onclick 事件（无 JS）

html - 滑入式菜单的 CSS onclick 事件（无 JS）

问题描述

我有一个汉堡菜单，当我“单击”它时，菜单会滑入。我设法完成了大部分操作，但是当我单击菜单时，滑入式菜单会停留一秒钟然后返回。我怎样才能让菜单留下来？

#navigationWrap {
        position: fixed;
        top: 0;
        left: -1000px; /* left: 0; */
        width: 710px;
        height: 100vh;
        background: grey;


*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    background: #FCF7F0;
}

header{
    display: flex;
    width: 90%;
    margin: auto;
    height: 10vh;
}

.navbar{
    flex: 1;
    text-align: left;
    padding-top: 60px;
    color: black;
    cursor: pointer;
}

.close{
    flex: 1;
    /* background: lightsalmon; */
    text-align: right;
    padding-top: 60px;
    color: black;
}

.fa {
    font-size:  68px !important; /*size of fa icons*/
}

.presentation{
    display: flex;
    margin: auto;
}

#navigationWrap {
        position: fixed;
        top: 0;
        left: -1000px; /* left: 0; */
        width: 710px;
        height: 100vh;
        background: grey;
        transition: .5s;
        padding: 20px;
        text-align: center;
        box-sizing: border-box;
        z-index: 10;
}

.navbar:active ~ #navigationWrap {
        left: 0;
        transition: .1s;
}

.close_container{
    display: block;
    text-align: left;
    position: absolute;
    top: 60px;
    left: 60px;
    color: white;
    z-index: 15;
    cursor: pointer;
}

.nav-links{
        justify-content: space-around;
        list-style: none;
        padding: 150px 0px 100px 0px;
}

.nav-link{
        text-decoration: none;
        color: white;
        font-size: 50px; 
        line-height: 80pt;

}
<head>
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    </head>
<body>
        <header>
            <div class="navbar" title="menu">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </div>
            <div class="close">
                <i class="fa fa-times" aria-hidden="true"></i>
            </div>

            <div id="navigationWrap" class="navigationWrap">
                <div class="container">
                    <div class="close_container">
                        <i class="fa fa-times" aria-hidden="true"></i>
                    </div>
                   <nav>
                    <ul class="nav-links">
                        <li><a href="#" class="nav-link">Home</a></li>
                        <li><a href="#" class="nav-link">Services</a></li>
                        <li><a href="#" class="nav-link">About</a></li>
                        <li><a href="#" class="nav-link">Contact</a></li>
                    </ul>
                   </nav>
                </div>
             </div>
        </header>
        <main>
            <section class="presentation">
                
            </section>
        </main>
    </body>

        transition: .5s;
        padding: 20px;
        text-align: center;
        box-sizing: border-box;
        z-index: 10;
}

.navbar:active ~ #navigationWrap {
        left: 0;
        transition: .1s;
}

有人可以看看我的问题，看看我该如何解决？先感谢您。

标签： htmlcss

解决方案

如果你想使用带有汉堡按钮的导航菜单，你需要使用<input type="checkbox">它来扩展菜单。

您需要将汉堡包放在导航的兄弟姐妹之后，否则它将无法工作。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* You can't modify checkbox so hide it */

#hamburger-checkbox {
  display: none;
}


/* Use label instead */

.hamburger {
  font-size: 30px;
  position: absolute;
  z-index: 99;
}


/* Use :checked to indicate when it's checked */

#hamburger-checkbox:checked~.nav {
  transition: 2s ease;
  transform: translateX(0px);
}

.nav {
  width: 200px;
  height: 100vh;
  background: orange;
  transform: translateX(-200px);
  transition: 2s ease;
  padding: 40px 10px;
}

.nav a {
  display: block;
  text-align: center;
  padding: 10px;
}
<header>
  <input type="checkbox" id="hamburger-checkbox">
  <label class="hamburger" for="hamburger-checkbox">☰&lt;/label>

  <nav class="nav">
   <a href="#">Home</a>
   <a href="#">About</a>
   <a href="#">Contact</a>
   <a href="#">Projects</a>
  </nav>
</header>

这真的是一个痛苦和漫长的过程。相反，您应该使用 JavaScript 在单击按钮时向导航添加和删除类。

推荐阅读