آموزش ساخت منو با html5 و css3

سلام ، امروز فایل 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 کیلوبایت