CSS событие onclick для скользящего меню (NO JS) - PullRequest
Новая
       0

CSS событие onclick для скользящего меню (NO JS)

0 голосов
/ 17 июня 2020

У меня есть гамбургер-меню, и когда я "нажимаю" на него, появляется меню. Мне удалось сделать большую часть этого, но когда я нажимаю на меню, выдвигающееся меню остается на секунду, а затем возвращается назад. Как сделать меню на ночь? 

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

Может ли кто-нибудь взглянуть на мою проблему и посмотреть, как я могу ее исправить? Заранее спасибо.

1 Ответ

0 голосов
/ 17 июня 2020

Если вы хотите использовать меню навигации с кнопкой гамбургера, вам нужно будет использовать <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">☰</label>

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

Это действительно может быть болезненным и долгим процессом. Вместо этого вы должны использовать JavaScript, чтобы просто добавлять и удалять класс в навигации при нажатии кнопки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...