الشريط الجانبي مؤسسة
الملاحة الشريط الجانبي
استخدام مؤسسة <ul class="side-nav"> "> لإنشاء الشريط الجانبي:
أمثلة
<الطبقة UL = "جنبا إلى الملاحة ">
<لي> <a أ href = "#"> رابط 1 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 2 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 3 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 4 </ أ> </ لى>
</ UL>
<لي> <a أ href = "#"> رابط 1 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 2 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 3 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 4 </ أ> </ لى>
</ UL>
محاولة »
رابط التفعيل مع الخط الفاصل
أنا النقر على الرابط في <li> استخدم .active الطبقة التي تم تحديدها باستخدام .divider فئة لإضافة خط أفقي:
أمثلة
<الطبقة UL = "جنبا إلى الملاحة ">
<لى الطبقة = "النشط"> <a الطبقة = أ href = "a" "#"> رابط 1 </ أ> </ لى>
<لي> <a الطبقة = "a" أ href = "#"> رابط 2 </ أ> </ لى>
<لى الطبقة = "المفرق"> </ لى>
<لي> <a الطبقة = "a" أ href = "#"> رابط 3 </ أ> </ لى>
<لي> <a الطبقة = "a" أ href = "#"> رابط 4 </ أ> </ لى>
</ UL>
<لى الطبقة = "النشط"> <a الطبقة = أ href = "a" "#"> رابط 1 </ أ> </ لى>
<لي> <a الطبقة = "a" أ href = "#"> رابط 2 </ أ> </ لى>
<لى الطبقة = "المفرق"> </ لى>
<لي> <a الطبقة = "a" أ href = "#"> رابط 3 </ أ> </ لى>
<لي> <a الطبقة = "a" أ href = "#"> رابط 4 </ أ> </ لى>
</ UL>
محاولة »
الشريط الجانبي الشبكة
يمكننا استخدام وضع تصميم الشبكة لتعيين شريط التنقل الموجود على الجانب، والأمثلة على النحو التالي:
أمثلة
<فئة الدرجة = "الصف">
<div الطبقة = "متوسطة 4 أعمدة" على غرار = "لون الخلفية: # f1f1f1؛">
<الطبقة UL = "جنبا إلى الملاحة ">
<لى الطبقة = "النشط"> <a أ href = "#"> الرئيسية </ أ> </ لى>
<لي> <a أ href = "#"> تعلم HTML </ أ> </ لى>
...
</ UL>
</ div>
<فئة الدرجة = "متوسطة 8 أعمدة">
<H1> جانبية التنقل </ H1 >
<P> بعض النص .. </ P>
...
</ div>
</ div>
<div الطبقة = "متوسطة 4 أعمدة" على غرار = "لون الخلفية: # f1f1f1؛">
<الطبقة UL = "جنبا إلى الملاحة ">
<لى الطبقة = "النشط"> <a أ href = "#"> الرئيسية </ أ> </ لى>
<لي> <a أ href = "#"> تعلم HTML </ أ> </ لى>
...
</ UL>
</ div>
<فئة الدرجة = "متوسطة 8 أعمدة">
<H1> جانبية التنقل </ H1 >
<P> بعض النص .. </ P>
...
</ div>
</ div>
محاولة »