ساخت منو در css مبحث مقاله امروز ما می باشد که در این مقاله و مقاله های بعدی یاد می گیریم که چگونه به منوهایی افقی و عمودی که می سازیم، استایل دلخواهمان را بدهیم.
استفاده راحت و آسان از نوار منو (navigation bar) برای هر وبسایتی ضروری است. با استفاده از CSS می توانید منوهای خسته کننده ای که با استفاده از HTML ساخته اید را جذاب کنید.
ساخت منو در css = لیستی از لینک ها
یک نوار منو به عنوان پایه و اصل، نیاز به HTML استاندارد دارد. در مثال زیر ما با استفاده از لیست استانداردی از HTML و با به کار بردن المان های <li> و <ul> نوار پیمایش را ایجاد کرده ایم.
<ul> <li><a href="#home">Home</a></li>http://html <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>
که به صورت زیر نمایش داده می شود:
حال اگر بخواهیم بالت ها، خط زیرین و margin و padding را برداریم، به صورت زیر عمل می کنیم:
ul {
list-style-type: none;
text-decoration:none;
margin: 0;
padding: 0;
}
که نتیجه به صورت زیر می شود:
که توضیح آن بدین صورت می باشد:
- برای برداشتن خط زیرین
text-decoration:none;می نویسیم. - برای برداشتن بالت ها
list-style-type: none;می نویسیم.
کدی که در مثال بالا دیدیم، کد استانداردی است که در منوهای افقی و عمودی استفاده می شود. در درس های بعدی ساخت نوار منو در css را به تفکیک افقی و عمودی توضیح می دهیم.
دیدگاه بگذارید