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

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

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

 

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

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

หัวเรื่อง
js dropdown
หมวดหมู่
Javascript, Javascript
ฮิต
4934
ผู้สร้างเอกสาร
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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
จะทำไรให้ View Detail จัดเรียงได้ครับ
โดย jamepiyawat ส 25 ม.ค. 2020 2:32 pm บอร์ด Joomla Development
1
1234
ส 25 ม.ค. 2020 2:41 pm โดย mindphp
os.mkdir ฟังก์ชั่นสำหรับการสร้าง folder ใหม่
โดย benzas00123 ศ 24 ม.ค. 2020 6:44 pm บอร์ด Python Knowledge
0
50
ศ 24 ม.ค. 2020 6:44 pm โดย benzas00123
upload รูปภาพหลายๆรูป ด้วย Flask
โดย benzas00123 ศ 24 ม.ค. 2020 6:31 pm บอร์ด Python Knowledge
0
51
ศ 24 ม.ค. 2020 6:31 pm โดย benzas00123
มาแล้ว MDPartner Component สำหรับจัดเก็บข้อมูลลูกค้าในระบบ CRM
โดย prmindphp ศ 24 ม.ค. 2020 6:02 pm บอร์ด MindPHP News & Feedback
0
134
ศ 24 ม.ค. 2020 6:02 pm โดย prmindphp
os.remove ฟังก์ชั่นสำหรับการลบไฟล์
โดย benzas00123 ศ 24 ม.ค. 2020 5:35 pm บอร์ด Python Knowledge
0
72
ศ 24 ม.ค. 2020 5:35 pm โดย benzas00123
ขอสอบถามวิธีการดึงข้อมูลมาลงใน table ที่เราต้องการหน่อยครับ
โดย benzas00123 ศ 24 ม.ค. 2020 2:06 pm บอร์ด Programming - C/C++ & java & Python
1
1493
ศ 24 ม.ค. 2020 2:14 pm โดย benzas00123
ลูกไม่รักดี?
โดย noppadonsk ศ 24 ม.ค. 2020 10:40 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
102
ศ 24 ม.ค. 2020 10:40 am โดย noppadonsk
วิธีการแปลง timestamp เพื่อหาจำนวนวันที่ผ่านมาหรือคงเหลือ
โดย Ittichai_chupol พ 22 ม.ค. 2020 6:37 pm บอร์ด PHP Knowledge
0
90
พ 22 ม.ค. 2020 6:37 pm โดย Ittichai_chupol
วิธีการตรวจสอบว่ารูปเป็นแนวตั้งหรือแนวนอน ด้วยภาษา php
โดย jamepiyawat พ 22 ม.ค. 2020 6:16 pm บอร์ด PHP Knowledge
0
69
พ 22 ม.ค. 2020 6:16 pm โดย jamepiyawat
Range Sliders เก็บค่าตัวเลขด้วย range sliders
โดย benzas00123 พ 22 ม.ค. 2020 5:50 pm บอร์ด Booststap Knowledge
1
135
ศ 24 ม.ค. 2020 9:32 am โดย LEG
อยากทราบวิธีการตรวจสอบว่าจะมีเวลาอีกกี่วันถึงจะ ถึงเลข timestamp ที่กำหนด
โดย Ittichai_chupol พ 22 ม.ค. 2020 3:54 pm บอร์ด Programming - PHP
1
182
พ 22 ม.ค. 2020 4:18 pm โดย thatsawan
ขอสอบถามวิธีการเขียน bootstrap 3 ในการสร้าง bar ครับ
โดย benzas00123 พ 22 ม.ค. 2020 3:13 pm บอร์ด HTML CSS
5
224
พ 22 ม.ค. 2020 3:32 pm โดย benzas00123
วันหยุดที่หายไป
โดย noppadonsk พ 22 ม.ค. 2020 11:42 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
122
พ 22 ม.ค. 2020 11:42 am โดย noppadonsk
วิธีการปรับการการแสดงการ รายชื่อของแจ้งเตือน bookmark โดย phpbb
โดย Ittichai_chupol อ 21 ม.ค. 2020 5:45 pm บอร์ด PHP Knowledge
0
84
อ 21 ม.ค. 2020 5:45 pm โดย Ittichai_chupol
pillow vs wand library ความแตกต่างของ library ทั้ง 2 ตัวในการ procress รูปภาพ
โดย benzas00123 อ 21 ม.ค. 2020 5:29 pm บอร์ด Python Knowledge
1
100
อ 21 ม.ค. 2020 5:54 pm โดย mindphp
อยู่ดีๆ ก็ไม่สามารถเชื่อมต่อกับ database ได้ครับ
โดย benzas00123 อ 21 ม.ค. 2020 4:46 pm บอร์ด Programming - C/C++ & java & Python
5
167
อ 21 ม.ค. 2020 5:39 pm โดย benzas00123
ขอถามเกี่ยวกับ library ImageMagick ครับ
โดย benzas00123 อ 21 ม.ค. 2020 3:29 pm บอร์ด Programming - C/C++ & java & Python
2
84
อ 21 ม.ค. 2020 4:23 pm โดย benzas00123
Git Lad จะทำอย่างไรให้ไฟล์ที่อยู่ในโฟร์ย่อย ออกมาครับ
โดย jamepiyawat อ 21 ม.ค. 2020 12:08 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
211
อ 21 ม.ค. 2020 2:04 pm โดย jamepiyawat
ขอทราบวิธีการเขียน python เก็บข้อมูล ip ของผู้ใช้หน่อยครับ
โดย benzas00123 อ 21 ม.ค. 2020 10:54 am บอร์ด Programming - C/C++ & java & Python
1
169
อ 21 ม.ค. 2020 12:20 pm โดย mindphp
ขอสอบถามเกี่ยวกับการอัพโหลดรูปภาพเข้า ฐานข้อมูลครับ
โดย benzas00123 จ 20 ม.ค. 2020 6:29 pm บอร์ด SQL - Database
3
145
อ 21 ม.ค. 2020 2:00 pm โดย mindphp