อยากทราบวิธีการทำเมนู Reponssive menu ว่าทำอย่างไร

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
pnut
PHP Super Member
PHP Super Member
โพสต์: 488
ลงทะเบียนเมื่อ: 08/08/2016 10:48 am

อยากทราบวิธีการทำเมนู Reponssive menu ว่าทำอย่างไร

โพสต์ที่ยังไม่ได้อ่าน โดย pnut »

ผมอยากได้วิธีการทำเมนู Reponsive menu boostrap หรือ css ว่าทำอย่างไร ใช้คลาสอะไร ขั้นตอนการทำเพื่อนจะได้เมนูนั้นมาต้องเริ่มขั้นตอนแรกยังไง
1.ทำอย่างไร
2.วิธีการทำอย่างไร
ปล.ขอวิธีสำหรับคนไม่มีพื้นฐานสำหรับการเขียน menu boostrap หรือ CSS มาก่อน ขอละเอียดๆ
เนื่องจากผมไม่เคยทำเมนูในส่วนของ Reponsive menu มาก่อนมีแค่ความรู้พื้นฐานของ CSS เท่านั้น เคยศึกษาจากเว็บอื่นๆ ก็ไม่เข้าใจอยู่ดี ก็เลยขอวิธีการทำเน้นๆๆขอรายละเอียดหน่อยนะครับ ช่วยผมด้วยนะครับเว็บผมเหลือนี้ส่วนเดียวเท่านั้น

อยากได้รูปเมนู ดังภาพ
11112222.jpg
11112222.jpg (16.55 KiB) Viewed 1264 times
ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 28508
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

Re: อยากทราบวิธีการทำเมนู Reponssive menu ว่าทำอย่างไร

โพสต์ที่ยังไม่ได้อ่าน โดย thatsawan »

ต้องหันกลับไปถามต้องเองก่อนว่าไม่เข้าใจอะไร พื้นฐานจริงๆ

มีไม่กี่อย่าง
ใส่ที่หลังทับตัวก่อน อะไรงี้ Class ซ้ำพังทีพังทั้งหมด!!

จริงๆ ถ้ามีเเค่พื้นฐาน CSS HTML ก็สามารถเขียน MENU ออกมาได้เเล้ว
http://www.w3schools.com/css/default.asp
ตัวอย่าง
http://www.w3schools.com/css/css_examples.asp

ตัวอย่าง Reponssive menu แบบธรรมดาๆ ก็สวยได้เเล้ว
http://codepen.io/jurbank/pen/veGnb
https://envato.com/blog/css-snippets-responsive-menus/
http://cssmenumaker.com/


ถ้าเข้าใจ CSS เเล้วเริ่มขี้เกียจก็ลองขยับมาเล่น bootstrap เน้นไปส่วนของ Grid จะส่วนให้เราทำงานง่ายขึ้น
https://getbootstrap.com/examples/grid/
https://www.youtube.com/watch?v=GoVWPiN ... tB&index=1

ตัวอย่าง menu
http://bootsnipp.com/tags/menu


จริงๆ ถ้าไม่เข้าใจพยายาม จับ Keyword มาค้นหา จาก Google YouTube ก็ได้มีตัวอย่างเยอะเเยะ ลองเอามาปรับดู

รวมเนื้อหาบทเรียนสำหรับการเรียนรู้ Bootstap

บทเรียน "Bootstap"
bootstrap : คืออะไร
การใช้งาน Bootstrap เบื้องต้น
ตัวอย่างการใช้งาน "Bootstap"
ตัวอย่างการใช่งาน bootstrap tags input เบื้องต้น
ตัวอย่าง Code Google map ทำงานบน Bootstrap
ตัวอย่างการใช้งาน ปฎิทินบน Bootstrap (Datepicker for Bootstrap)
แก้ปัญหา Dropdown ไม่แสดงข้อมูล บนมือถือ และ IE
ความแตกต่างของ Navs กับ Navbar
ตัวอย่างการใช้งาน jQuery plugins clickover บน Bootstrap
ตัวอย่างการใช้งาน Class placeholder
Class ที่เปลี่ยนไปใน Bootstrap 2.x to 3.0
calendar bootstrap ทำปฏิทิน สนับสนุน Ajax
Bootstrap Menu Responsive ย่อเมนูตาม ขนาดหน้าจอ
การจัด Layouts ด้วย Bootstarp
การใช้ Progress bars ใน Bootstrap
วิธีใช้ Icons by Glyphicons ใน Bootstrap
วิธีการใช้ Navs ใน Bootstrap
การสร้าง Search Form และ Inline Form ด้วย Twitter Bootstrap
Auto Fill ข้อมูลด้วย Ajax บน Booststap
การตรวจสอบข้อมูลซ้ำด้วย Ajax บน Booststap
Typeahead ทำ Autocomplete บน Booststap
เนื้อหาเพิ่มเติม
http://www.eyecon.ro/bootstrap-datepicker/
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 36