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

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

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

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

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

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

  • 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 dropdown navigation ก่อนกด
    หน้า slidebar dropdown navigation ก่อนกด
  • หน้า slidebar dropdown navigation หลังกด
  • หน้า slidebar dropdown navigation หลังกด
    หน้า slidebar dropdown navigation หลังกด

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

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

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

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