آموزش ساخت یک منوی عمودی بازشو متفاوت با CSS3

سلام خدمت همراهان همیشگی مجله طراحی وب لرن پارسی ، بــا یکــی دیگــه از مقالــه هــای آموزشــی در زمینــه css در خدمــت شــما هســتم. چنــد روز پیــش یکــی از دوســتان درخواســت داده بودنــد کــه یــک منــو و زیرمنــو آمــوزش بــدم کــه زیرمنــو شــامل تصویــر پــس زمینــه باشــه تقریبــا شــبیه بــه یکــی از فروشــگاه هــای اینترنتــی ، و مــن هــم تصمیــم گرفتــم در ایــن مقالــه ی آموزشــی نحــوه ی ایجــاد یــک منوی عمودی بازشو با CSS3  رو همــراه بــا افکــت css3 خدمتتــون آمــوزش بــدم.

برای ایجاد این DropDown Menu از هیچ کد جی کوئری استفاده نکردیم و تنها با استفاده از خصوصیات CSS3 این کار رو انجام دادیم.

مراحل ساخت  منوی عمودی بازشو با CSS3

خوب برای شروع کار باید از html شروع کنیم ، فعلا یه منوی ساده ایجاد میکنیم :

<div id=”pagewrap”>
<ul class=”topMenu”>
<li> <a href=””>لرن پارسی </a> </li>
<li> <a href=””>آموزش طراحی وب</a> </li>
<li> <a href=””>دوره های آموزشی</a> <li>
<li> <a href=””>دیجیتال مارکتینگ</a> </li>
</ul> </div>

تــا اینجــا منــوی مــا اســتایلی نــداره و به شــکل زیــر درمیاد .

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

#pagewrap{width:100%; height:920px; margin:0; padding:0; position:relative}
a{ outline: medium none; text-decoration: none; -webkit-transition : all 0.2s linear 0s; -moz-transition : all 0.2s linear 0s; -ms-transition : all 0.2s linear 0s; -o-transition : all 0.2s linear 0s; transition : all 0.2s linear 0s;}
.topMenu{width:100%; height:45px; background-color:#fff; border-bottom:1px solid #444}
.topMenu > li{float:right; padding:0 20px; font:13px/45px tahoma; color:#000; position:relative}
.topMenu > li a{color:#000}
.topMenu > li a:hover{color:#FF0000}

Pagewrap لایه ی اصلی ما هست که منو در این لایه قرار گرفته شما میتونید این لایه رو در پروژه تون استفاده نکنید.

به عناصر a و لینک ها هم transition دادیم تا هنگام رویداد hover با افکت تغییر رنگ پیدا کنند.

بــه topMenu هــم کــه منــوی اصلیمونــه اســتایل میدیــم تــا li هــا کنــار هــم قــرار گرفتــه و شــکل منــو بــه خودشــون بگیرنــد، فقــط یــه نکتــه اینجا هســت که بایــد خدمتتــون عــرض کنــم؛ زمانــی کــه شــما میخوایــن یــک منــو و زیــر منــو ایجــاد کنیــد بایــد از لیســت هــای تــو در تــو اســتفاده کنیــد بــه همیــن منظــور حتمــا بایــد از ترکیــب ســلکتورها اســتفاده کنیــد. اگــر دقــت کــرده باشــید متوجــه میشــید کــه بــا اشــاره بــه topMenu > li گفتــم بــه اولیــن li هــای ul (بــا کلاس topMenu ) ایــن اســتایل رو اختصــاص بــده، بــه li هــای تــو در تــوی بعــدی کاری نداشــته بــاش. بــه li هــا position:relative میدیــم تــا ul هــای درونــی خــودش رو در ســاختار و قالــب خــودش حفــظ کنــه و نمایــش بــده.

تا اینجا منوی ما به شکل زیر تغییر پیدا میکنه:

لینک ها در حالت عادی مشکی و در حالت hover قرمز هستند.

حــالا بــرای گزینــه هــای « مدرســه مجــازی ایرانیــان» « دوره هــای آموزشــی » و « ماهنامــه طراحــی وب » زیــر منــو تعریــف میکنیــم. کــد html ما به شــکل زیــر تغییــر میکنه:

<ul class=”topMenu”>
<li> <a href=””>مدرسه مجازی ایرانیان</a>
<ul>
<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>
</li>
<li><a href=” “>آموزش طراحی وب</a></li>
<li> <a href=””>دوره های آموزشی</a><ul><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>
<li><a href=” “> کارگاه اموزش ریسپانسیو </a></li>
<li><a href=” “>دوره های حضوری </a></li>
<li><a href=” “>تدریس خصوصی </a></li>
</ul>
</li>
<li> <a href=” “>ماهنامه طراحی وب</a>
<ul>
<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>
<li><a href=” “> نویسندگان </a></li>
<li><a href=” “> حامیان ماهنامه </a></li>
<li><a href=” “> مسابقات </a></li>
</ul>
</li>
</ul>

اگــر دقــت کنیــد میبینیــد کــه بــرای زیرمنــو از یــک ul دیگــه اســتفاده کردیــم و ul جدیــد رو بعــد از عنصــر a و گزینــه هــای منــوی اصلــی قــرار دادیــم ، ببینیــد :

<li>
<a href=””>مدرسه مجازی ایرانیان</a>
<ul>
<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></li>

خوب تا اینجا منوی ما به شکل زیر درمیاد :

خــوب حــالا بایــد زیــر منوهــارو مخفــی کنیــم و تــا زمانــی کــه hover روی گزینــه هــای اصلــی صــورت نگرفتــه نمایــش داده نشــوند. اســتایل زیــر رو اضافــه میکنیم:

.topMenu > li ul{display:none; position:absolute; top:45px; right:0; width:600px; height:250px; background-color:#fff; padding:25px 10px 10px; -webkit-border-bottom-right-ra-dius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px;border-bottom-right-radius: 5px;border-bottom-left-ra-dius: 5px;}.
topMenu > li ul li{width:31%; font:13px/30px tahoma; float:right; background:url(../../images/bullet.png) no-repeat right 16px ; padding:0 10px 0 30px;}

بــا display:none بــرای topMenu > li ul زیرمنوهــارو پنهــان میکنیــم و بــه زیرمنوهــا position:absolute میدیــم تــا مــکان قرارگیــری زیــر منــو رو نســبت بــه گزینــه ی اصلــی و مــادر تعییــن کنیــم. بــرای همیــن بــود کــه بــه li هــای اصلــی position:relative دادم.

در topMenu > li ul li هــم گفتیــم کــه بــه li هــای زیــر منــو اســتایل مــورد نظــر رو اختصــاص بــده، بــرای اینکــه بتونیــم گزینــه هــای زیرمنــورو دو ســتونه کنیــم ، عــرض هــر li رو ۳۱% در نظــر میگیریــم و بعــد بــا float:right گزینــه هــارو کنارهــم قــرار میدیــم.

حالا دوباره منوی ما به حالت عادی برگشت چون زیرمنوها مخفی شدند.

در اینجا میگیم زمانی که موس روی گزینه ها میره زیر منو نمایش پیدا کنه :

.topMenu > li:hover ul{ display:block;}

در این حالت زمانی که موس رو روی گزینه میبریم به شکل زیر زیرمنو رو میبینیم:

امــا ایــن تغییــر حالــت بــدون افکــت انجــام میشــه مــا میخوایــم زمانــی کــه عمــل hover انجــام میشــه بــا یــه افکــت زیبــا زیــر منــو نمایــش پیداکنــه. بــرای اینــکار از keyframe هــا اســتفاده میکنیــم و یــک انیمیشــن ایجــاد میکنیــم (در صورتــی کــه بــا keyframe هــا آشــنا نیســتید میتونیــد در انتهــای ایــن مطلــب، مقالــه ی مربــوط بــه keyframe هــارو مطالعــه بفرماییــد) :

@-webkit-keyframes mymove {
۰% {top: 30px;}
۱۰۰% {top: 45px;}
}
@keyframes mymove {
۰% {top: 30px;}
۱۰۰% {top: 45px;}
}

در اینجــا گفتیــم انیمیشــنی بنــام myMove ایجــاد کــن کــه در ابتــدا زیرمنــو 35px:top داشــته باشــه و بعــد بــه 45px:top تغییــر پیــدا کنــه. بعــد از اینکــه انیمیشــن رو تعریــف کردیــم حــالا بایــد اون رو بــرای زیرمنــو تعییــن کنیــم :

.topMenu > li:hover ul{ display:block; -webkit-animation: mymove 0.4s; animation: mymove 0.4s;}

به این صورت تعریف کردیم که این انیمیشن طی ۰.۴ ثانیه اجرا بشه.

خــوب تــا اینجــا مــا منــو و زیرمنــورو بــا افکــت ایجــاد کردیــم حــالا میخوایــم بــک گرانــد هــر کــدوم از زیرمنوهــا یــک تصویــر مرتبــط بــا موضــوع داشــته باشــه. بــرای ایــن منظــور بــه هــر زیرمنــو یــک id اختصــاص میدیــم:

برای زیرمنوی اول weblearning رو تعریف میکنیم:

و یک تصویر برای این زیر منو در نظر میگیریم:

#weblearning{background:url(../../images/iranweblearn-logo.jpg) no-repeat bottom left #fff;}

و یک تصویر برای این زیر منو در نظر میگیریم:

#magazine{background:url(../../images/mag-5-cover.jpg) no-repeat bottom left #fff;}
#terms{background:url(../../images/term.jpg) no-repeat bottom left #fff;}

Bottom left که برای پس زمینه در نظر گرفتیم به تصویر پس زمینه دستور میده که در گوشه ی سمت چپ پایین باکس ظاهر بشه. حالا منوی ما به شکل زیر تغییر پیدا میکنه :

خــوب دوســتان مقالــه ی آموزشــیمون در رابطه با نحوه ساخت منوی عمودی بازشو با CSS3 در اینجــا بــه اتمــام میرســه ، امیــدوارم مفیــد بــوده باشــه. اگــر ســوالی براتــون بوجــود اومــد حتما در بخش نظرات پایین صفحه با ما در میان بذارید. همچنین توصیه می کنیم مقاله بعدی ما با عنوان آموزش ایجاد منوی ریسپانسیو را از دست ندهید.