روش ساخت منوی پایین افتادنی با کمک CSS3

منتشرشده: نوامبر 21, 2012 در برنامه نویسی و توسعه وب, ترفندها
برچسب‌ها:, ,

دشواری : مبتدی
زمان تکمیل آموزش : 20 دقیقه
منبع اصلی آموزش به زبان انگلیسی : http://designmodo.com/css3-dropdown-menu
مترجم و تهیه کننده مطلب : حمید رضا کاظمی – www.hamidoffice.com

مرحله ی اول – کدنویسی HTML

ما در ابتدا یک unordered list همراه آیتم های آن و تگ لینک خواهیم ساخت . برای ساخت زیر منو یا همان Sub Menu در درون لیست خود یک unordered list خواهیم نوشت.

<ul class="menu">
    <li><a href="#">My dashboard</a></li>
    <li><a href="#">Likes</a></li>
    <li><a href="#">Views</a>
        <ul>
            <li><a href="#" class="documents">Documents</a></li>
            <li><a href="#" class="messages">Messages</a></li>
            <li><a href="#" class="signout">Sign Out</a></li>
        </ul>

    </li>
    <li><a href="#">Uploads</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Documents</a></li>
</ul>

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

تصویر شماره یک

مرحله ی دوم – قالب و بدنه ی منو

در اولین قدم شروع به حذف خاصیت های margin ، padding ، border و outline از عناصر منوی مورد نظر خود می کنیم. سپس طول و ارتفاع ثابتی به منوی خود اختصاص می دهیم ( fixed width & height ) . برای افزودن جلوه به منوی خود از گوشه های گرد یا همان rounded corners و البته CSS3 gradients بهره خواهیم برد. برای تنظیم لینک ها به صورت افقی تنها کافی است لیست های خود را به سمت چپ شناور نماییم. در ضمن باید از خاصیت موقعیت نسبی استفاده نماییم ، بدلیل اینکه باید زیر منو ها را نیز تنظیم نماییم.

.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.menu {
    height: 40px;
    width: 505px;
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}

برای راحتی اعمال طرح و توسعه کار در این مرحله زیر منو ها را موقتا مخفی می نماییم. برای این کار از کد زیر استفاده می نماییم :

.menu ul { display: none; }

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

تصویر شماره دو

مرحله ی سوم – لینک منو ها

برای زیبا کردن و طرح دادن به لینک منو ها از مشخصات ساده ی CSS استفاده خواهیم کرد. مشخصاتی از قبیل نوع قلم ، رنگ و … سپس ما شروع به افزودن خاصیت هایی نظیر سایه تیره رنگ و انتخاب رنگی مناسب در هنگام انتقال موس روی لینک می نماییم. برای جدا سازی لینک ها باید حاشیه یا همان border به کار بیفزاییم. این حاشیه ها باید به سمت چپ و راست لینک ها اضافه شود و البته حاشیه چپ در اولین لینک را حذف خواهیم کرد چون نیاز به جدا سازی لینک اول از سمت چپ نداریم. ( در قالب های فارسی که از سمت راست به چپ می باشند باید حاشیه راست را از اولین لینک حذف نماییم).

.menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover &gt; a { color: #8fde62; }

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

تصویر شماره سه

مرحله ی چهارم – زیر منو ها

اگر یادتان باشد در مرحله ی دوم کار با کمک کدی که نوشتیم مانع نمایش زیر منو ها شدیم ، اول از همه خط زیر را از کد حذف نمایید:

.menu ul { display: none; }

در این قدم شروع به استایل دادن به زیر منوها می نماییم ، با اعمال موقعیت به زیر منو ها کار را ادامه می دهیم ، موقعیت زیر منو را 40px از بالا و 0px از چپ تعیین می نماییم و گوشه ی منحنی به پایین زیر منو اضافه می نماییم. در قدم بعدی خاصیت opacity را به 0 و مقدار hover را به 1 تعیین می کنیم ، این کار باعث ایجاد افکت fade in / fade out می شود. البته کار هنوز به اتمام نرسیده است ، برای ایجاد افکت باز شدن زیر منو باید ارتفاع لیست یا همان height آنرا در هنگامی که مخفی است به 0px تنظیم می کنیم و زمانی که موس روی آن می رود آنرا به 36px تبدیل می نماییم.

.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover &gt; ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover &gt; ul li {
height: 36px;
overflow: visible;
padding: 0;
}

ما باید در این مرحله عرض یا همان width مربوط به لینک زیر منو را به 100px تعیین می کنیم. بجای افزودن حاشیه به سمت چپ و راست این خاصیت را به بخش زیرین اضافه می نماییم و البته برای تمامی لینک ها به غیر از لینک آخر.

.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a { border: none; }

برای اتمام این منو فقط کافی است آیکون ها را به آن اضافه نماییم ، این آیکون ها را برای زیر منو ها در نظر گرفته ایم ، برای این کار به راحتی کافی است کلاس های خاص تهیه نماییم و برای هر یک آیکون مورد نظر را فراخوانی نماییم :

.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

این هم نتیجه ی پایانی کار :

تصویر شماره چهار

جهت مشاهده نمونه عملی این آموزش در سایت اصلی بر روی دکمه زیر کلیک کنید:

Preview

مطالب مرتبط:

کتاب طراحی وب به صورت گام به گام
می خواهم یک طراح وب حرفه ای شوم! – شماره 1

دیدگاه‌ها
  1. آي پي ست می‌گه:

    دوست عزيز كد سايت منبع بهتر از كد سايت شما كار مي كند.
    نمونه :
    http://ipsat.iwebz.org/menu.php
    لطفاً كدها رو بازنويسي كنيد.
    باتشكر

  2. بسیار ممنونم.
    من یه تازه وارد به دنیای طراحی وب هستم.این مطلب خیلی بهم کمک کرد.
    اما یه مشکلی هست در اخر کار زیرمنوها نمایش داده نمیشن!!
    چند بار کدهایی رو که خودم نوشتم رو بررسی کردم اما همه کدها کاملا شبیه کدهای شما بودن.
    حتی چند بار هم کدهای شما رو کپی و پیست کردم ام بازم نشد.!!
    خواهش میکنم ببینید مشکل از کجاست؟
    http://p30emrooz.xzn.ir

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s