شريط التنقل العمودي CSS
شريط التنقل العمودي
لإنشاء شريط تنقل عمودي ، يمكنك تصميم <a> عناصر داخل القائمة ، بالإضافة إلى الكود من الصفحة السابقة:
مثال
li a
{
display: block;
width: 60px;
}
شرح المثال:
display: block;- عرض الروابط كعناصر كتلة يجعل منطقة الارتباط بأكملها قابلة للنقر (وليس النص فقط) ، ويسمح لنا بتحديد العرض (والحشو ، والهامش ، والارتفاع ، وما إلى ذلك إذا كنت تريد)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 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
رابط التنقل النشط / الحالي
أضف فصل دراسي "نشط" إلى الرابط الحالي للسماح للمستخدم بمعرفة الصفحة التي يتواجد فيها:
مثال
.active {
background-color: #04AA6D;
color: white;
}
ارتباطات المركز وإضافة حدود
أضف text-align:centerإلى <li> أو <a> لتوسيط الروابط.
أضف borderالخاصية إلى <ul> لإضافة حد حول شريط التنقل. إذا كنت تريد أيضًا حدودًا داخل شريط التنقل ، فأضف a border-bottomإلى جميع العناصر <li> ، باستثناء العنصر الأخير:
مثال
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
شريط التنقل العمودي الثابت ذو الارتفاع الكامل
إنشاء تنقل جانبي "ثابت" بارتفاع كامل:
مثال
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 */
}
ملاحظة: قد لا يعمل هذا المثال بشكل صحيح على الأجهزة المحمولة.