Как сделать, чтобы меню отображалось после нажатия анимированного значка в html? - PullRequest
Новая
       0

Как сделать, чтобы меню отображалось после нажатия анимированного значка в html?

0 голосов
/ 26 марта 2020

Я делаю сайт, и у меня есть значок, который может анимировать (он идет от 3 тактов до x). Тем не менее, я не могу получить меню, которое появится под ним после того, как я щелкну по нему.

Я попытался: добавить оператор if, чтобы при щелчке по значку появлялось меню.

добавление кнопки меню и добавление ссылок внутри контейнера.

но, похоже, ничего не работает.

вот мой код: 

<!DOCTYPE html>
<body>
<head>
<title>JJ's Contracting Services.com</title>
<style>
 h1 {
     position: absolute;
     top:0;
     left:16px;
 }
 .header  {
     width:auto;
     padding: 200px;
     color: white;
     background-image: url(https://ak6.picdn.net/shutterstock/videos/1022525326/thumb/1.jpg);
     background-position: center top;
   }


 img {
     z-index: -1;
     vertical-align: text-top;
     top:0;
     width:100%;
     height:200px;   
 }

 .container {
    display: inline-block;
    cursor: pointer;
    position:absolute;
    right:30px;
    top:10;
 }

 .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px 0;
    transition: 0.4s;

 }

 .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
 }

 .change .bar2 {opacity:0;}

 .change .bar3 {
     -webkit-transform: rotate(45deg) translate(-8px, -8px);
      transform: rotate(45deg) translate(-8px, -8px);
 }

     @media only screen and (max-width:600px) {
        .header  {
            width:100%;
         }
     }

 </style>
 <div class= "header">

 <h1>JJ's Contracting Services</h1>


 </div>
 <div class = "container" button onclick="myFunction(this)">   
     <div class = "bar1"> </div>                  
     <div class = "bar2"> </div>
     <div class = "bar3"> </div>  
 </div>  
 <script>
     function myFunction(x) {
        x.classList.toggle("change");             
     }    
 </script>

</html>

1 Ответ

0 голосов
/ 26 марта 2020

Как и в вашем коде, класс change сделает меню. Вы можете легко изменить класс в jquery следующим образом. 

<script>
    $(document).ready(function(){
        $('.container').click(function(){
            $('#menu').toggleClass('change')
         }
    })
</script>

Но для этой работы вы должны создать div с идентификатором #menu, чтобы jquery, и использовать его для переключения класса. 

<div class= "header">
    <h1>JJ's Contracting Services</h1>
</div>
<div class = "container" button onclick="myFunction(this)">
    <div class = "bar1"> </div>                  
    <div class = "bar2"> </div>
    <div class = "bar3"> </div>  
</div>
<div id="menu"></div>

Не используйте класс меню гамбургера (кнопка с 3 линиями) для переключения, поскольку он превращает кнопку в меню. Это не будет выглядеть красиво.

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

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

...