Tip CSS : Sidebar Navigation with Input and Buttons (สไลด์บาร์ เนวิเกชั่น กับช่องค้นหา) สีดำอย่างง่าย

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

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

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

Tip CSS : Sidebar Navigation with Input and Buttons (สไลด์บาร์ เนวิเกชั่น กับช่องค้นหา) สีดำอย่างง่าย

โพสต์โดย pprn » 10/07/2018 11:00 am

    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>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
     
        <input type="text" class="w3-bar-item w3-input w3-white w3-mobile" placeholder="Search..">
        <button class="w3-bar-item w3-button w3-green w3-mobile">Go</button>
    </div>

    <!-- Page Content -->
    <div class="w3-bar w3-black w3-border w3-padding">
      <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>
     
        <input type="text" class="w3-bar-item w3-input w3-white w3-mobile" placeholder="Search..">
        <button class="w3-bar-item w3-button w3-green w3-mobile">Go</button>
    </div>

    <!-- Page Content -->
    <div class="w3-bar w3-black w3-border w3-padding">
      <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 ก่อนกด

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

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

    slidbar seach.JPG
    หน้า slidebar navigation หลังกด


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

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

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

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

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

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