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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: Tip CSS : Sidebar Dropdown Navigation (ซีเอสเอส สไลด์บาร์ ดรอปดาว์น เนวิเกชั่น) สีดำอย่างง่าย

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

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

ข้างบน