عرض: الإنتقال البارات
عمودي
أشرطة التنقل
من سهولة الاستخدام والتنقل المهم بالنسبة لأي موقع على شبكة الإنترنت.
مع 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;- عناصر كتلة يستغرق العرض الكامل متوفر بشكل افتراضي. نريد أن تحديد عرض 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;
} انها محاولة لنفسك » نشط / الحالي للملاحة وصله
إضافة فئة "نشطة" الى الارتباط الحالي للسماح للمستخدم معرفة الصفحة التي هو / هي على:
مركز وصلات واضافة حدود
إضافة text-align:center ل <li> أو <a> لتوسيط الروابط.
إضافة border الملكية ل <ul> إضافة الحدود حول الناف بار. إذا كنت تريد أيضا الحدود داخل نافبار، إضافة border-bottom لجميع <li> العناصر، باستثناء واحد آخر:
مثال
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} انها محاولة لنفسك » كامل ارتفاع ثابت عمودي نافبار
إنشاء الطول الكامل، "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;- عرض الروابط كعناصر كتلة يجعل كله نقر منطقة صلة (وليس فقط النص)، ويسمح لنا لتحديد الحشو (و 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> لإنشاء فواصل الرابط:
مثال
/* 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;
} انها محاولة لنفسك » ثابت بار الإنتقال
جعل الإقامة شريط التنقل في أعلى أو أسفل الصفحة، حتى عندما تمرير المستخدم في الصفحة:
ملاحظة: هذه الأمثلة قد لا تعمل بشكل صحيح على الأجهزة النقالة.
الرمادي أفقي نافبار
مثال على شريط التنقل الأفقي الرمادي مع الحدود رمادي رقيقة:
مثال
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
انها محاولة لنفسك » 
المزيد من الأمثلة
Topnav استجابة
كيفية استخدام CSS3 استفسارات وسائل الإعلام لخلق التنقل العلوي استجابة.
Sidenav استجابة
كيفية استخدام CSS3 استفسارات وسائل الإعلام لخلق التنقل الموجود على الجانب متجاوبة.
المنسدلة نافبار
كيفية إضافة قائمة منسدلة داخل شريط التنقل.