내비게이션 응답 문제

내 탐색 바에 문제가 있습니다. 내 목표는 일반적인 수평 navbar 바탕 화면에 다음 접을 navbar 모바일, 나는 가지고 있지만 1 가지 잘못입니다. 링크를 숨기고 토글 버튼을 클릭하면 어떤 도움을 줄 수 있습니까?내비게이션 응답 문제

Codepen : http://codepen.io/anon/pen/RRGvYV

HTML :

<div class="navigation-group"> 
     <div class="container"> 
     <div class="navigation-top">  
     <a class="nav-name">Architect</a> 
     <button class="nav-toggle" id="nav-toggle">A</button> 
     </div>  
      <nav role="navigation" class="collapase navigation-bar"> 
       <ul class="nav"> 
        <li><a href="#">Examples</a></li> 
        <li><a href="#">Download</a></li> 
        <li><a href="#">FAQ</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
       <ul class="nav nav-right"> 
        <li><a href="#">Extra</a></li> 
        <li><a href="#">Extra</a></li> 
       </ul> 
      </nav> 
     </div> 
    </div>

CSS (SASS) :

@media (min-width : 768px) 
    .navigation-bar 
     list-style-type: none 

     ul 
      float: left 

     li 
      float: left 

     &:before, &:after 
      display: table 
      content: "" 
    .nav-right 
     float: right !important 
    .navigation-top 
     width: auto !important 
     padding: 5px 20px 
     float: left 
     line-height: 40px 
    .nav-toggle 
     display: none !important 

.open 
    display: block!important 

.collapase 
    display: none 

.navigation-top 
    width: 100% 
    padding: 5px 20px 
    float: left 
    line-height: 40px 
    border-bottom: solid 1px #E5E5E5 
.nav-name 
    font-weight: bold 
    float: left 
.navigation-group 
    min-height: 50px 
    background-color: #fff 
    &:before, &:after 
     display: table 
     content: ""  


.navigation-bar 

    li 
     position: relative 
     display: block 
     line-height: 40px 

    a 
     display: block 
     color: #000 
     text-align: center 
     padding: 5px 20px 
     font-weight: bold 
     text-decoration: none  

    &:before, &:after 
     display: table 
     content: "" 

.navigation-name 
    float: left 
    padding: 10px 20px 
    font-size: 18px 
    text-decoration: none 
    font-weight: bold 
    color: red 

.nav-toggle 
    display: block 
    font-size: 34px 
    font-weight: bold 
    position: relative 
    float: right 
    padding: 6px 12px 
    margin-top: 0px 
    margin-right: 15px 
    margin-bottom: 0px 
    background-color: transparent 
    background-image: none 
    border: 1px solid transparent 
    border-radius: 4px 
    cursor: pointer 
    outline: none

jQuery를 :

$("#nav-toggle").click(function(){ 
    $(".navigation-bar").toggle(); 
    });

임 부트 스트랩 같은 시스템을 찾고.

출처

2016-06-20 Zoid

당신이 jQuery를 포함 잊어 버린 적이 있습니까? 그것은 codepen에 존재하지 않습니다. 그 외에도 일관성과 개요를 위해';'와 대괄호를 사용하는 것을 고려해야합니다. 그리고 Bootstrap ..을 사용하지 않는 이유는 무엇입니까? –

-1

내가 업데이트 한 것은 귀하의 코드 종이에서 jquery를 사용하는 것입니다. 그게 모두 당신에게 도움이되는 희망입니다. codepen : http://codepen.io/anon/pen/BzLMgx을 참조하십시오. 게다가 대괄호와 CSS 구문을 추가해야합니다. 외부 https://code.jquery.com/jquery-2.2.4.min.js 코드가 추가되었습니다. 또한 나는 버튼 (20)에 z-index 편집 한, 그것은

출처

2016-06-20 20:31:56

아무것도 변경되지 않았습니까? – Zoid

죄송합니다. 코드 en을 업데이트했으며 이제 'A'버튼을 클릭 이벤트로 사용했습니다. –

도움이 되었습니까? –

이 codepen에 jquery.min.js 추가 드롭 다운 (예 링크)에서 첫 번째 링크의 계층에서 사용.
사용 $("nav.navigation-bar").toggleClass("open");
대신 메뉴가 확장 $(".navigation-bar").toggle();
, 그것은 토글 버튼을 다룹니다. 이 때문에 버튼에 액세스 할 수 없게됩니다. .nav-toggle 클래스에 z-index: 20; 속성을 추가하여 문제를 해결할 수 있습니다.

확인 결과 : http://codepen.io/glebkema/pen/BzLbve

출처

2016-06-20 21:56:06

내비게이션 응답 문제

답변

관련 문제