แถบนำทางแนวตั้ง CSS
แถบนำทางแนวตั้ง
ในการสร้างแถบนำทางแนวตั้ง คุณสามารถจัดรูปแบบองค์ประกอบ <a> ในรายการ นอกเหนือจากโค้ดจากหน้าก่อนหน้า:
ตัวอย่าง
li a
{
display: block;
width: 60px;
}
ตัวอย่างอธิบาย:
display: block;- การแสดงลิงก์เป็นองค์ประกอบบล็อกทำให้พื้นที่ลิงก์ทั้งหมดคลิกได้ (ไม่ใช่แค่ข้อความ) และช่วยให้เราระบุความกว้างได้ (และช่องว่างภายใน ระยะขอบ ความสูง ฯลฯ ถ้าคุณต้องการ)width: 60px;- องค์ประกอบบล็อกใช้ความกว้างเต็มตามค่าเริ่มต้น เราต้องการระบุความกว้าง 60 พิกเซล
คุณยังสามารถกำหนดความกว้างของ <ul> และลบความกว้างของ <a> เนื่องจากจะใช้ความกว้างเต็มที่มีอยู่เมื่อแสดงเป็นองค์ประกอบของบล็อก สิ่งนี้จะให้ผลลัพธ์เช่นเดียวกับตัวอย่างก่อนหน้าของเรา:
ตัวอย่าง
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
ตัวอย่างแถบนำทางแนวตั้ง
สร้างแถบนำทางแนวตั้งพื้นฐานด้วยสีพื้นหลังสีเทา และเปลี่ยนสีพื้นหลังของลิงก์เมื่อผู้ใช้เลื่อนเมาส์ไปเหนือ:
ตัวอย่าง
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
ลิงค์การนำทางที่ใช้งาน/ปัจจุบัน
เพิ่มคลาส "ใช้งานอยู่" ให้กับลิงก์ปัจจุบันเพื่อให้ผู้ใช้ทราบว่าเขา/เธออยู่ที่หน้าใด:
ตัวอย่าง
.active {
background-color: #04AA6D;
color: white;
}
ลิงค์ศูนย์ & เพิ่มเส้นขอบ
เพิ่มtext-align:centerใน <li> หรือ <a> เพื่อจัดลิงก์ให้อยู่ตรงกลาง
เพิ่มborderคุณสมบัติเพื่อ <ul> เพิ่มเส้นขอบรอบแถบนำทาง หากคุณต้องการเส้นขอบภายในแถบนำทาง ให้เพิ่มborder-bottomองค์ประกอบ <li> ทั้งหมด ยกเว้นองค์ประกอบสุดท้าย:
ตัวอย่าง
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Navbar แนวตั้งคงที่เต็มความสูง
สร้างการนำทางด้านข้างที่ "เหนียว" เต็มความสูง:
ตัวอย่าง
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
หมายเหตุ:ตัวอย่างนี้อาจทำงานไม่ถูกต้องบนอุปกรณ์เคลื่อนที่