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

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

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

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

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

โพสต์โดย pprn » 09/07/2018 1:34 pm

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

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

รูปแบบโค้ด

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

    <!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>
    </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>

    <!-- 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 navigation ก่อนกด

    slidebar.JPG
    สไลด์บาร์

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

    slidebar close.JPG
    กดเปิดสไลด์บาร์

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

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

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

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

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

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