프레임 워크를 사용하지 않고 탐색 메뉴에 반응 형 "햄버거 아이콘"을 만드는 방법은 무엇입니까?

Question

나는 반응하는 웹 사이트가 나는 햄버거 아이콘을 표시하는 ☰를 사용하고 있지만 전화 브라우저와 UC 브라우저와 같은 일부 브라우저와 호환되지 않습니다, 그래서 나는, CSS를 HTML을 사용하여 반응 햄버거 아이콘을 만들고 싶어. 나는 내가 그것을 변경하려면, 내가 정적 너비와 높이를 사용하지 않도록이 반응 할 할 말했듯이

내가 미디어 쿼리를 사용하고, 화면의 크기에 따라 달라집니다. 그런 다음 각 <span>가 햄버거 아이콘 레이어 중 하나 만드는 데 사용됩니다

<div class='navigation-icon'> 
    <span></span> 
    <span></span> 
    <span></span> 
</div> 

:

는 다음과 같은 HTML을 사용하는 아이디어가있다.

Answer 1

음 ... CDN을 사용하려면 http://fontawesome.io/ 또는 https://cdnjs.com/libraries/font-awesome을 사용하는 것이 좋습니다.

이

공상 responsives 아이콘의 많은 도서관과 모든 브라우저에서 작동합니다.

Answer 2

봐 가지고하시기 바랍니다.

$(document).ready(function(){ 
 
\t $('#nav-icon1').click(function(){ 
 
\t \t $(this).toggleClass('open'); 
 
\t }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
/* Icon 1 */ 
 

 
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 { 
 
    width: 60px; 
 
    height: 45px; 
 
    position: relative; 
 
    margin: 50px auto; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition: .5s ease-in-out; 
 
    -moz-transition: .5s ease-in-out; 
 
    -o-transition: .5s ease-in-out; 
 
    transition: .5s ease-in-out; 
 
    cursor: pointer; 
 
} 
 

 
#nav-icon1 span, #nav-icon3 span, #nav-icon4 span { 
 
    display: block; 
 
    position: absolute; 
 
    height: 9px; 
 
    width: 100%; 
 
    background: #333; 
 
    border-radius: 9px; 
 
    opacity: 1; 
 
    left: 0; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition: .25s ease-in-out; 
 
    -moz-transition: .25s ease-in-out; 
 
    -o-transition: .25s ease-in-out; 
 
    transition: .25s ease-in-out; 
 
} 
 

 
#nav-icon1 span:nth-child(1) { 
 
    top: 0px; 
 
} 
 

 
#nav-icon1 span:nth-child(2) { 
 
    top: 18px; 
 
} 
 

 
#nav-icon1 span:nth-child(3) { 
 
    top: 36px; 
 
} 
 

 
#nav-icon1.open span:nth-child(1) { 
 
    top: 18px; 
 
    -webkit-transform: rotate(135deg); 
 
    -moz-transform: rotate(135deg); 
 
    -o-transform: rotate(135deg); 
 
    transform: rotate(135deg); 
 
} 
 

 
#nav-icon1.open span:nth-child(2) { 
 
    opacity: 0; 
 
    left: -60px; 
 
} 
 

 
#nav-icon1.open span:nth-child(3) { 
 
    top: 18px; 
 
    -webkit-transform: rotate(-135deg); 
 
    -moz-transform: rotate(-135deg); 
 
    -o-transform: rotate(-135deg); 
 
    transform: rotate(-135deg); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div id="nav-icon1"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div>

Answer 3

이처럼 반응하는 사각형 내부에 아이콘을 호스팅 할 수 있습니다 :

HTML :

<div class="square"> 
    <div class='navigation-icon'> 
     <span></span> 
     <span></span> 
     <span></span> 
    </div> 
</div> 

CSS :

.square 
{ 
    position: relative; 
    margin: auto; 
    width: 100%; <== This will determine the size of your square and therefore of the elements in it, as long as their size is specified in % as well. 
} 

.square:before 
{ 
    content: ""; 
    display: block; 
    padding-top: 100%; <== Leave this as is. 
} 

위의 CSS 코드는 중첩 된 모든 크기에 맞게 조정할 수있는 완벽한 사각형을 만들 것입니다. 정사각형 내부의 모든 위치는 절대 위치로 설정해야합니다. 또는 사각형이 사각형으로 변합니다.

Answer 4

.navigation-icon span { 
 
    display: block; 
 
    width: 25px; 
 
    height: 5px; 
 
    margin: 5px; 
 
    background-color: #000; 
 
}

<div class='navigation-icon'> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div>

Answer 5

이보십시오.

<div class=menu></div> 
<div class=menu></div> 
<div class=menu></div> 

.menu { 
width: 35px; 
height: 5px; 
background-color: black; 
margin: 6px 0; 
}