HTML, CSS 및 JavaScript로 모바일 메뉴 표시줄을 만드는 방법

의심할 여지 없이 TailWind 또는 BootStrap과 같은 CSS 프레임워크를 사용하여 전환 가능한 모바일 메뉴를 만들 수 있습니다.

그러나 그 뒤에 숨겨진 개념은 무엇입니까? 그리고 이러한 CSS 프레임워크에 의존하지 않고 어떻게 처음부터 만들 수 있습니까?

위의 작업을 직접 수행하면 완전한 사용자 정의 제어가 가능합니다. 따라서 더 이상 고민하지 않고 선호하는 프로그래밍 언어를 사용하여 전환 가능한 모바일 메뉴를 만드는 방법이 있습니다.

아직 하지 않았다면 프로젝트 폴더를 열고 프로젝트 파일(HTML, CSS 및 JavaScript)을 만듭니다.

아래에서 세 가지 유형 모두에 필요한 코드의 예를 볼 수 있습니다. 아직 다운로드하지 않았다면 다운로드를 고려하십시오. 코드를 배우기 위한 앱 계속 읽기 전에.

시작하겠습니다. HTML:

  
  
  
 Mobile Navigation Menu  
  
  
  
     
  
  
  
  
  
     
  
  Home   
  About   
  Contact

CSS:

/*This section demarcation is solely for the purpose of the tutorial*/  
 section{  
 width: 800px;  
 height: 600px;  
 margin-top: 50px;  
 margin-left: 250px;  
 border: solid black 1px;  
 background: #e6e3dc;  
 }  
  /*position the divs container in your DOM*/   
 #toggle-container{  
 display: grid;  
 width: fit-content;  
 margin-left: 720px;  
 margin-top: 10px;  
 }  
  /*Stack the three divs above each other. Then set a height and width for them.*/   
 #one, #two, #three{  
 background: black;  
 width: 30px;  
 height: 3px;  
 margin-top: 5px;  
 }  
 .toggle-content{  
 display: none;  
 margin-left: 700px;  
 margin-top: 20px;  
 }  
 .toggle-content a{  
 display: block;  
 text-decoration: none;  
 color: black;  
 font-size: 30px;  
 }  
 .toggle-content a:hover{  
 color: blue;  
 }  
  /*Display the class instance created by JavaScript in block*/   
 .displayed{  
 display: block;  
 }

자바스크립트 추가:

틴더 안전한 데이트 사기입니다

var toggler = document.getElementById('toggle-container');  
var toggleContents = document.getElementById('toggle-content');  
document.addEventListener('click', function(){  
  //Apply a class intance to each navigation and set display to toggle:   
 toggleContents.classList.toggle('displayed');  
});

메뉴 표시줄을 클릭할 때 작동하는 출력은 다음과 같습니다.

메뉴를 전환할 수 있으므로 막대를 다시 클릭하거나 페이지 내의 아무 곳이나 클릭하면 탐색이 숨겨집니다.

관련된: CSS 배경 그라데이션으로 웹 사이트 요소 스타일 지정

브라우저는 웹페이지의 아무 곳이나 클릭할 때 콘텐츠 숨기기를 지원하지 않을 수 있습니다. 이벤트 대상 및 JavaScript 루프를 사용하여 이를 강제로 시도할 수 있습니다. JavaScript에 다음 코드 블록을 추가하면 됩니다.

  //Add a click event to your webpage:   
window.onclick = function(event) {  
  //Target the click event on the menu bar to allow the webpage body to track it:   
 if (!event.target.matches('#toggle-container')) {  
 var dropdowns = document.getElementsByClassName('toggle-content');  
  //Hide the navigations by looping through each of them:   
 for (var i = 0; i  var dropped = dropdowns[i];  
 if (dropped.classList.contains('display')) {  
 dropped.classList.remove('display');  
 }  
 }  
 }  
}

여기 방금 수행한 작업에 대한 요약이 있습니다. 다음을 사용하여 세 줄을 만들었습니다. div HTML 태그. 높이와 너비를 조정하고 DOM에 배치했습니다. 그런 다음 JavaScript를 사용하여 클릭 이벤트를 제공했습니다.

관련된: 웹사이트를 만드는 방법: 초보자용

탐색의 초기 표시를 다음으로 설정합니다. 없음 페이지가 로드될 때 숨깁니다. 그런 다음 딸깍 하는 소리 세 줄의 이벤트는 JavaScript 인스턴스화 클래스( 표시 ). 마지막으로 이 새 클래스를 사용하여 CSS 및 JavaScript를 사용하여 탐색을 표시했습니다. 토글내용 방법.

관련: HTML, CSS 및 JavaScript의 뉴모픽 디자인 트렌드

그러나 나머지 CSS는 선호도에 따라 다릅니다. 그러나 여기에 있는 예제 CSS 스니펫에 있는 것은 스타일을 지정하는 방법에 대한 아이디어를 제공해야 합니다.

웹사이트를 구축할 때 더 창의적으로 만드세요

시각적으로 매력적인 웹사이트를 만들려면 약간의 창의성이 필요합니다. 그리고 사용자 친화적인 웹사이트는 순진한 웹사이트보다 청중을 전환할 가능성이 더 큽니다.

여기에서 사용자 정의 탐색 메뉴를 만드는 방법을 보여 주었지만 여전히 이 이상으로 더 매력적으로 만들 수 있습니다. 예를 들어 탐색 표시에 애니메이션을 적용하고 배경색을 지정하는 등의 작업을 수행할 수 있습니다. 그리고 무엇을 하든지 웹사이트가 사용자가 사용하기 쉬운 최상의 디자인 방법과 레이아웃을 사용하는지 확인하십시오.

공유하다 공유하다 트위터 이메일 알아야 할 Windows 명령 프롬프트(CMD) 명령 15가지

명령 프롬프트는 여전히 강력한 Windows 도구입니다. 다음은 모든 Windows 사용자가 알아야 할 가장 유용한 CMD 명령입니다.

다음 읽기 관련 항목

프로그램 작성
HTML
CSS
자바스크립트
코딩 팁

저자 소개 이디소 오미솔라(94건의 기사 게재)

Idowu는 스마트 기술과 생산성에 대한 열정을 가지고 있습니다. 여가 시간에는 코딩을 하거나 지루할 때 체스판으로 전환하지만 가끔씩 일상에서 벗어나는 것도 좋아합니다. 사람들에게 현대 기술에 대한 방법을 보여주고자 하는 그의 열정은 그가 더 많은 글을 쓰도록 동기를 부여합니다.

Idowu Omisola가 참여한 작품 더보기

뉴스레터 구독

기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!

구독하려면 여기를 클릭하세요.