با سلام خدمت شماوب مستران عزیز و هنرمند ، بااموزشی دیگر در زمینه css درخدمت شماهستیم امروز در مورد navigation کمی توضیح میدم امیدوارمکه براتون مفید باشه.
داشتن نوار پیمایش که استفاده از آن آسان باشد، برای هر وب سایتی مهم است.
با CSS می توان منوهای کسل کننده HTML را تبدیل به نوارهای پیمایش زیبا و جذاب کرد.
نوار پیمایش – لیست لینک ها
نوار پیمایش نیاز به HTML استاندارد بعنوان پایه اش دارد.
ما در مثال هایمان، نوار پیمایش را از روی لیست استاندارد HTML می سازیم.
اساساً نوار پیمایش لیستی از لینک هاست که استفاده از این عنصرها بسیار مناسب است:
نمونه یک
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
<ul>
<li><a href=”default.asp”>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>
حالا بیایید bulletها و marginها و padding را از لیست حذف کنیم:
نمونه دو
?
۱
۲
۳
۴
۵
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
مثال بالا توضیح می دهد:
list-style-type:none — بولت ها را حذف می کند. نوار پیمایش نیاز به لیستmarker ها ندارد.
تنظیم marginها و padding روی ۰، تنظیمات پیش فرض مرورگر را حذف می کند.
کد موجود در مثال بالا، کدی استاندارد است که هم در نوارهای پیمایش افقی و هم عمودی بکار می رود.
نوار پیمایش عمودی
برای ساختن نوار پیمایش عمودی، فقط به استایل کردن عنصرها نیاز داریم، بعلاوه کد بالا:
نمونه سه
?
۱
۲
۳
۴
a {
display: block;
width: 60px;
}
مثال بالا توضیح می دهد:
display:block — لینک ها را بصورت عنصرهای block نمایش می دهد و کل ناحیه لینک را قابل کلیک می کند.
width:60px — عنصرهای block، کل پهنای موجود پیش فرض را اشغال می کند. ما قصد داریم px 60 پهنا تعیین کنیم.
نکته مهم: همیشه پهنای عنصرها را در نوار پیمایش عمودی تعیین کنید.اگر پهنا را حذف کنید، IE می تواند نتایج غیر منتظره ای تولید کند.
نوار پیمایش افقی
دو راه برای ایجاد نوار پیمایش افقی وجود دارد. استفاده از list itemهای inline و floating.
هر دو متد بخوبی کار می کند، اما اگر می خواهید لینک ها دارای یک سایز باشند، باید از متد floating استفاده کنید.
List Itemهای Inline
یک راه ساختن نوار پیمایش افقی، تعیین عنصرها بصورت inline است، بعلاوه کدهای استاندارد بالا:
نمونه چهار
?
۱
۲
۳
li{
display:inline;
}
مثال بالا توضیح می دهد که:
display:inline — بطور پیش فرض ، عنصرهایی block هستند. در اینجا ما break های خط را قبل و بعد از هر list item حذف می کنیم تا آنها را روی یک خط نمایش دهیم.
list itemهای Floating
در مثا بالا، لینک ها پهناهای متفاوتی دارند.برای همه لینک هایی که قر ار است پهنای مساوی داشته باشند، عنصر را حرکت دهید و پهنایی بر ای عنصرتعیین کنید:
نمونه پنج
?
۱
۲
۳
۴
۵
۶
۷
۸
li{
float: left;
}
a{
display: block;
width: 60px;
}
مثال بالا نوضیح داد که:
float:left — از float بر ای حرکت دادن عنصرهای block در کنار یکدیگر استفاده کنید
display:block — لینک ها را بصورت عنصرهایی نمایش می دهد که کل ناحیه لینک را قابل کلیک می کند، و به ما اجازه تعیین پهنا را می دهد
width:60px— از انجاییکه عنصرهای block، کل پهنای موجود را اشغال می کنند، نمی توانند در کنار هم حرکت کنند. ما پهنای لینک ها را px60 تعیین می کنیم.
