سلام ، امروز فایل html5 و css منو سایت که در این پست طراحی کردم رو براتون آماده کردم و آموزششو براتون میذارم.
اول ساختار منوی سایت خودمون رو کدنویسی میکنیم. (فایل html)
<nav id="jamo-navigation">
<ul id="menu">
<li class="selected"><a href="#">صفحه نخست</a></li>
<li><a href="#">نمونه کارهام</a></li>
<li><a href="/">وبلاگ</a></li>
<li><a href="/">درباره ی من</a></li>
<li><a href="/">تماس </a></li>
</ul>
</nav>
ساختار منوی مان کامل شد تنها تگی که شاید ناآشنا باشد تگ NAV هستش ! این تگ html5 هستش (نسخه جدید html) که برای ایجاد منو بکار میره!، چند نکته در مورد css بگم ، یه سری تگ ها هستن که خود مرورگرها براشون یه استایل پیش فرض دارن ؛ مثلا دادن خط زیرین به لینک ها ! توی آموزش ساخت منوی سایت تگ های ul, li,a و body هستن که باید مقدار پیش فرض ها اون ها رو خودمون تعیین کنیم. چجوری ؟ خودمون به اون خصوصیات که مرورگر مقدار پیش فرض میده رو بهشون مقدار میدهیم.خب با کد بگم بهتره!
body{ margin:0; }
a{ text-decoration:none; }
ul, li{ list-style: none; margin:0; padding:0 }
خب حالا دیگه به منوی سایتمون استایل میدهیم.آموزش سی اس اس.
استایل باکس یا بلوکی که منو توش قرار داره. تگ nav
nav#jamo-navigation{
background-color: rgba();
margin:0 auto;
border-radius:2px;
box-shadow: inset 0 0 5px #1F1F1F;
pading:4px;
}
استایل اینم لیست منو ؛ li
ul#menu li{
background-image: url(menu-bg.jpg);
background-repeat: repeat-x;
background-size: contain;
margin: 8px 2px;
box-shadow: 1px 1px 2px #1d1d1d;
padding: 5px 10px;
border-radius: 2px;
}
استایل وقتی که ماوس رو منو میاد؛ li:hover
ul#menu li:hover{
background-image: url(menu-hover-bg.jpg);
}
این قسمت برای وقتی که ماوس رو لینک میاد ، رنگ لینک تغییر کنه
ul#menu li:hover a{
color:#eef2f5;
}
استایل دادن به متن لینک منوها . li a
ul#menu li a{
color: #9fa8b0;
}
امیدوارم براتون مفید باشه و کاربردی. نظر یادتون نره ؛ اگه خوشتون اومد به دوستان پیشنهاد کنید.
دانلود فایل ها حجم 2.4 کیلوبایت