ให้เรตสมาชิก: 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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ตำแหน่งไฟล์ ที่เก็บ my.cnf ไฟล์ ตั้งค่าระบบของ MySQL เวอร์ชั่นต่างๆ และ ติดตั้งบน OS ต่างๆ
โดย mindphp พ 01 ม.ค. 2020 1:24 pm บอร์ด Linux - Web Server
0
25
พ 01 ม.ค. 2020 1:24 pm โดย mindphp
เปิดใช้งาน log_slow_queries MySQL 5.7 บน Ubuntu
โดย mindphp อ 31 ธ.ค. 2019 5:55 pm บอร์ด Linux - Web Server
0
730
อ 31 ธ.ค. 2019 5:55 pm โดย mindphp
อยากทราบวิธีการแสดงที่มี id ซ้ำกันครับ
โดย jamepiyawat ส 28 ธ.ค. 2019 4:22 pm บอร์ด Programming - PHP
3
82
พฤ 02 ม.ค. 2020 8:47 am โดย tsukasaz
ปฏิทินประจําปี 2563 นักษัตย์ 12 ราศี ของจีนที่เรามักคุ้นเคยกัน
โดย noppadonsk ส 28 ธ.ค. 2019 10:40 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
239
ส 04 ม.ค. 2020 4:38 am โดย mindphp
คำสั่งจาก LINE API บันทึกเรียบร้อยแล้ว แต่ไม่เข้าไปใน inbox e-mail : order@dapper.com [2019-12][002]
โดย thatsawan ศ 27 ธ.ค. 2019 5:56 pm บอร์ด MD-CRM - Tester
2
5
ศ 27 ธ.ค. 2019 9:25 pm โดย mindphp
อยากทราบวิธีการอัพโหลดรูปภาพลงใน9kik'ฐานข้อมูล ของ phpbb
โดย Ittichai_chupol ศ 27 ธ.ค. 2019 4:22 pm บอร์ด Programming - PHP
1
75
ศ 27 ธ.ค. 2019 4:38 pm โดย thatsawan
ปฏิทินประจําปี 2563 ธีมการศึกษาสำหรับเด็กเรียน
โดย noppadonsk ศ 27 ธ.ค. 2019 10:41 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
273
ส 04 ม.ค. 2020 4:38 am โดย mindphp
B - ข้อมุลเชื่อม ตำบลที่มี รหัสไปรษณี ไม่เหมือน อำเภอข้อมมูลผิด
โดย mindphp พฤ 26 ธ.ค. 2019 3:01 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 26 ธ.ค. 2019 3:01 pm โดย mindphp
ปฏิทินประจําปี 2563 มาในธีมปาร์ตี้และการเฉลิมฉลอง
โดย noppadonsk พฤ 26 ธ.ค. 2019 1:51 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
229
ส 04 ม.ค. 2020 4:38 am โดย mindphp
B - SQL ทำงานช้า
โดย mindphp พ 25 ธ.ค. 2019 10:07 pm บอร์ด Odoojob.com - Tester
0
1
พ 25 ธ.ค. 2019 10:07 pm โดย mindphp
ทิปเล็กๆ การใช้งาน Directadmin บน Ubuntu หรือ CentOS ใช้ .tar.gz จะทำงานได้เร็วกว่า..
โดย mindphp พ 25 ธ.ค. 2019 8:53 pm บอร์ด Linux - Web Server
0
32
พ 25 ธ.ค. 2019 8:53 pm โดย mindphp
เครื่องมือในการคำนวณภาษีหัก ณ ที่จ่าย ลดภาระการเสียภาษีก้อนใหญ่ได้ง่ายๆ
โดย prmindphp พ 25 ธ.ค. 2019 6:56 pm บอร์ด MindPHP News & Feedback
0
30
พ 25 ธ.ค. 2019 6:56 pm โดย prmindphp
วิธีการเขียน SQL เพื่อเปลี่ยนชื่อตาราง ในฐานข้อมูลเมื่อมีการเขียนชื่อตารางผิด
โดย Ittichai_chupol พ 25 ธ.ค. 2019 5:15 pm บอร์ด SQL Knowledge
0
28
พ 25 ธ.ค. 2019 5:15 pm โดย Ittichai_chupol
แก้ปัญหา ใช้ Python โอนย้ายไฟล์ข้ามเครื่อง ด้วย ftplib แล้วเจอ Connection timed out
โดย mindphp พ 25 ธ.ค. 2019 1:21 pm บอร์ด Python Knowledge
0
36
พ 25 ธ.ค. 2019 1:21 pm โดย mindphp
ตัวช่วยในคำนวณอัตราดอกเบี้ยสำหรับนักลงทุน
โดย prmindphp อ 24 ธ.ค. 2019 6:52 pm บอร์ด MindPHP News & Feedback
0
30
อ 24 ธ.ค. 2019 6:52 pm โดย prmindphp
วิธีการดึงกลุ่มของ phpbb มาสร้างเป็น listbox พร้อมเปลี่ยนชื่อกลุ่มตามภาษาที่กำหนด
โดย Ittichai_chupol อ 24 ธ.ค. 2019 6:35 pm บอร์ด PHP Knowledge
0
28
อ 24 ธ.ค. 2019 6:35 pm โดย Ittichai_chupol
R - ขั้นตอนการตรวจ สอบปัญหา ที่อาจจะเกิดขึ้น ตาม Systems Diagram
โดย mindphp อ 24 ธ.ค. 2019 12:12 pm บอร์ด MlineCRM Line + MD-CRM
0
2
อ 24 ธ.ค. 2019 12:12 pm โดย mindphp
ปฏิทินประจําปี 2563 มาในรูปแบบไซเบอร์ สำหรับคนสมัยใหม่ที่มีหัวคิดก้าวไกลเท่าทันเทคโนโลยี
โดย noppadonsk อ 24 ธ.ค. 2019 10:35 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
152
ส 04 ม.ค. 2020 4:38 am โดย mindphp
R - เพิ่ม Exception ตอน push ข้อมความ ไปที่ Line หรือ รับข้อความจาก Line ไม่ได้
โดย mindphp อ 24 ธ.ค. 2019 7:06 am บอร์ด MD-CRM - Tester
0
4
อ 24 ธ.ค. 2019 7:06 am โดย mindphp
B - เวลาใน Logs ไม่ตรง
โดย mindphp อ 24 ธ.ค. 2019 5:57 am บอร์ด MlineCRM Line + MD-CRM
0
3
อ 24 ธ.ค. 2019 5:57 am โดย mindphp