เมนูในลักษณะนี้เราใช้ pagebuilder ทำได้ไหมครับ

หน้าแรก ฟอรั่ม ถามปัญหาการทำเว็บด้วยเวิร์ดเพรส เมนูในลักษณะนี้เราใช้ pagebuilder ทำได้ไหมครับ

ติดป้ายกำกับ: ,

กำลังดู 9 ความเห็น
  • ผู้เขียน
    ข้อความ
    • #15051
      Facebook Profile photosupachaisun
      Participant

      เห็นตัวอย่าง menu เวปนี้ http://www.choojaiproject.org/ เราใช้ page builder สร้างได้ไหม เวลา scroll เลื่อนลงเราต้องเพิ่มcode อะไรไหมครับ ขอบคุณครับ

       

    • #15145
      Facebook Profile photoNon Boripat
      Participant

      อยากทำเป็นเหมือนกันเมนูแบบนี้อะครับ

       

    • #15184
      SeedThemes
      Keymaster

      Page Builder ผมยังไม่เจอ effect แบบนี้นะครับ คิดว่าต้องแก้โค้ดเองสะดวกสุด

      จะลองดูโค้ดจากเว็บผมก็แนวเดียวกันนะครับ Menn Studio จะเห็นว่า เมื่อ “เลื่อนหรือ Scroll เมาส์ถึงจุดนึง ส่วน header จะเปลี่ยนสีได้”

      หลักการคือ

      1. เราจะกำหนดให้ header มีคลาสได้ 2 แบบ
        1. แบบแรกไม่ใส่อะไรเลย ก็แสดงปกติ
        2. แบบที่สอง ใส่คลาสเป็น active (หรือชื่ออื่น) ก็แสดงอีกค่านึง เช่น เปลี่ยนสีพื้นหลัง เปลี่ยนความสูง ฯลฯ
      2. แล้ว เราก็ไปเขียน jQuery เช็คว่า “มีการเลื่อนเมาส์ไปกี่ px แล้ว? ถ้าถึงจุดที่กำหนด ให้ใส่คลาส active ไปนะ

      ลองดูโค้ดตามนี้ครับ

      See the Pen Header แบบ Fixed และวื้บๆ by SeedThemes ( @SeedThemes) on CodePen.

      • ไฟล์ HTML: ไม่ต้องแก้ครับ ธีม Seed ใช้คลาส site-header อยู่แล้ว
      • ไฟล์ CSS: ไปแก้ที่ไฟล์ css/head.css (อย่าลืมว่าบรรทัดบนๆ คือสำหรับมือถือ บรรทัดล่างๆ @media (min-width:992px) สำหรับ desktop)
      • ไฟล์ JS: ไปแก้ที่ไฟล์ js/main.js ก๊อบโค้ดไปใส่ตรงช่องว่างกลางๆ ช่วงบรรทัด 17-18 ได้เลยครับ
    • #15228
      Facebook Profile photosupachaisun
      Participant

      สอบถามเพิ่มเติมครับ ทำอย่างไรจะให้ submenu ที่ active เวลา scroll เลื่อนลง มีลักษณะเดียวกับเมนูครับ ขอบคุณครับ

      http://u082.todsorb.com/

    • #15236
      Facebook Profile photoMenn
      Keymaster

      ลองดูตามรูปครับ หลักการคือ เราก็ต้องหาคลาสที่ “เจาะจง” กว่าเดิม มาทับค่ามันไปครับ

    • #15263
      Facebook Profile photosupachaisun
      Participant

      ขอบคุณมากครับ

       

    • #15388
      Facebook Profile photosupachaisun
      Participant

      สามารถทำได้แล้วครับตามคำแนะนำ แต่ตัว logo ทำดูแล้วไม่เปลี่ยนไปทราบต้องทำอย่างไรครับ ขอบคุณครับ

    • #15390
      Facebook Profile photoMenn
      Keymaster

      โลโก้ จากลิงก์ที่ให้มา เค้าใช้วิธี

      1. เป็น <img> ปกติ มี <a> ครอบ
      2. พอเปลี่ยนคลาส ก็สั่งให้ <img> ซ่อนไป แล้วสั่งให้ <a> ไปตั้งค่าพื้นหลังเป็นอีกรูปที่กำหนด

      แต่ถ้างง ก็ใส่ไปสองรูปเลยครับ แล้วใส่คลาสเช่น logo-1 กับ logo-2 แล้วใน CSS ก็เขียนประมาณ

      “`css
      .site-header .logo-1 {display:block;}
      .site-header .logo-2 {display:none;}
      .site-header.active .logo-1 {display:none;}
      .site-header.active .logo-2 {display:block;}
      “`

    • #15395
      Facebook Profile photosupachaisun
      Participant

      ยังไม่ได้ครับ แนะนำการเขียน class logo-1 หน่อยครับ ลองเขียนแล้วไม่ยอมเปลี่ยนตามนะครับ ขอบคุณครับ

    • #15404
      Facebook Profile photoMenn
      Keymaster

      อ่า เขียน CSS เฉยๆ ไม่ได้อยู่แล้วนะครับ ต้องไปแก้โค้ดใน header.php ด้วย (ที่เขียนว่า “ใส่ไปสองรูปเลยครับ” น่ะครับ หมายถึงเอา <img> ใส่ไปในตำแหน่งโลโก้)

      งั้นเอาแบบไม่แก้โค้ด header.php ก็ได้ครับ อันนี้คือแก้ CSS อย่างเดียว ลองไปเปลี่ยน url กับขนาดของรูปดูนะครับ

      “`
      .site-header.active .site-logo a img { display: none; }

      .site-header.active .site-logo a {
      display: inline-block;
      width: 230px;
      height: 80px;
      background: url(“https://www.seedthemes.com/img/logo-seedthemes.svg&#8221;) no-repeat 0 10px;
      }
      “`

      การใช้วิธีนี้ อาจจะต้องปรับระดับตัวอักษรชื่อเว็บต่อ ซึ่งถ้าหาไม่เจอ แนะนำว่าทำเป็นรูปละกันนะครับ

กำลังดู 9 ความเห็น

  • คุณต้องเข้าสู่ระบบเพื่อตอบกลับกระทู้นี้