آموزش قدم به قدم طراحی منو افقی با استفاده از CSS .
برای طراحی این منو از unordered list (لیست نامرتب) استفاده کردم، Unordered list با تگ <ul> شروع می شه و هر لیست هم با تگ <li> شروع میشه.
به نمونه توجه کنید:
کد:
<ul>
<li>یک</li>
<li>دو</li>
<li>سه</li>
</ul>
و به این شکل نمایش داده میشه:
از اونجایی که منو ما افقی هست باید با استفاده از CSS لیست را به صورت افقی تبدیل کنیم:
کد:
li{
display: inline;
}
برای حذف نقطه های سیاه که به اصطلاح بهشون Bullets میگن:
کد:
ul{
list-style: none;
}
و برای حذف فاصله لیست از اطراف از خاصیت CSS زیر استفاده می کنیم که میشه گفت نوعی هک هست، راجب به هک های مرورگر هم بعداً مفصل توضیح میدم:
کد:
*{
margin: 0px;
padding: 0px;
}
خب ما تقریباً خاصیت هامون را بدون استفاده از CLASS یا ID برای مرورگر تعریف کردیم، طراحان وب به این ترتیب خاصیت تگ های پیش فرض HTML را به میل خودشون تغییر می دهند و به اصطلاح بهش CSS Reset میگن.
من کمی خاصیت های پیش فرضمون را تکمیل کردم برای CSS reset:
کد:
/** css-reset **/
*{
margin: 0px; /*فاصله اطراف یک بلوک*/
padding: 0px; /*فاصله داخلی یک بلوک*/
outline: 0px; /*حذف حاشیه اطراف لینک ها*/
}
body{
direction: rtl; /*تغییر جهت نوشتاری از راست به چپ*/
background: #FFF; /*رنگ پس زمینه*/
font-family: Arial, Helvetica, sans-serif; /*نوع فونت*/
}
a{
text-decoration: none; /*حذف خط زیر لینک ها*/
}
ul{
list-style: none; /*حذف bullets*/
}
li{
display: inline-block; /*تغییر لیست به صورت خطی ولی به شکل یک بلوک*/
}
اکنون برای منو ID تعریف میکنیم تا بتونیم خاصیت های مورد نظر را روش اعمال کنیم:
کد:
<ul id="menu">
<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 تعریف میکنیم:
کد:
#menu{
display: block; /*تبدیل به یک بلوک*/
background: #A9DB80; /*رنگ پس زمینه*/
width: 405px; /*عرض*/
height: 30px; /*ارتفاع*/
margin: 15% auto; /*فاصله از اطراف*/
border: 1px solid #68AB30; /*حاشیه بلوک*/
-webkit-border-radius: 5px; /*گرد کردن گوشه های منو برای مرورگر سفری*/
border-radius: 5px; /*گرد کردن گوشه ها برای سایر مرورگرها*/
-webkit-box-shadow: 0px 0px 2px 0px #80CA44; /*سایه اطراف منو برای مرورگر سفری*/
box-shadow: 0px 0px 2px 0px #80CA44; /*سایه اطراف منو برای سایر مرورگرها*/
}
#menu a{ /*خاصیت لینک ها درون منو*/
display: block;
width: 70px;
height: 26px;
padding: 5px 5px 0 5px; /*فاصله از داخل*/
line-height: 20px; /*ارتفاع متن ها*/
color: #4E8325; /*رنگ لینک*/
font-weight: bold; /*درشت کردن متن*/
text-shadow: 0px 1px 0px #D1ECBB; /*سایه اطراف متن*/
}
#menu li{ /*خاصیت لیست های درون منو*/
text-align: center; /*چینش متن در وسط بلوک*/
font-size: 17px; /*اندازه متن*/
border-right: 1px solid #68AB30; /*حاشیه از سمت راست*/
}
#menu li:hover{ /*اگر موس بر روی لیست قرار بگیرد*/
background: #9BD56C; /*تغییر رنگ زمینه*/
height: 30px; /*hover fix*/
}
نقل قول: از خاصیت های border-radius، box-shadow و text-shadow تمام مرورگرهای نسل جدید و فقط اینترنت اکسپلورر 9 به بالا پشتیبانی میکنند.
خب منو ما تکمیل شد اکنون اولین بلوک لیست ما دارای حاشیه از سمت راست می باشد که نیازی به بودنش نیست چون اطراف کل منو دارای حاشیه هست، پس برای اولین <li> یک CLASS تعریف میکنیم تا حاشیه مورد نظر را حذف کنیم:
کد:
<ul id="menu">
<li class="none"><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:
#menu li.none{
border-right: none; /*حذف حاشیه سمت راست*/
}
اکنون منو کاملاً آماده است، اما شاید مایل باشید بعضی از منو ها به صورت بازشو باشند
یا به اصطلاح sub menu داشته باشند!
پس برای اضافه کردن منو بازشو در HTML با استفاده از تگ <div>، اضافه کردن لینک ها و تعریف CLASS شروع میکنیم:
کد:
<ul id="menu">
<li class="none"><a href="#">خـانه</a></li>
<li><a href="#">محصولات</a></li>
<li><a href="#">سفارش</a></li>
<li><a href="#">راهنما</a>
<div class="sub">
<a href="#">راهنمای خرید</a>
<a href="#">راهنمای نصب</a>
<a href="#">قوانین استفاده</a>
</div>
</li>
<li><a href="#">تماس با ما</a></li>
</ul>
منو بازشو باید فقط در صورت بردن موس بر روی منو نمایش داده شود به خاصیت های CSS دقت کنید:
کد:
#menu .sub{
position: absolute;
display: block;
visibility: hidden; /*پنهان کردن منو بازشو*/
background: #A9DB80;
margin: -1px -1px 0 0;
border: 1px solid #68AB30;
-webkit-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
width: 120px;
font-size: 15px;
text-align: right;
}
با خاصیت position:absolute به مرورگر دستور می دهید بلوک مورد نظر شما دقیقاً در جایی که شما تعیین کرده اید قرار بگیرد و عناصر دیگر صفحه تغییری در محل قرارگیری بلوک یاد شده حاصل نکنند.
کد:
#menu li:hover .sub{ /*اگر موس بر روی لیست قرار بگیرد*/
visibility: visible; /*نمایش منو بازشو*/
}
#menu .sub a{ /*لینک های منو بازشو*/
display: inline-block;
width: 110px;
border-top: 1px solid #68AB30; /*حاشیه از بالا*/
}
#menu .sub a:hover{ /*اگر موس بر روی یکی از لینک ها منو بازشو قرار بگیرد*/
background: url(img/arrow.gif) no-repeat left center; /*نمایش تصویر به صورت پس زمینه*/
}
اولین لینک منو بازشو دارای حاشیه از بالا هست و چون اطراف کل منو بازشو حاشیه دار هست دیگر نیازی به بودنش نیست.
پس برای حذف حاشیه به اولین لینک یک CLASS اضافه میکنیم:
کد:
<ul id="menu">
<li class="none"><a href="#">خـانه</a></li>
<li><a href="#">محصولات</a></li>
<li><a href="#">سفارش</a></li>
<li><a href="#">راهنما</a>
<div class="sub">
<a href="#" class="none">راهنمای خرید</a>
<a href="#">راهنمای نصب</a>
<a href="#">قوانین استفاده</a>
</div>
</li>
<li><a href="#">تماس با ما</a></li>
</ul>
و در CSS:
کد:
#menu a.none{
border-top: none;
}
خب طراحی منو ما به اتمام رسید، اما یه لحظه!
یک فاصله آزار دهنده بین لینک های درون لیست هست که نمایش منو را به صورت نامنظم تبدیل کرده :(
اما نگران نباشید برای حل این مشکل از حقه کامنت استفاده میکنیم به صورت زیر:
کد:
<ul id="menu">
<li class="none"><a href="#">خـانه</a></li><!--
--><li><a href="#">محصولات</a></li><!--
--><li><a href="#">سفارش</a></li><!--
--><li><a href="#">راهنما</a>
<div class="sub">
<a class="none" href="#">راهنمای خرید</a>
<a href="#">راهنمای نصب</a>
<a href="#">قوانین استفاده</a>
</div>
</li><!--
--><li><a href="#">تماس با ما</a></li>
</ul>
دیگه واقعاً تموم شد، نه جدی دیگه قدم دیگه ایی نمونده!
اکنون که با طراحی این نوع از منو آشنا شدی و خاصیت ها را شناختی میتونی اندازه منو را به اندازه دلخواه تغییر بدی رنگ ها رو عوض کنی خاصیت هایی رو حذف یا اضافه کنی ولی باید اینو بدونی تعیین اندازه ها چه در عرض و ارتفاع و چه در فاصله ها کاری تجربی هست که باید با کار کردن و کم و زیاد کردن مقدارها به اندازه و موقعیت مورد نظرت برسی…
صفحه اصلی
انجمن
جستجو
فهرست اعضا
افزونه های فایرفاکس
» منو افقی فقط با استفاده از CSS
تشکر شده توسط :
