ساخت منوی عمودی افکت دار با سی اس اس!

همیشه کاربرا سایت های زیبا رو میپسندند. برای زیباسازی باید نهایت استعدادتون رو به خرج بدین!! امروز (در اصل امشب!) میخوام یه منوی قـــــشـــــــنگ! که فقط با سی اس اس درست شده بهنون آموزش بدم.


اول از همه عکس رو ببینید. تا متوجه بشین در نهایت میخواهیم به چی برسیم. یه منوی عمودی که با رفتن موس روی هر آیتم یه افکت نشون میده.

خوب. یه صفحه html بسازید  و یه فایل css هم کنارش بذارید. با هربرنامه ای که راحتیت این فایل ها رو میتونید ادیت کنید. یا Visual Studio یا Dreamweaver یا هرچی...

معمولا برای ساخت منو از ul li استفاده میشه. چون کار کردن باهاش آسونه. پس اول کد html منو رو با ul مینویسیم:

 

  1. <ul>
  2.     <li><h3>پنل کاربری></li>
  3.     
  4.     <li><a href="#">مشاهده لیست مقالات>li>
  5.     <li><a href="#">مشخصات>li>
  6.     <li><a href="#">تنظیمات></li>
  7.     <li><a href="#">تماس با ما>li>
  8.     <li><a href="#">راهنما></li>
  9. >

li اول که داخلش یه تگ h3 برای عنوان منو هست و اختیاریه! حالا. اگه فایل رو با مرورگر باز کنید یه همچین شکلی داره:

منو_با_سی_اس_اس

 خوب حالا باید پروسه سی اس اس نویسی رو شروع کنیم. اول به تگ های ul و liمون، آیدی یا کلاس میدیم:

 

  1. <ul id="menu-content">
  2.     <li class="sliding-element"><h3>پنل کاربری>li>
  3.     
  4.     <li class="sliding-element"><a href="#">مشاهده لیست مقالات>li>
  5.     <li class="sliding-element"><a href="#">مشخصات>>
  6.     <li class="sliding-element"><a href="#">تنظیمات>li>
  7.     <li class="sliding-element"><a href="#">تماس با ما>li>
  8.     <li class="sliding-element"><a href="#">راهنما></li>
  9. >

 حالا توی فایل css کدهای زیر رو بنویسین:

  1. ul#menu-content
  2. {
  3.     list-style: none;
  4.     font-size: 12px;
  5.     margin: 30px 0;
  6.     padding: 0;
  7. }
  8.  
  9. ul#menu-content li.sliding-element h3,
  10. ul#menu-content li.sliding-element a
  11. {
  12.     display: block;
  13.     width: 150px;
  14.     padding: 5px 18px;
  15.     margin: 0;
  16.     color: #fff;
  17.     margin-bottom: 3px;
  18. }
  19.  
  20. ul#menu-content li.sliding-element h3
  21. {
  22.     background-color: #1a75f4;
  23.     font-weight: bold;
  24.     text-align:center;
  25.     margin-bottom:6px;
  26. }
  27.  
  28. ul#menu-content li.sliding-element a
  29. {
  30.     color: #fff;
  31.     background:#035bd6;
  32.     text-decoration: none;    
  33. }

 list-style: none اون دایره های کنار آیتم ها رو برمیداره.

display: block برای اینه که هر آیتم رو توی یه خط نشون بده.

اندازه آیتم های منو رو هم که با width: 150px ثابت کردیم! عه آبی شد!!!! :-دی

خوب. تا اینجای کار این رو داریم:

سی_اس_اس_منو_html

حالا یه مقدار قشنگش میکنیم! lکد html این میشه:

 

  1. <html>
  2. <head>
  3.     <title>ساخت منوی افقی با CSStitle>
  4.     <link rel="stylesheet" type="text/css" href="styles.css" />
  5. >
  6. <body>
  7.     <div class="content">
  8.         <h2 class="logo"><span>ساخت منوی افقی با CSS>h2>
  9.         <div id="navigation-menu">
  10.             <ul id="menu-content">
  11.                 <li class="sliding-element"><h3>پنل کاربری>>
  12.                 
  13.                 <li class="sliding-element"><a href="#">مشاهده لیست مقالات>li>
  14.                 <li class="sliding-element"><a href="#">مشخصات>>
  15.                 <li class="sliding-element"><a href="#">تنظیمات>li>
  16.                 <li class="sliding-element"><a href="#">تماس با ما>li>
  17.                 <li class="sliding-element"><a href="#">راهنما>li>
  18.             ul>
  19.         >
  20.     >
  21. >
  22. >

 و کد سی اس اس با یه سری تغییرات میشه:

  1. body
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5.     background: #a7a7a7;
  6.     font-family: Tahoma, Arial, Verdana, sans-serif;
  7.     font-size: 12px;
  8.     direction:rtl;
  9. }
  10. .content
  11. {
  12.     padding:15px;
  13. }
  14. h2.logo    
  15. {  
  16.     margin-bottom: 0;
  17.     background:url('images/head_logo.png') no-repeat right;
  18.     height:32px;
  19. }
  20.  
  21. h2.logo span
  22. {
  23.     display: none;
  24. }
  25.  
  26. a.refrence    
  27. {
  28.     -moz-border-radius: 5px;
  29.     -webkit-border-radius: 5px;
  30.     -o-border-radius: 5px;
  31.     border-radius: 5px;
  32.     padding:4px;
  33.     background:#2981fb;
  34.     color: #fff;
  35.     font-size: 12px;
  36.     text-decoration:none;
  37. }
  38. a.refrence:hover{background:#fff; color:#3d3d3d}
  39.  
  40. #navigation-menu {
  41.     margin:5px 20px 10px 0;
  42. }
  43.  
  44. ul#menu-content
  45. {
  46.     list-style: none;
  47.     font-size: 12px;
  48.     margin: 30px 0;
  49.     padding: 0;
  50. }
  51.  
  52. ul#menu-content li.sliding-element h3,
  53. ul#menu-content li.sliding-element a
  54. {
  55.     text-shadow:1px 1px 0px #383838;
  56.     display: block;
  57.     width: 150px;
  58.     padding: 5px 18px;
  59.     margin: 0;
  60.     color: #fff;
  61.     margin-bottom: 3px;
  62. }
  63.  
  64. ul#menu-content li.sliding-element h3
  65. {
  66.     -moz-border-radius: 5px;
  67.     -webkit-border-radius: 5px;
  68.     -o-border-radius: 5px;
  69.     border-radius: 5px;
  70.     background-color: #1a75f4;
  71.     font-weight: bold;
  72.     border:1px solid #0052c6;
  73.     text-align:center;
  74.     margin-bottom:6px;
  75. }
  76.  
  77. ul#menu-content li.sliding-element a
  78. {
  79.     color: #fff;
  80.     background:#035bd6;
  81.     border: 1px solid #003e95;
  82.     text-decoration: none;    
  83. }
  84. ul#menu-content li.sliding-element a:hover
  85. {
  86.     background:#1772f2;
  87.     padding-right:30px;
  88. }

 عنوان منو رو با سی اس اس دور گرد کردم. یکم قابل تحمل تر شد.

بذارین یه کار دیگه هم با عنوان بکنیم. پسزمینه gradiant چظوره؟؟ پس قسمت عنوان سی اس اس رو اصلاح کنید:

  1. ul#menu-content li.sliding-element h3
  2. {
  3.     -moz-border-radius: 5px;
  4.     -webkit-border-radius: 5px;
  5.     -o-border-radius: 5px;
  6.     border-radius: 5px;
  7.     background-color: #1a75f4;
  8.     /*-----------این کدها رو اضاف کنید--------*/
  9.     background-image: -moz-linear-gradient(#0358ce, #2981fb);
  10.     background-image: -webkit-gradient(linear, left top, left bottom, from(#0358ce), to(#2981fb));    
  11.     background-image: -webkit-linear-gradient(#0358ce, #2981fb);
  12.     background-image: -o-linear-gradient(#0358ce, #2981fb);
  13.     background-image: -ms-linear-gradient(#0358ce, #2981fb);
  14.     background-image: linear-gradient(#0358ce, #2981fb);
  15.     /*------------------------------------*/
  16.     font-weight: bold;
  17.     border:1px solid #0052c6;
  18.     text-align:center;
  19.     margin-bottom:6px;
  20. }

 خوب. حالا یه منو داریم که رفتن موس روش رنگش عوض میشه ویه مقدار میاد جلو!

سی_اس_اس_منو_html

 اما این کافی نیست. ما میخوایم منومون یه افکت قشنگتر داشته باشه. پس از delay توی سی اس اس استفاده میکنیم.

برای استفاده از delay بایدد کدهای زیر رو اضافه کنید:

  1. ul#menu-content li.sliding-element a
  2. {
  3.     color: #fff;
  4.     background:#035bd6;
  5.     border: 1px solid #003e95;
  6.     text-decoration: none;
  7.     -webkit-transition: all 0.2s ease-in-out;
  8.     -moz-transition: all 0.2s ease-in-out;
  9.     -o-transition: all 0.2s ease-in-out;
  10.     transition: all 0.2s ease-in-out;    
  11. }

 هر کدون برای یه مرورگر استفاده میشه. بجز IE محترم! که اصلا باید بیخیالش شد!!! :-(

خوب دیگه تموم شد. حالا با رفتن موس روی آیتم ها، با یه افکت قــــشـــــنگ تکون میخورن! میتونید زمانش رو با تغییر 0.2s عوض کنید.

(اگه میخواین در مورد این پروپرتی چیزای بیشتر بفهمین: CSS3 transition-delay Property و Keyframe Animation Syntax)

میتونید فایل ضمیمه رو دانلود کنید.

توی قسمت بعدی احتمالا منوی افقی یا عمودی با زیر منو رو بگم.

این مقاله فایل ضمیمه دارد : دانلود فایل ضمیمه

ن در ۱۳۹۱/۸/۱۶ ساعت ۱۰:۲۳:۵۷ گفت:

ممنون توضیحاتت مفید بود

پاسخ احسان شریعتی در ۱۳۹۱/۸/۱۶ ساعت ۱۴:۴۱:۵۶:

khahesh mikonam :)


پاسخ

نام
ایمیل
وب سایت
نظر شما ارسال
[نظر پس از تایید مدیر نمایش داده می شود]
آگهی رایگان در ۱۳۹۱/۷/۷ ساعت ۱۲:۴۹:۳۱ گفت:

ساخت این منو ها خیلی کارایی داره. ممنون از آموزشت

پاسخ سهلا مشرفی در ۱۳۹۱/۷/۷ ساعت ۲۲:۳۶:۳۱:

خوشسحالم مفید بوده :)


پاسخ

نام
ایمیل
وب سایت
نظر شما ارسال
[نظر پس از تایید مدیر نمایش داده می شود]
alireza در ۱۳۹۱/۶/۱۵ ساعت ۱۵:۷:۴۶ گفت:

خیلی خیلی ممنون

پاسخ

نام
ایمیل
وب سایت
نظر شما ارسال
[نظر پس از تایید مدیر نمایش داده می شود]
رامین در ۱۳۹۱/۵/۱۶ ساعت ۲:۳۲:۵۸ گفت:

خوب بود

پاسخ

نام
ایمیل
وب سایت
نظر شما ارسال
[نظر پس از تایید مدیر نمایش داده می شود]
مهدی در ۱۳۹۱/۵/۱۱ ساعت ۸:۵۴:۲۹ گفت:

مرسی خیلی باحال بود دستت درد نکنه

پاسخ

نام
ایمیل
وب سایت
نظر شما ارسال
[نظر پس از تایید مدیر نمایش داده می شود]
مهدي در ۱۳۹۱/۴/۱۹ ساعت ۱۶:۳۹:۵۹ گفت:

دستت درد نكنه دوست عزيز . خيلي جالب نوشته بودي . كاربردي بود .

پاسخ

نام
ایمیل
وب سایت
نظر شما ارسال
[نظر پس از تایید مدیر نمایش داده می شود]

نظر خودتون رو ارسال کنید

نام
ایمیل
وب سایت
نظر شما
[نظر پس از تایید مدیر نمایش داده می شود]