전환 모바일 탐색 및 ADRESS 데이터

Question

섭들, 잠시 동안

지금 나는이 jQuery를 작동하도록 얻을 시도하고있다,하지만 난 어떻게 달성하기 위해 아무 생각이 없습니다. 기본 웹 사이트의 모바일 탐색에 대한 것입니다. 기본적으로 주소 데이터가있는 3 개의 점과 다른 점을 클릭하면 모바일 탐색이 종료된다는 것을 알기 위해 노력하고 있습니다. 다음 예에서 확인할 수 있습니다.

https://www.templatemonster.com/de/demo/62436.html 모바일 버전을 선택하면 의미를 알 수 있습니다.

누구나 jQuery 또는 javascript로이를 수행하는 방법을 알고 있습니까?

Adress Data 

$('.js--adress-icon').click(function() { 
     var kont = $('.js--adress-nav'); 

     kont.slideToggle(200); 
}); 

Mobile Navigation 

var hamburger = $('#hamburger-icon'); 

hamburger.click(function() { 
     var nav = $('.js--main-nav'); 
     nav.slideToggle(200); 
     hamburger.toggleClass('active'); 
     return false; 
}); 

if ($(window).width() < 768){ 
     $('.main-navigation li a').on('click', function(){ 
      $('.js--main-nav').hide(); 
      $('#hamburger-icon').removeClass('active'); 
     }); 
}; 

들으을 사전에 : 여기 내가 현재 가지고있는 것입니다!

Answer 1

나는 당신의 HTML이 어떻게 생겼는지 모르는 그러나 이것은이 사용하는 CSS와 자바 스크립트

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 

<nav class="menu"> 
    <ul class="active"> 
    <li class="current-item"><a href="#">Home</a></li> 
    <li><a href="#">Menu1</a></li> 
    <li><a href="#">Menu2</a></li> 
    </ul> 

    <a class="toggle-nav" href="#">&#8285;</a> 
</nav> 
</body> 

다음 자바 스크립트

jQuery(document).ready(function() { 
    jQuery('.toggle-nav').click(function(e) { 
     jQuery(this).toggleClass('active'); 
     jQuery('.menu ul').toggleClass('active'); 

     e.preventDefault(); 
    }); 
    }); 

을 달성하는 간단한 방법입니다

그 다음에 귀하의 CSS

/*----- Toggle Button -----*/ 

    /*----- Menu -----*/ 
    @media screen and (min-width: 860px) { 
    .menu { 
     width:100%; 
     padding:10px 18px; 
     box-shadow:0px 1px 1px rgba(0,0,0,0.15); 
     border-radius:3px; 
     background:#303030; 
    } 
    } 

    .menu ul { 
    display:inline-block; 
    } 

    .menu li { 
    margin:0px 50px 0px 0px; 
    float:left; 
    list-style:none; 
    font-size:17px; 
    } 

    .menu li:last-child { 
    margin-right:0px; 
    } 

    .menu a { 
    text-shadow:0px 1px 0px rgba(0,0,0,0.5); 
    color:#777; 
    transition:color linear 0.15s; 
    } 

    .menu a:hover, .menu .current-item a { 
    text-decoration:none; 
    color:#66a992; 
    } 
    /*----- Responsive -----*/ 
    @media screen and (max-width: 1150px) { 
    .wrap { 
     width:90%; 
    } 
    } 

    @media screen and (max-width: 970px) { 
    .search-form input { 
     width:120px; 
    } 
    } 

    @media screen and (max-width: 860px) { 
    .menu { 
     position:relative; 
     display:inline-block; 
    } 

    .menu ul.active { 
     display:none; 
    } 

    .menu ul { 
     width:100%; 
     position:absolute; 
     top:120%; 
     left:0px; 
     padding:10px 18px; 
     box-shadow:0px 1px 1px rgba(0,0,0,0.15); 
     border-radius:3px; 
     background:#303030; 
    } 

    .menu ul:after { 
     width:0px; 
     height:0px; 
     position:absolute; 
     top:0%; 
     left:22px; 
     content:''; 
     transform:translate(0%, -100%); 
     border-left:7px solid transparent; 
     border-right:7px solid transparent; 
     border-bottom:7px solid #303030; 
    } 

    .menu li { 
     margin:5px 0px 5px 0px; 
     float:none; 
     display:block; 
    } 

    .menu a { 
     display:block; 
    } 

    .toggle-nav { 
     padding:20px; 
     float:left; 
     color:#777; 
     font-size:20px; 
    } 

    .toggle-nav:hover, .toggle-nav.active { 
     text-decoration:none; 
     color:#66a992; 
    } 

}

확인이 바이올린 :