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

آموزش ساخت منو با 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 کیلوبایت

نظرات۱

  1. http://beshkani.blog.ir

    الیاس بشکنی

    عالی بود
    فقط میشه مثلا یاد بدی چیکار کنیم که وقتی رفتیم روی نمونه کار ها یه منوی دیگه باز بشه بنویسه (بنر،هدر،قالب و..)
  2. author

    پاسخ

    مرسی از حضورت ! 
    چشم اونم میذارم ! فک کنم اونو تو یه مطلب جدا بگم بهتره تا اینجا.

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی