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