آموزش ساخت منو دو لول

[css-man]

سلام دوستان این آموزش رو میزارم برای ساخت منو توضیح هم میدم در موردش امیدوارم بدرد دوستان بخوره

برای جا افتادن بعضی موارد سی اس اس هم بد نیست

[css-man]

برای اینکاراول یه ulایجاد میکنیم که همه منوها توی اون قرار میگیرن یه کلاس هم براش تعریف می کنیم


برای ایجاد منو از تگهای ul و li بصورت تو در تو استفاده کنیم

در واقع هر li یکی ز گرینه های منو هست





<ul class="menubox">
<li>
<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>

[css-man]

این ساختار کلی سطح اول منو های ما هست که باید با کمک css ظاهرش رو درست کنیم

تا اینجا احتما لا شما چند تا عنوان دارید که زیر هم و احتمالا گوشه ای از مانیتور خیلی زشت قرار گرفتن

اولین بخشی که باید درست بشه تگ ul هست که همه منو ها در اون قرار گرفتن


width:960px;
height:50px;
list-style-type:none;
direction:rtl;
margin:0 auto;
background: rgb(237,28,36); /* Old browsers */
background: -moz-linear-gradient(top, rgba(237,28,36,1) 0%, rgba(138,6,11,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,28,36,1)), color-stop(100%,rgba(138,6,11,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(237,28,36,1) 0%,rgba(138,6,11,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(237,28,36,1) 0%,rgba(138,6,11,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(237,28,36,1) 0%,rgba(138,6,11,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(237,28,36,1) 0%,rgba(138,6,11,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#8a060b',GradientType=0 ); /* IE6-9 */
margin: 0 auto;
border-radius:5px
}






این کد سی اس اس مربوط به این تگ هست

همونطور که میدونید خصیصه width عرض ul رو مشخص میکنه که من روی 960 تنظیمش کردم

مشخصا height هم ارتفاع اون رو مشخص میکنه که روی 50 px تنظیم شده

خصیصه margin فاصله هر تگ رو با تگهای اطرافش مشخص میکنه

و برای هر جهت یه عددی رو قبول میکنه



margin-top
margin-right
margin-bottom
margin-left

margin:


برای استفاده از این خصیصه روش های مختلفی وجود داره

چهار تای اول که مشخصه فاصله از بالا راست پائین و چپ رو مشخص می کنن

که مطابق نیاز می تونید از هرکدوم که میخواهید استفاده کنید

اگر این خصیصه به شکل زیروارد بشه عددی که بهش میدید برای هر 4 جهت استفاده میشه




margin:20px;




در این روش تگ ما از هر 4 طرف به اندازه 20 پیکسل فاصله میگیره


اما برای اینکه تگ ما دقیقا وسط صفحه قرار بگیره به شکل زیر از این خصیصه استفاده میکنید





margin: 0 auto;




در روش بالا عدد 0 برای بالا و پائین در نظر گرفته میشه و auto برای دو طرف تگ به این شکل تگ فاصلش از بالا و پائین 0 هست و لی از چپ و راست بصورت اوتوماتیک با مانیتور تنظیم میشه و همیشه در وسط قرار میگیره .


اگر دقت کرده باشید وقتی از تگ ul استفاده میکنید و داخل اون از تگ li کنار هر li یه نقطه سیاه ایجاد میشه

برای اینکه اون نقطه ها از بین برن از خصیصه زیر با مقدار none استفاده میکنیم




list-style-type:none;

[css-man]

مشخصه بعدی border-radius هست که کارش گرد کردن طراف تگ ها هست

بخش بعدی direction هست که برای متون چپ چین از ltr و برای متون راست چین از rtl استفاده میشه

بقیه کد برای ایجاد گرادیانت هست که میتونید از سایت زیر برای نوشتن اون استفاده کنید این سایت کد رو به شکل بهینه و طوری که با اکثر مرورگر ها همخونی داشته باشه تولید مینه


http://www.colorzilla.com/gradient-editor/


ادامه دارد...

[tekide]

ببخشید بابت اسپم اما عکس ضمینه میکردید بهتر بود

[css-man]

امشب که قراره ادامه آموزش رو بنویسم عکس هم قرار میدم