- CSS ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ
- 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 ×</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
- - Text_edit คือ ส่วนที่อยากโชว์ข้างๆ slide 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 ×</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()">☰</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>
- อธิบายโค้ด
- - ☰ คือ html symbols แบบสามขีด (สัญลักษณ์ html)
- w3-black คือ CSS color สีดำ
- function w3_open คือ เมื่อคลิกที่ Sidebar จะมีเปิด slidebar ขึ้นมา
- function w3_close คือ เมื่อคลิกที่ Sidebar จะมีปิด slidebar ขึ้นมา
- button onclick คือ เมื่อกดปุ่มแล้วคลิกจะทำตามเงื่อนไข
- - ☰ คือ html symbols แบบสามขีด (สัญลักษณ์ html)
- หน้า slidebar dropdown navigation ก่อนกด
- หน้า slidebar dropdown navigation หลังกด
----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------