مؤسسة الشريط العلوي الملاحة
شريط التنقل العلوي على رأس الصفحة:
أمثلة
<الطبقة UL = "عنوان في منطقة ">
<الدرجة لي = "اسم">
<! - إذا كنت لا تحتاج إلى عنوان أو رمز لحذفه ->
<H1> <a أ href = "#"> WebSiteName </ أ> </ H1>
</ لى>
<- زر أضعاف على الشاشة الصغيرة:! إزالة نوع .menu-الرمز، يمكنك إزالة رمز.
إذا كنت تحتاج إلى عرض فقط في الصورة، يمكنك حذف "القائمة" نص ->
<لى الطبقة = "تبديل-topbar القائمة رمز"> <a أ href = "#"> <SPAN> القائمة </ SPAN> </ أ> </ لى>
</ UL>
<القسم الطبقة = "أعلى شريط -section">
<الطبقة UL = "اليسار">
<لى الطبقة = "النشط"> <a أ href = "#"> الرئيسية </ أ> </ لى>
<لي> <a أ href = "#"> صفحة 1 </ أ> </ لى>
<لي> <a أ href = "#"> صفحة 2 </ أ> </ لى>
<لي> <a أ href = "#"> صفحة 3 </ أ> </ لى>
</ UL>
</ القسم>
</ التنقل>
<! - مؤسسة تهيئة JS ->
<script>
$ (الوثيقة) .ready (وظيفة () {
$ (الوثيقة) .foundation ()؛
})
</ script>
محاولة »
أمثلة تحليلية
استخدام <nav class="top-bar" data-topbar> "، topbar البيانات> اصنع شريط الأدوات القياسي. .title-area وتعرف الطبقة منطقة شعار الموقع (يجب منع li.name في الداخل). بعد الشاشة الصغيرة يمكنك ان ترى زر "القائمة". مؤسسة القائمة وفقا لحجم الشاشة مددت تلقائيا الشراب للطي:
على الشاشة الصغيرة، بسبب حجم العديد من الخيارات سوف تكون مخفية. li.toggle-topbar menu.icon الطبقة يخلق زر القائمة، انقر فوقه لإظهار الخيارات المخفية.
؟ تلميح: إعادة تعيين نافذة المتصفح الخاص بك لمعرفة تأثير.
.top-bar-section يحدد الملاحة القسم يربط. .left تحدد درجة الارتباط ترك الانحياز. .active يستخدم فئة لعرض العناصر المحددة، على خلفية زرقاء.
نصيحة: إذا كنت ترغب في حق محاذاة ارتباطات التنقل يمكن أن يكون .left تعديل .right :
يمكنك أيضا تعيين محاذاة اليسار محاذاة مع الحق:
أمثلة
<الطبقة UL = "اليسار">
<لى الطبقة = "النشط"> <a أ href = "#"> الرئيسية </ أ> </ لى>
<لي> <a أ href = "#"> صفحة 1 </ أ> </ لى>
<لي> <a أ href = "#"> صفحة 2 </ أ> </ لى>
</ UL>
<الطبقة UL = "حق">
<لي> <a أ href = "#"> اشترك </ أ> </ لى>
<لي> <a أ href = "#"> تسجيل الدخول </ أ> </ لى>
</ UL>
</ القسم>
محاولة »
شريط التنقل بواسطة .divider لإضافة خطوط الطبقة الفاصل (خطوط عمودية على الشاشة الكبيرة، الشاشة الصغيرة هو خط أفقي):
أمثلة
<لى الطبقة = "النشط"> <a أ href = "#"> الرئيسية </ أ> </ لى>
<لى الطبقة = "المفرق"> </ لى>
<لي> <a أ href = "#"> صفحة 1 </ أ> </ لى>
<لى الطبقة = "المفرق"> </ لى>
<لي> <a أ href = "#"> صفحة 2 </ أ> </ لى>
<لى الطبقة = "المفرق"> </ لى>
<لي> <a أ href = "#"> صفحة 3 </ أ> </ لى>
<لى الطبقة = "المفرق"> </ لى>
</ UL>
محاولة »
المنسدلة شريط التنقل القائمة
يمكنك تعيين شريط التنقل في الجزء العلوي من القائمة المنسدلة.
من قبل <li> يتم إضافة عنصر .has-dropdown فئة لتعيين القائمة المنسدلة:
أمثلة
<الطبقة UL = "اليسار">
<لى الطبقة = "النشط"> <a أ href = "#"> الرئيسية </ أ> </ لى>
<الدرجة لي = "له، المنسدلة ">
<A أ href = "#"> منسدلة </ A>
<الطبقة UL = "المنسدلة">
<لي> <a أ href = "#"> الارتباط الأول في القائمة المنسدلة </ أ> </ لى>
<لي> <a أ href = "#"> الرابط الثاني في القائمة المنسدلة </ أ> </ لى>
<لى الطبقة = "النشط"> <a أ href = "#"> صلة النشيطين في القائمة المنسدلة </ أ> </ لى>
</ UL>
</ لى>
</ UL>
</ القسم>
محاولة »
الخط الفاصل
استخدام .divider فئة لتعيين القائمة المنسدلة الخط الفاصل:
أمثلة
<لي> <a أ href = "#"> أبل </ أ> </ لى>
<لي> <a أ href = "#"> الموز </ أ> </ لى>
<لي> <a أ href = "#"> البرتقال </ أ> </ لى>
<لى الطبقة = "المفرق"> </ لى>
<لي> <a أ href = "#"> كالي </ أ> </ لى>
<لي> <a أ href = "#"> السبانخ </ أ> </ لى>
</ UL>
المنسدلة تسمية القائمة
في <li> ضمن إضافة <label> عنصر لضبط تسمية (العنوان) القائمة المنسدلة:
أمثلة
<لي> <التسمية> الفاكهة < / التسمية> </ لى>
<لي> <a أ href = "#"> أبل </ أ> </ لى>
<لي> <a أ href = "#"> الموز </ أ> </ لى>
<لي> <a أ href = "#"> البرتقال </ أ> </ لى>
<لى الطبقة = "المفرق"> </ لى>
<لي> <التسمية> خضروات < / التسمية> </ لى>
<لي> <a أ href = "#"> كالي </ أ> </ لى>
<لي> <a أ href = "#"> السبانخ </ أ> </ لى>
</ UL>
جزءا لا يتجزأ من القائمة المنسدلة
القائمة المنسدلة يمكن أن تكون جزءا لا يتجزأ في القائمة المنسدلة:
أمثلة
<الطبقة UL = "اليسار">
<الدرجة لي = "له، المنسدلة ">
<A أ href = "#"> منسدلة </ A>
<الطبقة UL = "المنسدلة">
<لي> <التسمية> مستوى 1 </ التسمية> </ لى>
<لي> <a أ href = "#"> رابط </ أ> </ لى>
<لي> <a أ href = "#"> رابط </ أ> </ لى>
<الدرجة لي = "له، المنسدلة ">
<A أ href = "#"> المنسدلة جديدة </ A>
<الطبقة UL = "المنسدلة">
<لي> <التسمية> المستوى 2 </ التسمية> </ لى>
<لي> <a أ href = "#"> 2nd المستوى القائمة المنسدلة </ أ> </ لى>
<لي> <a أ href = "#"> 2nd المستوى القائمة المنسدلة </ أ> </ لى>
<الدرجة لي = "له، المنسدلة ">
<A أ href = "#"> المنسدلة جديدة </ A>
<الطبقة UL = "المنسدلة">
<لي> <التسمية> مستوى 3 </ التسمية> </ لى>
<لي> <a أ href = "#"> 3RD مستوى المنسدلة </ أ> </ لى>
<لي> <a أ href = "#"> 3RD مستوى المنسدلة </ أ> </ لى>
</ UL>
</ لى>
</ UL>
</ لى>
</ UL>
</ لى>
</ UL>
</ القسم>
محاولة »
القابلة للنقر عليها
افتراضيا، القائمة المنسدلة في شريط التنقل لتحريك الماوس فوق الشاشة، يمكننا استخدام data-options="is_hover: false" " سمة لضبط يتم عرض شريط التنقل عند النقر على الماوس:
الأزرار والأيقونات على شريط التنقل
يمكنك وضع الرموز على شريط التنقل والأزرار:
يمكنك وضع الرمز في شريط التنقل، يمكنك مشاهدة المزيد من الصور نمط مؤسسة أيقونة البرنامج التعليمي :
أمثلة
<! - مؤسسة أسلوب الرمز ->
<وصلة يختلط = "أنماط" أ href = "http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
</ رئيس>
<الطبقة UL = "اليسار">
<لى الطبقة = "النشط"> <a أ href = "#"> <ط الطبقة = "فاي في المنزل"> </ I> الصفحة الرئيسية </ أ> </ لى>
<لي> <a أ href = "#"> <ط الطبقة =" فاي الجذع "> </ I> اشترك </ أ> </ لى>
<لي> <a أ href = "#"> <ط الطبقة =" فاي-مكبرة من الزجاج "> </ I> البحث </ أ> </ لى>
</ UL>
محاولة »
الملاحة ثابت
يمكن ان تكون ثابتة شريط التنقل في أعلى الصفحة.
انتقل شريط التنقل الصفحة في أعلى لا يتحرك.
لإصلاح شريط التنقل فقط إلى شريط التنقل على <div class="fixed"> داخل ل:
أمثلة
<التنقل الطبقة = "أعلى شريط " البيانات topbar>
...
</ التنقل>
</ div>
محاولة »
شريط التنقل المواقع المطلق
يمكننا وضع شريط التنقل <div class="sticky"> في شريط التنقل لتحديد المواقع المطلق، عندما شريط التمرير للفة في المنطقة، شريط الملاحة وثابت كما في شريط التنقل في الجزء العلوي لا يتحرك:
أمثلة
<التنقل الطبقة = "أعلى شريط " البيانات topbar>
...
</ التنقل>
</ div>
محاولة »
عند استخدام .sticky الطبقة، شريط التنقل العلوي ثابتة وإرادة في جميع الأحجام الشاشة. إذا كنت بحاجة إلى تحديد الإعدادات على الشاشة فقط في <nav> السابق data-options="sticky_on: small|medium|large" | المتوسطة | الكبيرة" الملكية:
أمثلة
<! - فقط على الشاشة الكبيرة ->
<التنقل الطبقة = "أعلى شريط "، topbar البيانات خيارات البيانات = "sticky_on: كبير">
..
</ التنقل>
</ div>
أو عن طريق مجموعة من عدد وافر من حجم الشاشة:
أمثلة
<! - الشاشة الصغيرة والشاشة الكبيرة (أي منتصف الشاشة) ->
<التنقل الطبقة = "أعلى شريط "، topbar البيانات خيارات البيانات = "sticky_on: [صغيرة وكبيرة]">
..
</ التنقل>
</ div>