التعليق: غالبًا ما أواجه التنقل المنسدلة عند تصفح صفحات الويب. أتذكر أنني اعتدت تنفيذها باستخدام JS. ومع ذلك ، فإن ما سأقدمه التالي في هذه المقالة هو تنفيذها باستخدام CSS3+HTML5. إذا كنت مهتمًا ، فلا تفوت ذلك. آمل أن يكون من المفيد لك أن تتعلم CSS3 بعد قراءته.
العروض كما يلي:الرمز كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title> Pure HTML+CSS Navigation </title>
<!-مولدر->
<!-QQ: 10221408->
<!-دعم Chrome Firefox فقط->
<style>
*{
الهامش: 0 ؛
الحشو: 0 ؛
}
.Clear: بعد {
واضح: كلاهما ؛
محتوى: "."؛
العرض: كتلة ؛
الارتفاع: 0 ؛
الرؤية: مخفية ؛
}
تبحر {
العرض: كتلة مضمنة.
الحدود: 1 بكسل Solid #505255 ؛
Border-Bottom: 1px Solid #282C2F ؛
-Moz-Border-Radius: 5px ؛
-webkit-border-Radius: 5px ؛
الهامش: 50 بكسل ؛
-webkit-box-shadow: 1px 1px 3px #292929 ؛
-moz-box-shadow: 1px 1px 3px #292929 ؛
}
لي {
على غرار القائمة: لا شيء ؛
تعويم: اليسار.
اليمين الحدودي: 1 بكسل Solid #2E3235 ؛
الموقف: قريب
/*الخلفية: -Moz-Liner-Radient (TOP ، #FFF ، #555D5F 2 ٪ ، #555D5F 50 ٪ ، #3E4245 100 ٪) ؛
الخلفية: -webkit-regient (خطي ، 0 0 ، 0 100 ٪ ، من (#ffff) ، توقف اللون (2 ٪ ، #555d5f) ، سترول اللون (50 ٪ ، #555d5f) ، إلى ( #3e4245)) ؛*///
الخلفية:#555D5F ؛
}
لي: تحوم {
/*الخلفية: -Moz-Liner-Radient (TOP ، #FFF ، #3E4245 2 ٪ ، #555D5F 80 ٪ ، #555D5F 100 ٪) ؛
الخلفية: -webkit-regient (خطي ، 0 0 ، 0 100 ٪ ، من (#ffff) ، توقف اللون (2 ٪ ، #3E4245) ، توقف اللون (80 ٪ ، #3E4245) ، إلى ( #555d5f)) ؛*///
الخلفية:#3E4245 ؛
-انتقال الأوز: خلفية 1S سهولة ؛
-بكيت ترانس: الخلفية 1s سهولة ؛
}
li a {
العرض: كتلة ؛
الارتفاع: 40 بكسل ؛
رفع الخط: 40 بكسل ؛
الحشو: 0 30px ؛
حجم الخط: 12 بكسل ؛
اللون: #ffff ؛
النص الشادو: 0px -1px 0px #000 ؛
تدمير النص: لا شيء ؛
الفضاء الأبيض: Nowrap ؛
الحدود اليسرى: 1 بكسل Solid #999e9f ؛
أعلى الحدود: 1 بكسل Solid #999e9f ؛
-Moz-Border-Top-Left-Radius: 2px ؛
-webkit-border-top-left-radius: 2px ؛
Z-index: 100 ؛
}
li> a {
الموقف: قريب
}
li.first a {
-الزوم براديوس-توبليت: 4 بكسل ؛
-الموز براديوس-بوتومفت: 4 بكسل ؛
-webkit-border-top-left-radius: 4px ؛
-webkit-border-bottom-left-radius: 4px ؛
}
li.last {
يمين الحدود: 0 لا شيء ؛
}
DL {
الموقف: مطلق ؛
العرض: كتلة ؛
أعلى: 40 بكسل ؛
اليسار: -25 بكسل ؛
العرض: 165 بكسل ؛
الخلفية:#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 {
أعلى: 50 بكسل ؛
العرض: كتلة ؛
العرض: 145 بكسل ؛
الحشو: 10 بكسل ؛
}
DL A {
الخلفية: شفافة.
الحدود: 0 لا شيء ؛
-Moz-Border-Radius: 5px ؛
-webkit-border-Radius: 5px ؛
-الموز ترانس: الخلفية 0.5s سهولة ؛
-الويبكيت الانتقال: خلفية 0.5s سهولة ؛
Z-index: 50 ؛
}
DL A: Hover {
اللون: #fff ؛
الخلفية:#999e9f ؛
-انتقال الأوز: الخلفية 0.3s سهولة في الخارج ، لون 0.3s بسهولة ؛
-الويبكيت ترانس: الخلفية 0.3s سهلة ، اللون 0.3S بسهولة ؛
}
DD {
الهامش: -40 بكسل ؛
العتامة: 0 ؛
العرض: 145 بكسل ؛
-webkit-transition-property: All ؛
بر
-الموز ترانسور-الممتلك: الكل ؛
بر
/*-WebKit-Transition-Delay: 5S ؛
-الموز ترانس لاي: 5S ؛*/
}
لي: تحوم dd {
الهامش: 0 ؛
العتامة: 1 ؛
}
li dd: nth-child (1) {
-بكيت الانتقال المدة: 0.1S ؛
-Moz الانتقال المدة: 0.1S ؛
}
li dd: nth-child (2) {
-بكيت الانتقال المدة: 0.2S ؛
-Moz الانتقال المدة: 0.2S ؛
}
li dd: nth-child (3) {
-بكيت الانتقال مدة: 0.3S ؛
-Moz الانتقال المدة: 0.3S ؛
}
li dd: nth-child (4) {
-بكيت الانتقال المدة: 0.4S ؛
-Moz-stransition مدة: 0.4S ؛
}
dt {
العرض: لا شيء ؛
الهامش: -25 بكسل ؛
حشو أعلى: 15 بكسل ؛
الارتفاع: 10 بكسل ؛
}
LI: Hover DT {
العرض: كتلة ؛
}
.darrow {
تعويم: صحيح.
الهامش: 18px 10px 0 0 ؛
عرض الحدود: 5px ؛
اللون الحدودي: #FFF شفاف شفاف شفاف ؛
على غرار الحدود: صلبة.
العرض: 0 ؛
الارتفاع: 0 ؛
Line-Leight: 0 ؛
الفائض: مخفي.
المؤشر: مؤشر.
النص الشادو: 0px -1px 0px #000 ؛
-webkit-box-shadow: 0px -1px 0px #000 ؛
-moz-box-shadow: 0px -1px 0px #000 ؛
}
.سهم{
الهامش: 0 Auto ؛
الهامش: -5px ؛
العرض: كتلة ؛
العرض: 10px ؛
الارتفاع: 10 بكسل ؛
الخلفية:#222222 ؛
-webkit-transform: تدوير (45deg) ؛
-moz-transform: rotate (45deg) ؛
}
</style>
</head>
<body>
<v>
<ul>
<li> <a href = "#"> قائمة واحدة </a> </li>
<li>
<span> </span>
<a href = "#"> قائمة اثنين </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> menu one </a> </dd>
<dd> <a href = "#"> menu 2 </a> </dd>
<dd> <a href = "#"> Menuu Three Submenu Three </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> قائمة ثلاثة </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> menu one </a> </dd>
<dd> <a href = "#"> menu 2 </a> </dd>
<dd> <a href = "#"> Menuu Three Submenu Three </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> القائمة أربعة </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> menu one </a> </dd>
<dd> <a href = "#"> menu 2 </a> </dd>
<dd> <a href = "#"> Menu Three </a> </dd>
<dd> <a href = "#"> menu four </a> </dd>
</dl>
</li>
<li> <a href = "#"> القائمة Five </a> </li>
<li> <a href = "#"> men vi </a> </li>
<li> <a href = "#"> القائمة سبعة </a> </li>
<li> <a href = "#"> القائمة 8 </a> </li>
</ul>
</nav>
</body>
</html>