切り替えモバイルナビゲーションや住所データ

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'); 
     }); 
}; 

Thxを！

Answer 1

私はあなたのHTMLはどのようなものか知らないが、これは、この使用してCSSやJavaScript

<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> 

その後、あなたのjavascript

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

}

チェックこのフィドル：https://jsfiddle.net/wggs8pf8/