ความคิดเห็น: ฉันมักจะพบกับการนำทางแบบดรอปดาวน์เมื่อเรียกดูหน้าเว็บ ฉันจำได้ว่าฉันเคยใช้มันโดยใช้ JS อย่างไรก็ตามสิ่งที่ฉันจะแนะนำต่อไปในบทความนี้คือการใช้งานโดยใช้ CSS3+HTML5 หากคุณสนใจอย่าพลาด ฉันหวังว่ามันจะเป็นประโยชน์สำหรับคุณที่จะเรียนรู้ CSS3 หลังจากอ่านมัน
การเรนเดอร์มีดังนี้:รหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title> การนำทาง HTML+CSS บริสุทธิ์ </title>
<!-Mulder->
<!-QQ: 10221408->
<!-รองรับ Chrome Firefox เท่านั้น->
<style>
-
มาร์จิ้น: 0;
Padding: 0;
-
.Clear: หลังจาก {
ชัดเจน: ทั้งสอง;
เนื้อหา: ".";
แสดง: บล็อก;
ความสูง: 0;
ทัศนวิสัย: ซ่อน;
-
Nav {
แสดง: Inline-Block;
ชายแดน: 1px Solid #505255;
ขอบด้านล่าง: 1px Solid #282C2F;
-moz-Border-Radius: 5px;
-webkit-Border-Radius: 5px;
มาร์จิ้น: 50px;
-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
-
หลี่ {
รายการสไตล์: ไม่มี;
ลอย: ซ้าย;
ชายแดนขวา: 1px Solid #2E3235;
ตำแหน่ง: ญาติ;
/*พื้นหลัง: -Moz-Linear-Gradient (บนสุด, #FFF, #555D5F 2%, #555D5F 50%, #3E4245 100%);
ความเป็นมา: -webkit-gradient (linear, 0 0, 0 100%, จาก (#FFFF), color-stop (2%, #555D5F), การหยุดสี (50%, #555D5F) ถึง ( #3E4245));*/////
ความเป็นมา:#555D5F;
-
li: โฮเวอร์ {
/*พื้นหลัง: -Moz-Linear-Gradient (บนสุด, #FFF, #3E4245 2%, #555D5F 80%, #555D5F 100%);
ความเป็นมา: -webkit-gradient (linear, 0 0, 0 100%, จาก (#FFFF), color-stop (2%, #3E4245), การหยุดสี (80%, #3E4245), ถึง ( #555D5F));*/////
ความเป็นมา:#3E4245;
-MOZ-TRANSITION: พื้นหลัง 1S EASE-OUT;
-Webkit-Transition: พื้นหลัง 1S EASE-OUT;
-
li a {
แสดง: บล็อก;
ความสูง: 40px;
สายไฟ: 40px;
Padding: 0 30px;
ขนาดตัวอักษร: 12px;
สี: #FFFF;
Text -Shadow: 0px -1px 0px #000;
การตกแต่งข้อความ: ไม่มี;
พื้นที่สีขาว: NowRap;
ชายแดนซ้าย: 1px Solid #999E9F;
ชายแดนด้านบน: 1px Solid #999E9F;
-Moz-Border-top-left-Radius: 2px;
-webkit-border-top-left-radius: 2px;
z-index: 100;
-
li> a {
ตำแหน่ง: ญาติ;
-
li.first a {
-moz-border-radius-topleft: 4px;
-MOZ-Border-Radius-Bottomleft: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-
li.last {
ชายแดนขวา: 0 ไม่มี;
-
dl {
ตำแหน่ง: สัมบูรณ์;
แสดง: บล็อก;
ด้านบน: 40px;
ซ้าย: -25px;
ความกว้าง: 165px;
ความเป็นมา:#222222;
-moz-Border-Radius: 5px;
-webkit-Border-Radius: 5px;
-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
z-index: 10;
-
Li: Hover DL {
ด้านบน: 50px;
แสดง: บล็อก;
ความกว้าง: 145px;
Padding: 10px;
-
dl a {
ความเป็นมา: โปร่งใส;
ชายแดน: 0 ไม่มี;
-moz-Border-Radius: 5px;
-webkit-Border-Radius: 5px;
-MOZ-TRANSITION: พื้นหลัง 0.5S EASE-OUT;
-webkit-transition: พื้นหลัง 0.5S ความสะดวกสบาย;
z-index: 50;
-
dl a: โฮเวอร์ {
สี: #FFF;
ความเป็นมา:#999E9F;
-MOZ-TRANSITION: พื้นหลัง 0.3S EASE-OUT, COLOR 0.3S EASE-OUT;
-webkit-transition: พื้นหลัง 0.3s ความสะดวกสบาย, สี 0.3s ความสะดวกสบาย;
-
dd {
ระยะขอบด้านบน: -40px;
ความทึบ: 0;
ความกว้าง: 145px;
-webkit-transition-property: ทั้งหมด;
/*-การทำงานของ Webkit-transition-timing-function: ลูกบาศก์เบส (5,0,5,0);*/
-MOZ-TRANSITION-PROPERTY: ทั้งหมด;
/*-ฟังก์ชั่น Moz-transition-timing-timing: ลูกบาศก์เบส (5,0,5,0);*/
/*-WebKit-Transition-Delay: 5s;
-moz-transition-delay: 5s;*/
-
Li: Hover DD {
ขอบด้านบน: 0;
ความทึบ: 1;
-
li dd: nth-child (1) {
-webkit-transition-duration: 0.1s;
-MOZ-TRANSITION-DURATION: 0.1S;
-
li dd: nth-child (2) {
-webkit-transition-duration: 0.2s;
-MOZ-TRANSITION-DURATION: 0.2S;
-
li dd: nth-child (3) {
-webkit-transition-duration: 0.3s;
-MOZ-TRANSITION-DURATION: 0.3S;
-
li dd: nth-child (4) {
-webkit-transition-duration: 0.4s;
-MOZ-TRANSITION-DURATION: 0.4S;
-
dt {
แสดง: ไม่มี;
ระยะขอบด้านบน: -25px;
Padding-Top: 15px;
ความสูง: 10px;
-
Li: Hover dt {
แสดง: บล็อก;
-
.darrow {
ลอย: ขวา;
มาร์จิ้น: 18px 10px 0 0;
ความกว้างของชายแดน: 5px;
สีชายแดน: #FFF โปร่งใสโปร่งใส
สไตล์ชายแดน: ของแข็ง;
ความกว้าง: 0;
ความสูง: 0;
ความสูงบรรทัด: 0;
ล้น: ซ่อน;
เคอร์เซอร์: ตัวชี้;
Text -Shadow: 0px -1px 0px #000;
-webkit-Box-Shadow: 0px -1px 0px #000;
-moz-box-shadow: 0px -1px 0px #000;
-
.ARROW {
มาร์จิ้น: 0 อัตโนมัติ;
ระยะขอบด้านบน: -5px;
แสดง: บล็อก;
ความกว้าง: 10px;
ความสูง: 10px;
ความเป็นมา:#222222;
-webkit-transform: หมุน (45deg);
-moz-transform: หมุน (45deg);
-
</style>
</head>
<body>
<av>
<ul>
<li> <a href = "#"> หนึ่งเมนู </a> </li>
<li>
<span> </span>
<a href = "#"> เมนูสอง </a>
<Dl>
<Dt> <span> </span> </dt>
<Dd> <a href = "#"> เมนูย่อยหนึ่ง </a> </dd>
<Dd> <a href = "#"> Submenu 2 </a> </dd>
<Dd> <a href = "#"> เมนูย่อยสามเมนูย่อยสาม </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> เมนูสาม </a>
<Dl>
<Dt> <span> </span> </dt>
<Dd> <a href = "#"> เมนูย่อยหนึ่ง </a> </dd>
<Dd> <a href = "#"> Submenu 2 </a> </dd>
<Dd> <a href = "#"> เมนูย่อยสามเมนูย่อยสาม </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> เมนูสี่ </a>
<Dl>
<Dt> <span> </span> </dt>
<Dd> <a href = "#"> เมนูย่อยหนึ่ง </a> </dd>
<Dd> <a href = "#"> Submenu 2 </a> </dd>
<Dd> <a href = "#"> เมนูย่อยสาม </a> </dd>
<Dd> <a href = "#"> เมนูย่อยสี่ </a> </dd>
</dl>
</li>
<li> <a href = "#"> เมนูห้า </a> </li>
<li> <a href = "#"> men vi </a> </li>
<li> <a href = "#"> เมนูเจ็ด </a> </li>
<li> <a href = "#"> เมนู 8 </a> </li>
</ul>
</av>
</body>
</html>