"버거"스타일 메뉴 막대 길이

Question

"버거 메뉴"를 만드는 데 문제가 있습니다. 어떻게 수정해야하는지 잘 모르겠습니다. (브라우저의 크기를 조정)이 사이트 비슷한 효과를 얻기 위해 노력

: http://www.sebastianbailey.co.uk/

막대 클릭 할 때,이 X로 켜졌지만 막대가 너무 짧은 이상한 찾고 X.

를 만드는

볼 수 codepen에 내가 넣어 가지고 : http://codepen.io/sparcut/pen/xVyZNQ

이을 시도하고 효과를 achive 제가 현재 에 일을하고있다. 올바른 방향으로 날 밀어 @ali-sheikhpour에

.mobile-open .nav-mobile { 
    .mid { 
     display: none; 
    } 
    .top { 
     margin-top: 15px; 
     margin-bottom: 0 !important; 
     transform: rotate(45deg); 
    } 
    .bot { 
     margin-top: 0 !important; 
     transform: rotate(-45deg); 
    } 
} 

---

편집

감사합니다. 아직까지는 멍청한 것 같습니다. Codepen이 폭의 비율로

Answer 1

업데이트 및 메뉴의 높이가 링크 된 샘플과 동일하지 않습니다, 당신은 정상에서 섬세 막대를 이동해야하고뿐만 아니라 (대칭 효과를 달성하기 위해 왼쪽 회전). 내 선택에 따라 마진을 업데이트했지만 십자가가 형성되기를 바라는 적절한 위치를 설정하기 위해 변경할 수는 있습니다.

스 니펫을 실행하십시오 :, 업데이트

$(window).on("load", function() { 
 
\t $("#preload").fadeOut("fast"); 
 
}); 
 

 
$(document).ready(function() { 
 
\t $(".nav-mobile").click(function() { 
 
\t \t $(".nav-container").toggleClass("mobile-open"); 
 
\t }); 
 
});

html, 
 
body { 
 
    font-family: "Montserrat", Arial, sans-serif; 
 
    margin: 0; 
 
    height: 100vh; 
 
    width: 100%; 
 
    color: #ECF0F1; 
 
    overflow-x: hidden; 
 
} 
 

 
a { 
 
    color: inherit; 
 
} 
 

 
@media (max-width: 9999px) { 
 
    .mobile-open .links { 
 
    top: 55px !important; 
 
    } 
 
    .mobile-open .nav-mobile .mid { 
 
    display: none; 
 
    } 
 
    .mobile-open .nav-mobile .top { 
 
    margin-top: 13px; 
 
    margin-bottom:0 !important 
 
    -webkit-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
    } 
 
    .mobile-open .nav-mobile .bot { 
 
    margin-top: -13px !important; 
 
    -webkit-transform: rotate(-45deg); 
 
      transform: rotate(-45deg); 
 
    } 
 

 
    .nav-mobile { 
 
    display: inline-block; 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    clear: both; 
 
    right: 25px; 
 
    top: 20px; 
 
    cursor: pointer; 
 
    } 
 
    .nav-mobile .nav-line { 
 
    width: 50px; 
 
    height: 5px; 
 
    clear: both; 
 
    background: #ECF0F1; 
 
    border-radius: 5px; 
 
    } 
 
    .nav-mobile .top { 
 
    margin-bottom: 9px; 
 
    -webkit-transition: 0.2s ease-in-out; 
 
    transition: 0.2s ease-in-out; 
 
    } 
 
    .nav-mobile .mid { 
 
    -webkit-transition: 0.2s ease-in-out; 
 
    transition: 0.2s ease-in-out; 
 
    } 
 
    .nav-mobile .bot { 
 
    margin-top: 9px; 
 
    -webkit-transition: 0.2s ease-in-out; 
 
    transition: 0.2s ease-in-out; 
 
    } 
 

 
    .nav-container { 
 
    width: 100%; 
 
    } 
 

 
    .nav { 
 
    background: #2C3E50; 
 
    height: 75px; 
 
    } 
 
    .nav .title-wrap { 
 
    display: inline-block; 
 
    background-image: -webkit-linear-gradient(top, #2C3E50 50%, #ECF0F1 50%); 
 
    background-image: linear-gradient(to bottom, #2C3E50 50%, #ECF0F1 50%); 
 
    background-size: 100% 200%; 
 
    -webkit-transform: skew(0deg); 
 
      transform: skew(0deg); 
 
    float: none; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-left: 30px; 
 
    padding-right: 15px; 
 
    position: relative; 
 
    left: 0; 
 
    cursor: pointer; 
 
    -webkit-transition: 0.2s ease-in-out; 
 
    transition: 0.2s ease-in-out; 
 
    } 
 
    .nav .title-wrap a { 
 
    font-size: 45px; 
 
    padding: 0; 
 
    color: #ECF0F1; 
 
    display: inline-block; 
 
    height: 100%; 
 
    -webkit-transform: skew(0deg); 
 
      transform: skew(0deg); 
 
    text-decoration: none; 
 
    -webkit-transition: 0.2s ease-in-out; 
 
    transition: 0.2s ease-in-out; 
 
    } 
 
    .nav .title-wrap:hover { 
 
    background-position: 0 -100%; 
 
    } 
 
    .nav .title-wrap:hover a { 
 
    color: #2C3E50; 
 
    } 
 
    .nav .links { 
 
    display: block; 
 
    top: -250px; 
 
    right: 0; 
 
    position: absolute; 
 
    -webkit-transition: 0.2s ease-in-out; 
 
    transition: 0.2s ease-in-out; 
 
    z-index: -1; 
 
    } 
 
    .nav .links li { 
 
    display: block; 
 
    list-style: none; 
 
    float: none; 
 
    position: relative; 
 
    left: 0 !important; 
 
    } 
 
    .nav .links li:hover a { 
 
    background-position: 0 -100%; 
 
    } 
 
    .nav .links li .current-page { 
 
    background-image: -webkit-linear-gradient(top, #C0392B 50%, #E74C3C 50%) !important; 
 
    background-image: linear-gradient(to bottom, #C0392B 50%, #E74C3C 50%) !important; 
 
    } 
 
    .nav .links li .home-nav { 
 
    background-image: -webkit-linear-gradient(top, #2C3E50 50%, #C0392B 50%); 
 
    background-image: linear-gradient(to bottom, #2C3E50 50%, #C0392B 50%); 
 
    } 
 
    .nav .links li .projects-nav { 
 
    background-image: -webkit-linear-gradient(top, #2C3E50 50%, #2980B9 50%); 
 
    background-image: linear-gradient(to bottom, #2C3E50 50%, #2980B9 50%); 
 
    } 
 
    .nav .links li .about-nav { 
 
    background-image: -webkit-linear-gradient(top, #2C3E50 50%, #F39C12 50%); 
 
    background-image: linear-gradient(to bottom, #2C3E50 50%, #F39C12 50%); 
 
    } 
 
    .nav .links li .asp-nav { 
 
    background-image: -webkit-linear-gradient(top, #2C3E50 50%, #8E44AD 50%); 
 
    background-image: linear-gradient(to bottom, #2C3E50 50%, #8E44AD 50%); 
 
    } 
 
    .nav .links li .contact-nav { 
 
    background-image: -webkit-linear-gradient(top, #2C3E50 50%, #27AE60 50%); 
 
    background-image: linear-gradient(to bottom, #2C3E50 50%, #27AE60 50%); 
 
    } 
 
    .nav .links li a { 
 
    text-decoration: none; 
 
    color: #ECF0F1; 
 
    display: inline-block; 
 
    -webkit-transform: skew(0deg); 
 
      transform: skew(0deg); 
 
    background-size: 100% 200%; 
 
    padding: 10px 20px 10px 20px; 
 
    font-size: 25px; 
 
    -webkit-transition: 0.2s ease-in-out; 
 
    transition: 0.2s ease-in-out; 
 
    width: 100%; 
 
    } 
 
    .nav .links li a span { 
 
    display: inline-block; 
 
    -webkit-transform: skew(0deg); 
 
      transform: skew(0deg); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width:500px;position:relative;"> 
 
<div class="nav-container"> 
 
\t <div class="nav"> 
 
\t \t <div class="title-wrap"> 
 
\t \t \t <a href="/">My Website</a> 
 
\t \t </div> 
 
\t \t <div class="nav-mobile"> 
 
\t \t \t <div class="nav-line top"></div> 
 
\t \t \t <div class="nav-line mid"></div> 
 
\t \t \t <div class="nav-line bot"></div> 
 
\t \t </div> 
 
\t \t <ul class="links"> 
 
\t \t \t <li style="left: -2.5%;" class="nav-li"><a href="/" class="current-page home-nav"><span>home</span></a></li> 
 
\t \t \t <li style="left: -2.6%;" class="nav-li"><a href="/projects" class="projects-nav"><span>projects</span></a></li> 
 
\t \t \t <li style="left: -2.7%;" class="nav-li"><a href="/about" class="about-nav"><span>about</span></a></li> 
 
\t \t \t <li style="left: -2.8%" class="nav-li"><a href="/aspirations" class="asp-nav"><span>aspirations</span></a></li> 
 
\t \t \t <li style="left: -2.9%;" class="nav-li"><a href="/contact" class="contact-nav"><span>contact</span></a></li> 
 
\t \t </ul> 
 
\t </div> 
 
</div> 
 
                          </div>