Tip CSS : Sidebar Dropdown Navigation (ซีเอสเอส สไลด์บาร์ ดรอปดาว์น เนวิเกชั่น) สีดำอย่างง่าย

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
pprn
PHP Super Member
PHP Super Member
โพสต์: 477
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

Tip CSS : Sidebar Dropdown Navigation (ซีเอสเอส สไลด์บาร์ ดรอปดาว์น เนวิเกชั่น) สีดำอย่างง่าย

โพสต์โดย pprn » 09/07/2018 3:00 pm

    CSS ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ
หรือ "Style" ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ

    Navigation Bar คือ เมนูลิงค์เป็นส่วนเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์

    Dropdown คือ รายชื่อเมนูที่เมื่อใช้เมาส์กดแล้วจะมีรายการแสดงให้เลือก

รูปแบบโค้ด

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

    <!DOCTYPE html>
    <html>
    <title>CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <body>

    <!-- Sidebar -->
    <div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="Sidebar">
      <button onclick="w3_close()" class="w3-bar-item w3-large">Close &times;</button>
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <!-- Dropdown -->
      <div class="w3-dropdown-hover">
          <button class="w3-button">Dropdown</button>
          <div class="w3-dropdown-content w3-bar-block w3-card-4">
             <a href="#" class="w3-bar-item w3-button">Link 1</a>
          </div>
        </div>
    </div>

    <!-- Page Content -->
    <div class="CSS color">
      <button class="w3-button w3-black w3-xlarge" onclick="w3_open()">Text_edit</button>
      <div class="w3-container">
       
      </div>
    </div>

    <script>
    function w3_open() {
        document.getElementById("Sidebar").style.display = "block";
    }
    function w3_close() {
        document.getElementById("Sidebar").style.display = "none";
    }
    </script>
         
    </body>
    </html>

    อธิบายโค้ด
      - Text_edit คือ ส่วนที่อยากโชว์ข้างๆ slide bar
      - CSS color คือ code สีของ CSS


ตัวอย่างโค้ด

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

    <!DOCTYPE html>
    <html>
    <title>CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <body>

    <!-- Sidebar -->
    <div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="Sidebar">
      <button onclick="w3_close()" class="w3-bar-item w3-large">Close &times;</button>
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
      <div class="w3-dropdown-hover">
          <button class="w3-button">Dropdown</button>
          <div class="w3-dropdown-content w3-bar-block w3-card-4">
            <a href="#" class="w3-bar-item w3-button">Link 1</a>
            <a href="#" class="w3-bar-item w3-button">Link 2</a>
            <a href="#" class="w3-bar-item w3-button">Link 3</a>
          </div>
        </div>
    </div>

    <!-- Page Content -->
    <div class="w3-black">
      <button class="w3-button w3-black w3-xlarge" onclick="w3_open()">&#9776;</button>
      <div class="w3-container">
       
      </div>
    </div>



    <script>
    function w3_open() {
        document.getElementById("Sidebar").style.display = "block";
    }
    function w3_close() {
        document.getElementById("Sidebar").style.display = "none";
    }
    </script>
         
    </body>
    </html>

    อธิบายโค้ด
      - &#9776; คือ html symbols แบบสามขีด (สัญลักษณ์ html)
      - w3-black คือ CSS color สีดำ
      - function w3_open คือ เมื่อคลิกที่ Sidebar จะมีเปิด slidebar ขึ้นมา
      - function w3_close คือ เมื่อคลิกที่ Sidebar จะมีปิด slidebar ขึ้นมา
      - button onclick คือ เมื่อกดปุ่มแล้วคลิกจะทำตามเงื่อนไข

ผลลัพธ์

    หน้า slidebar dropdown navigation ก่อนกด

    slidebar.JPG
    หน้า slidebar dropdown navigation ก่อนกด

    หน้า slidebar dropdown navigation หลังกด

    slid bar dropdown.png
    หน้า slidebar dropdown navigation หลังกด


----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________

----------------------------------------------------------------------------------------------------------------------------------------------------------------

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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

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