نحوه ایجاد منوی کشویی با CSS3

در این مقاله آموزشی در لیداوب به نحوه ایجاد منوی کشویی با CSS3 خواهیم پرداخت. با ما همراه باشید.


مراحل ایجاد منوی کشویی با CSS3

مرحله اول: کدهای HTML

ابتدا یک فهرست نامنظم با یک list item و یک anchor tag برای هر یک از لینک‌های منو ایجاد خواهیم کرد. برای ایجاد منوی فرعی، یک فهرست نامنظم دیگر درون فهرست اول اضافه می‌کنیم:

<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> <!-- end .menu -->

نحوه ایجاد منوی کشویی با CSS3

مرحله دوم: آرایش منو

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

.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; }

نحوه ایجاد منوی کشویی با CSS3

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

برای استایل دادن به لینک‌های منو، چند خصوصیت اولیه CSS مانند فونت، رنگ، پدینگ و غیره را اضافه می‌کنیم. سپس، یک سایه متنی تیره و یک تغییر رنگ به کار می‌بریم تا وقتی نشانگر موس حرکت کرد و تغییر رنگ رخ داد، افکت ملایمی ایجاد شود. برای ایجاد جداکننده لینک‌ها، یک مرز به چپ و راست اضافه کرده و سپس مرز سمت چپ را از اولین لینک و مرز سمت راست را از آخرین لینک حذف می‌کنیم. برای ایجاد تغییر در زمان حرکت نشانگر موس فقط رنگ متن را تغییر می‌دهیم:

.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; }

نحوه ایجاد منوی کشویی با CSS3

مرحله چهارم: منوی فرعی

ابتدا این خط کد که در مرحله دوم اضافه کرده بودیم را حذف می‌کنیم:

.menu ul { display: none; }

حالا استایل منوی فرعی را مشخص می‌کنیم. ابتدا، جایگاه قرارگیری منوی فرعی را ۴۰ پیکسل از بالا و صفر پیکسل از سمت چپ آیتم منو قرار داده و به پایین آن گوشه‌های گرد اضافه می‌کنیم. درجه کدری را روی صفر قرار داده و حالت باز شدن را به صورت ۱ تنظیم می‌کنیم تا یک افکت محو ایجاد شود. برای افکت کشویی بالا/ پایین باید ارتفاع لیست را صفر پیکسل در زمان جمع بودن و ۳۶ پیکسل در زمان باز شدن در نظر بگیریم:

.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;
}

عرض لینک‌های منوی فرعی را ۱۰۰ پیکسل تعیین می‌کنیم. به جای مرزهای راست و چپ، این بار یک مرز در پایین اضافه کرده و آن را از آخرین لینک حذف می‌کنیم:

.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; }

برای اتمام کار، یک آیکون به هر یک از لینک‌های منوی فرعی اضافه می‌کنیم. برای این کار، یک کلاس custom برای هر یک ایجاد کرده و یک تصویر پس زمینه اضافه می‌کنیم:

.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; }

نحوه ایجاد منوی کشویی با CSS3

مطالعه مقالات بیشتر در لیداوب:

به همین راحتی و ظرف مدت زمان کوتاهی توانستیم یک منوی کشویی CSS3 ایجاد کنیم. اگر پرسش یا پیشنهادی دارید می‌توانید در زیر همین پست در لیداوب با ما در میان بگذارید.

برچسب ها