วิธีสร้างแถบเมนูมือถือด้วย HTML, CSS และ JavaScript

ไม่ต้องสงสัย คุณสามารถสร้างเมนูมือถือที่สลับได้โดยใช้เฟรมเวิร์ก CSS เช่น TailWind หรือ BootStrap

แต่แนวคิดเบื้องหลังคืออะไร? และคุณจะสร้างมันขึ้นมาใหม่ได้อย่างไรโดยไม่ต้องพึ่งเฟรมเวิร์ก CSS เหล่านี้

การทำสิ่งข้างต้นด้วยตัวคุณเองจะทำให้คุณสามารถควบคุมการปรับแต่งได้อย่างเต็มที่ ดังนั้น เพื่อไม่ให้เป็นการเสียเวลา ต่อไปนี้คือวิธีสร้างเมนูมือถือที่สลับได้โดยใช้ภาษาโปรแกรมที่คุณต้องการ

หากคุณยังไม่ได้ดำเนินการดังกล่าว ให้เปิดโฟลเดอร์โครงการและสร้างไฟล์โครงการ (HTML, CSS และ JavaScript)

ด้านล่างนี้ คุณจะเห็นตัวอย่างโค้ดที่คุณต้องการสำหรับทั้งสามประเภท และถ้าคุณยังไม่ได้ดาวน์โหลด ให้ลองดาวน์โหลด แอพเหล่านี้เพื่อเรียนรู้รหัส ก่อนจะอ่านต่อ

เรามาเริ่มกันที่ HTML:

  
  
  
 Mobile Navigation Menu  
  
  
  
     
  
  
  
  
  
     
  
  Home   
  About   
  Contact

ซีเอสเอส:

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

เพิ่มจาวาสคริปต์:

วิธีสร้างรายการแจกจ่ายใน outlook

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's toggleContents กระบวนการ.

ที่เกี่ยวข้อง: แนวโน้มการออกแบบ Neumorphic ใน HTML, CSS และ JavaScript

อย่างไรก็ตาม CSS ที่เหลือขึ้นอยู่กับความชอบของคุณ แต่หนึ่งในตัวอย่างข้อมูล CSS ที่นี่ควรให้แนวคิดเกี่ยวกับวิธีจัดสไตล์ของคุณ

สร้างสรรค์มากขึ้นเมื่อสร้างเว็บไซต์ของคุณ

การสร้างเว็บไซต์ที่ดึงดูดสายตาต้องใช้ความคิดสร้างสรรค์ และเว็บไซต์ที่ใช้งานง่ายมีแนวโน้มที่จะเปลี่ยนผู้ชมของคุณมากกว่าเว็บไซต์ที่ไม่สุภาพ

แม้ว่าเราได้แสดงวิธีสร้างเมนูการนำทางที่กำหนดเองให้คุณแล้ว แต่คุณยังคงสามารถดำเนินการเพิ่มเติมและทำให้น่าสนใจยิ่งขึ้น ตัวอย่างเช่น คุณสามารถทำให้การแสดงการนำทางเคลื่อนไหว กำหนดสีพื้นหลัง และอื่นๆ ได้ และไม่ว่าคุณจะทำอะไรก็ตาม ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณใช้แนวปฏิบัติด้านการออกแบบและเลย์เอาต์ที่ดีที่สุดที่ใช้งานง่ายสำหรับผู้ใช้

แบ่งปัน แบ่งปัน ทวีต อีเมล 15 Windows Command Prompt (CMD) คำสั่งที่คุณต้องรู้

พรอมต์คำสั่งยังคงเป็นเครื่องมือ Windows ที่มีประสิทธิภาพ ต่อไปนี้คือคำสั่ง CMD ที่มีประโยชน์ที่สุดที่ผู้ใช้ Windows ทุกคนจำเป็นต้องรู้

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

การเขียนโปรแกรม
HTML
CSS
JavaScript
เคล็ดลับการเข้ารหัส

เกี่ยวกับผู้เขียน อิดิโซ โอมิโซลา(94 บทความที่ตีพิมพ์)

Idowu หลงใหลเกี่ยวกับเทคโนโลยีอัจฉริยะและประสิทธิภาพการทำงานทุกอย่าง ในเวลาว่าง เขาเล่นไปรอบๆ กับการเขียนโค้ดและเปลี่ยนไปเล่นกระดานหมากรุกเมื่อรู้สึกเบื่อ แต่เขาก็ชอบที่จะแยกตัวออกจากงานประจำบ้างเป็นบางครั้ง ความหลงใหลในการแสดงให้ผู้คนได้รู้จักเทคโนโลยีสมัยใหม่กระตุ้นให้เขาเขียนมากขึ้น

เพิ่มเติมจาก Idowu Omisola

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก

วิธีสร้างเมนูมือถือที่สลับได้ของคุณ

สร้างสรรค์มากขึ้นเมื่อสร้างเว็บไซต์ของคุณ

สมัครรับจดหมายข่าวของเรา