Q - ทำเมนูตอนย่อหน้าจอแล้วกำหนดให้เมนูยังแสดงอยู่บ้างบางส่วน

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

Moderator: mindphp

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 2368
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

Q - ทำเมนูตอนย่อหน้าจอแล้วกำหนดให้เมนูยังแสดงอยู่บ้างบางส่วน

โพสต์โดย Parichat » 26/05/2018 3:35 pm

อยากทำเมนูตอนย่อหน้าจอแล้วกำหนดให้เมนูยังแสดงอยู่บ้างบางส่วนดังตัวอย่าง

ader.png
ader.png (3.77 KiB) เปิดดู 409 ครั้ง


ตอนนี้ทำได้ดังรูป
aetg.png
aetg.png (1004 ไบต์) เปิดดู 409 ครั้ง


ต้องเขียนโค้ดอะไรเพิ่มค่ะ
ขอบคุณค่ะ
Live Simply, Laugh Often, Love Deeply.....

ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 19053
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: Q - ทำเมนูตอนย่อหน้าจอแล้วกำหนดให้เมนูยังแสดงอยู่บ้างบางส่วน

โพสต์โดย mindphp » 26/05/2018 4:27 pm

รูปตัวอย่าง ภาพแรกเอามาจากไหน
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: viewforum.php?f=29
รับอบรม และพัฒนาระบบ: viewtopic.php?f=6&t=2042

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 2368
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

Re: Q - ทำเมนูตอนย่อหน้าจอแล้วกำหนดให้เมนูยังแสดงอยู่บ้างบางส่วน

โพสต์โดย Parichat » 26/05/2018 4:54 pm

mindphp เขียน:รูปตัวอย่าง ภาพแรกเอามาจากไหน


เอามาจากเว็บ w3schools ค่ะ
Live Simply, Laugh Often, Love Deeply.....

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 8579
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - ทำเมนูตอนย่อหน้าจอแล้วกำหนดให้เมนูยังแสดงอยู่บ้างบางส่วน

โพสต์โดย tsukasaz » 13/06/2018 2:20 pm

ใช้ css ธรรมดา หรือ ใช้ css framework อะไร
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 2368
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

Re: Q - ทำเมนูตอนย่อหน้าจอแล้วกำหนดให้เมนูยังแสดงอยู่บ้างบางส่วน

โพสต์โดย Parichat » 13/06/2018 3:24 pm

tsukasaz เขียน:ใช้ css ธรรมดา หรือ ใช้ css framework อะไร


มีที่เป็นใช้ css ธรรมดาและมีที่ต้องทำcss ใน joomla ค่ะ
Live Simply, Laugh Often, Love Deeply.....

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 8579
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - ทำเมนูตอนย่อหน้าจอแล้วกำหนดให้เมนูยังแสดงอยู่บ้างบางส่วน

โพสต์โดย tsukasaz » 13/06/2018 3:44 pm

เลือกใช้ 2 แบบ คือ
1. มีเมนู 2 อัน อันนึงแสดงแบบเต็มตลอด กับ อีกอันแสดงแบบย่อ แล้วใช้ class ของ bootstap ใน joomla เป็นตัวคุมการแสดงผล
กำหนดให้ เมนูแบบเต็ม จะแสดงจนกว่าขนาดหน้าจอจะเล็กเท่ากับมือถือ
รูปภาพ


2. ปรับ css เอง โดยปกติ bootstap ใน joomla เมนูจะย่อก็ต่อเมื่อหน้าจอขนาดน้อยกว่า 768px
เราต้องใช้เครื่องมือตรวจสอบหน้าเว็บไซต์ของ Browser เพื่อปรับแก้ css เอง

โค้ด: เลือกทั้งหมด

    /* Large desktop */
    @media (min-width: 1200px) { ... }
     
    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) { ... }
     
    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) { ... }
     
    /* Landscape phones and down */
    @media (max-width: 480px) { ... }
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 2368
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

Re: Q - ทำเมนูตอนย่อหน้าจอแล้วกำหนดให้เมนูยังแสดงอยู่บ้างบางส่วน

โพสต์โดย Parichat » 13/06/2018 5:43 pm

ลองเอาไปปรับใช้แล้วมันไม่ได้อะค่ะ
Live Simply, Laugh Often, Love Deeply.....

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 8579
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - ทำเมนูตอนย่อหน้าจอแล้วกำหนดให้เมนูยังแสดงอยู่บ้างบางส่วน

โพสต์โดย tsukasaz » 13/06/2018 5:49 pm

ปรับอะไร ใครรู้บอกที
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)


ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 51 และ บุคคลทั่วไป 0 ท่าน