การสาธิต: แถบนำทาง
แถบนำทาง
มีที่ง่ายต่อการใช้ลูกศรเป็นสิ่งสำคัญสำหรับเว็บไซต์ใด ๆ
ด้วย CSS คุณสามารถเปลี่ยนเมนู HTML น่าเบื่อเข้าไปดูดีแถบนำทาง
ป้าย = รายการลิงก์
แถบนำทางความต้องการมาตรฐาน HTML เป็นฐาน
ในตัวอย่างของเราที่เราจะสร้างแถบนำทางจากรายการ HTML มาตรฐาน
แถบนำทางเป็นพื้นรายการของการเชื่อมโยงเพื่อใช้ <ul> และ <li> องค์ประกอบทำให้รู้สึกดี:
ตัวอย่าง
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
ลองตัวเอง» ตอนนี้ขอเอากระสุนและอัตรากำไรและขยายจากรายการ
ตัวอย่างอธิบายว่า:
-
list-style-type: none;- ลบกระสุน แถบนำทางไม่จำเป็นต้องมีเครื่องหมายรายการ - ชุด
margin: 0;และpadding: 0;เพื่อลบการตั้งค่าเริ่มต้นของเบราว์เซอร์
รหัสในตัวอย่างข้างต้นเป็นรหัสมาตรฐานที่ใช้ทั้งในแนวตั้งและแนวนอนแถบนำทาง
แนวตั้งป้าย
เพื่อสร้างแถบนำทางแนวตั้งคุณสามารถสไตล์ <a> องค์ประกอบภายในรายการที่นอกเหนือไปจากรหัสข้างต้น:
ตัวอย่างอธิบายว่า:
-
display: block;- แสดงการเชื่อมโยงเป็นองค์ประกอบของบล็อกทำให้ทั้งพื้นที่เชื่อมโยงคลิกได้ (ไม่เพียง แต่ข้อความ) และมันช่วยให้เราสามารถระบุ width (และ padding, margin, height ฯลฯ ถ้าคุณต้องการ) -
width: 60px;- Block องค์ประกอบใช้เวลาถึงเต็มความกว้างใช้ได้โดยการเริ่มต้น เราต้องการที่จะระบุความกว้าง 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
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} ลองตัวเอง» งาน / ปัจจุบันการเชื่อมโยงการนำทาง
เพิ่มระดับ "Active" การเชื่อมโยงในปัจจุบันเพื่อให้ผู้ใช้ทราบว่าหน้าเขา / เธออยู่บน:
ศูนย์ลิงค์และเพิ่มเส้นขอบ
เพิ่ม text-align:center การ <li> หรือ <a> ไปยังศูนย์การเชื่อมโยง
เพิ่ม border คุณสมบัติการ <ul> เพิ่มเส้นขอบรอบ Navbar หากคุณยังต้องการภายในพรมแดนแถบนำทางให้เพิ่ม border-bottom ทุก <li> องค์ประกอบยกเว้นคนสุดท้าย:
ตัวอย่าง
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} ลองตัวเอง» เต็มความสูงคงที่ในแนวตั้ง Navbar
สร้างเต็มความสูง, "sticky" ลูกศรด้าน:
ตัวอย่าง
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 */
} ลองตัวเอง» หมายเหตุ: ตัวอย่างนี้อาจไม่ทำงานอย่างถูกต้องบนอุปกรณ์มือถือ
แนวนอนป้าย
มีสองวิธีที่จะสร้างแถบนำทางแนวนอนโดยใช้แบบอินไลน์หรือลอยอยู่ในรายการ
บัตรรายการอินไลน์
วิธีหนึ่งที่จะสร้างแถบแนวนอนคือการระบุ <li> องค์ประกอบแบบอินไลน์นอกจากนี้ยังมี "standard" โค้ดด้านบน:
ตัวอย่างอธิบายว่า:
-
display: inline;- โดยค่าเริ่มต้น <li> องค์ประกอบองค์ประกอบของบล็อก ที่นี่เราจะลบเส้นแบ่งก่อนและหลังรายการแต่ละรายการจะแสดงให้พวกเขาในหนึ่งบรรทัด
ลอยบัตรรายการ
วิธีการสร้างแถบแนวนอนก็คือการลอย <li> องค์ประกอบและระบุรูปแบบการเชื่อมโยงการนำทาง:
ตัวอย่าง
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
} ลองตัวเอง» ตัวอย่างอธิบายว่า:
-
float: left;- ใช้ลอยเพื่อให้ได้องค์ประกอบของบล็อกจะเลื่อนไปกัน -
display: block;- แสดงการเชื่อมโยงเป็นองค์ประกอบของบล็อกทำให้ทั้งพื้นที่เชื่อมโยงคลิกได้ (ไม่เพียง แต่ข้อความ) และมันช่วยให้เราสามารถระบุ padding (และ height, width, margins ฯลฯ ถ้าคุณต้องการ) -
padding: 8px;- เนื่องจากองค์ประกอบของบล็อกใช้เวลาถึงเต็มความกว้างมีพวกเขาไม่สามารถลอยติดกัน ดังนั้นการระบุช่องว่างบางอย่างที่จะทำให้พวกเขาดูดี -
background-color: #dddddd;- เพิ่มสีเทาสีพื้นหลังให้กับแต่ละองค์ประกอบ
เคล็ดลับ: การเพิ่มสีพื้นหลังเพื่อ <ul> แทนของแต่ละ <a> องค์ประกอบถ้าคุณต้องการสีพื้นหลังเต็มความกว้าง:
ตัวอย่างแนวนอนป้าย
สร้างแถบนำทางพื้นฐานแนวนอนที่มีสีพื้นหลังสีดำและเปลี่ยนสีพื้นหลังของการเชื่อมโยงเมื่อผู้ใช้เลื่อนเมาส์ไปที่พวกเขา
ตัวอย่าง
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
} ลองตัวเอง» งาน / ปัจจุบันการเชื่อมโยงการนำทาง
เพิ่ม "active" ระดับการเชื่อมโยงในปัจจุบันเพื่อให้ผู้ใช้ทราบว่าหน้าเขา / เธออยู่บน:
ลิงค์ขวาจัด
การเชื่อมโยงขวาจัดโดยรายการลอยไปทางขวา ( float:right; ):
ตัวอย่าง
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul> ลองตัวเอง» แบ่งชายแดน
เพิ่ม border-right คุณสมบัติการ <li> การสร้างวงเวียน Link:
ตัวอย่าง
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
} ลองตัวเอง» คงที่ป้าย
ทำให้การเข้าพักแถบนำทางที่ด้านบนหรือด้านล่างของหน้าแม้เมื่อผู้ใช้เลื่อนหน้า:
หมายเหตุ: ตัวอย่างเหล่านี้อาจจะไม่ทำงานอย่างถูกต้องบนอุปกรณ์มือถือ
สีเทาแนวนอน Navbar
ตัวอย่างของแถบนำทางสีเทาแนวนอนที่มีเส้นขอบสีเทาบาง:
ตัวอย่างเพิ่มเติม
Topnav ตอบสนอง
วิธีการใช้ CSS3 คำสั่งสื่อเพื่อสร้างการตอบสนองนำทางด้านบน
Sidenav ตอบสนอง
วิธีการใช้ CSS3 คำสั่งสื่อในการสร้างลูกศรด้านการตอบสนอง
เลื่อนลง Navbar
วิธีการเพิ่มเมนูแบบเลื่อนลงภายในแถบนำทาง