یک برنامه نویس وب - قالب بلاگ بیان

آموزش برنامه نویسی وب ، دانلود رایگان قالب بلاگ بیان ، میهن بلاگ و وردپرس، دانلود برترین آهنگ

یک برنامه نویس وب - قالب بلاگ بیان

آموزش برنامه نویسی وب ، دانلود رایگان قالب بلاگ بیان ، میهن بلاگ و وردپرس، دانلود برترین آهنگ

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

  • ج . محمد

css3

html menu

html5

منوی وبسایت

نظرات (۱)

عالی بود
فقط میشه مثلا یاد بدی چیکار کنیم که وقتی رفتیم روی نمونه کار ها یه منوی دیگه باز بشه بنویسه (بنر،هدر،قالب و..)
پاسخ:
مرسی از حضورت ! 
چشم اونم میذارم ! فک کنم اونو تو یه مطلب جدا بگم بهتره تا اینجا.

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
تجدید کد امنیتی
یک برنامه نویس وب - قالب بلاگ بیان

محمد جمال زاده هستم یک برنامه نویس وب! علاقه بسیاری زیادی به یادگرفتن فریم ورک های جدید و بخصوص فریم ورک های هایبریدی یا ( Cross Platform) دارم و از کدنویسی لذت خاصی میبرم! به هیچ وج از کدنویسی خسته نخواهم شد! فریلنسری و دور کاری را بیشتر از کار تمام وقت دوست دارم باعث میشه ایده های مختلف روبه رو بشی! کارهای متفاوت انجام بدی !

آخرین نظرات