ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

วิธีทำเมนู Drop Down ที่รองรับการใช้งานบนมือถือ

 

          การทำเมนู Drop Down ที่รองรับการใช้งานบนอุปกรณ์มือถือเป็นการทำโดยใช้ Bootstrap หรือที่เรียกกันว่าเป็นเมนูแฮมเบอร์เกอร์เพราะเมนูจะมีลักษณะเป็นขีด 3 ขีดที่ซ้อนกันเหมือนกับเบอร์เกอร์โดยมีวิธีการสร้างดังนี้

สามารถดาวโหลดไฟล์ไปก็จะได้ไฟล์ที่เป็น css ไฟล์ JavaScript และไฟล์ที่เป็นตัวเมนูไปด้วย 

หัวเรื่อง
js dropdown
หมวดหมู่
Javascript, Javascript
ฮิต
4700
ผู้สร้างเอกสาร
ae
วันที่สร้างเอกสาร
2018-07-04 20:09:16

dropdown.zip

ประเภทไฟล์ zip

ขนาดไฟล์ 91.11 KB

ผู้อัพโหลดไฟล์ ae

วันที่อัพโหลด 2018-07-04 13:08:20


 

วิธีการสร้างเมนู Drop Down ดังนี้

  1. เพิ่มโค้ด css ลงในแท็ก <head>
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>​
  2. เพิ่มโค้ด JavaScript และ jQuery ลงในแท็ก <head> 
    <script src="/js/jquery-3.3.1.slim.min.js" type="text/javascript"></script>
    <script src="/js/popper.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>​
  3. จากนั้นเพิ่มโค้ดเมนูเข้าไปในแท็ก <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    	<a class="navbar-brand" href="/index.php">
    		<img src="/img/red-chief.jpg" alt="" width="40px"/>
    	</a>
    	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    		<span class="navbar-toggler-icon"></span>
    	</button>
    	<div class="collapse navbar-collapse" id="navbarNav">
    		<ul class="navbar-nav">
    			<li class="nav-item active">
    				<a class="nav-link" href="/index.php">Home <span class="sr-only">(current)</span></a>
    			</li>
    			<li class="nav-item">
    				<a class="nav-link" href="#">Features</a>
    			</li>
    			<li class="nav-item">
    				<a class="nav-link" href="#">Pricing</a>
    			</li>
    			<li class="nav-item">
    				<a class="nav-link disabled" href="#">Disabled</a>
    			</li>
    		</ul>
    	</div>
    </nav>​
  4. ผลลัพธ์ที่ได้ ดังรูป
    การทำเมนู Drop Down ที่รองรับอุปกรณ์มือถือ
    เมนูตอนที่อยู่บนเบราเวอร์ของเครื่องพีซี
การทำเมนู Drop Down ที่รองรับอุปกรณ์มือถือ
เมนูตอนที่อยู่บนอุปกรณ์มือถือ

 

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

 

 

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML css bootstrap

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Plugin Content MChangeLog ใน Joomla เป็นตัวช่วยให้ เพิ่มเนื้อหาที่มีการเปลี่ยนแปลงแบบ เพิ่มเนื้อหา อัพเดต fix ปัญหา
โดย prmindphp พฤ 12 ธ.ค. 2019 6:46 pm บอร์ด MindPHP News & Feedback
0
198
พฤ 12 ธ.ค. 2019 6:46 pm โดย prmindphp
วิธีการเขียน SQL สำหรับเปลี่ยน Collation เพื่อปรับเปลี่ยนการรองรับภาษา ใน ตารางฐานข้อมูล
โดย Ittichai_chupol พฤ 12 ธ.ค. 2019 4:17 pm บอร์ด SQL Knowledge
0
136
พฤ 12 ธ.ค. 2019 4:17 pm โดย Ittichai_chupol
สอบถามการใช้ Python
โดย Anonymous พฤ 12 ธ.ค. 2019 11:51 am บอร์ด Programming - C/C++ & java & Python
1
295
อ 17 ธ.ค. 2019 6:39 pm โดย mindphp
Funny today ไปไหน???
โดย chatee supasand พฤ 12 ธ.ค. 2019 11:44 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
168
พฤ 12 ธ.ค. 2019 11:44 am โดย chatee supasand
วิธีการนำข้อมูลคำอธิบายภาพออก ในโพสต์ของ php
โดย Ittichai_chupol พ 11 ธ.ค. 2019 7:03 pm บอร์ด PHP Knowledge
1
141
พฤ 12 ธ.ค. 2019 10:59 am โดย Sirayu
โปรแกรมคำนวณเพซ
โดย prmindphp พ 11 ธ.ค. 2019 6:50 pm บอร์ด MindPHP News & Feedback
0
176
พ 11 ธ.ค. 2019 6:50 pm โดย prmindphp
ArrayList Java กับการหาค่าที่มากที่สุดแล้วลบออก
โดย Grammanano พ 11 ธ.ค. 2019 6:38 pm บอร์ด Share Knowledge
0
122
พ 11 ธ.ค. 2019 6:38 pm โดย Grammanano
การเขียน switch case ในภาษา C
โดย Grammanano พ 11 ธ.ค. 2019 5:52 pm บอร์ด Share Knowledge
0
122
พ 11 ธ.ค. 2019 5:52 pm โดย Grammanano
การลบข้อมูลจาก ArrayList ภาษา Java
โดย Grammanano พ 11 ธ.ค. 2019 5:32 pm บอร์ด Share Knowledge
0
125
พ 11 ธ.ค. 2019 5:32 pm โดย Grammanano
วิธีแปลงไฟล์ PDF เป็นไฟล์ Word ทางเว็ปไซต์
โดย noppadonsk พ 11 ธ.ค. 2019 4:24 pm บอร์ด Share Knowledge
0
137
พ 11 ธ.ค. 2019 4:24 pm โดย noppadonsk
วิธีใช้ text shortcut ใน Google Docs สร้างคำที่พิมพ์บ่อยให้พิมพ์ได้เร็วขึ้น
โดย noppadonsk พ 11 ธ.ค. 2019 4:02 pm บอร์ด Share Knowledge
0
109
พ 11 ธ.ค. 2019 4:02 pm โดย noppadonsk
รู้รึยัง Google Search ค้นหาเนื้อหาในวีดีโอได้แล้ว
โดย noppadonsk พ 11 ธ.ค. 2019 3:47 pm บอร์ด Share Knowledge
0
112
พ 11 ธ.ค. 2019 3:47 pm โดย noppadonsk
10 อันดับรถยนต์วินเทจ ที่ใครเห็นก็ต้องมอง
โดย Meygrand พ 11 ธ.ค. 2019 3:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
134
พ 11 ธ.ค. 2019 3:04 pm โดย Meygrand
อยากทราบวิธีการ override ไฟล์ bookmark มาใช้งานใน Extension ของ phpbb
โดย Ittichai_chupol พ 11 ธ.ค. 2019 11:00 am บอร์ด Programming - PHP
0
98
พ 11 ธ.ค. 2019 11:00 am โดย Ittichai_chupol
การดึงข้อมูลใน ArrayList ภาษา Java
โดย Grammanano จ 09 ธ.ค. 2019 7:42 pm บอร์ด Share Knowledge
0
108
จ 09 ธ.ค. 2019 7:42 pm โดย Grammanano
การเพิ่มข้อมูลใน ArrayList ภาษา Java
โดย Grammanano จ 09 ธ.ค. 2019 6:19 pm บอร์ด Share Knowledge
0
108
จ 09 ธ.ค. 2019 6:19 pm โดย Grammanano
การทำงานแบบ Multitasking เหมาะกับใคร - การทำหลาย ๆ อย่างพร้อมกัน
โดย noppadonsk จ 09 ธ.ค. 2019 6:06 pm บอร์ด Share Knowledge
0
118
จ 09 ธ.ค. 2019 6:06 pm โดย noppadonsk
บทเรียนสำหรับนักออกแบบมือใหม่
โดย noppadonsk จ 09 ธ.ค. 2019 5:48 pm บอร์ด Share Knowledge
0
128
จ 09 ธ.ค. 2019 5:48 pm โดย noppadonsk
มาดูเทรนด์สีมาแรง ในปี 2020
โดย noppadonsk จ 09 ธ.ค. 2019 5:18 pm บอร์ด Graphic design
1
111
ศ 20 ธ.ค. 2019 2:43 pm โดย LEG
วิธีการปรับแก้ไขลิ้งค์จากหัวข้อ ให้ไปยังตำแหน่งโพสต์ ที่ยังไม่มีการอ่าน ใน phpbb
โดย Ittichai_chupol จ 09 ธ.ค. 2019 5:16 pm บอร์ด PHP Knowledge
0
74
จ 09 ธ.ค. 2019 5:16 pm โดย Ittichai_chupol