منوی سایت یکی از مهم ترین بخش های موجود در سایت می باشد که کاربران را به بخش های اصلی سایت هدایت می کند و داشتن منویی زیبا که کاربران را به دیدن از دیگر بخش های سایت ترغیب کند هم مهم می باشد. در این مطلب قصد داریم به شما آموزش دهیم چگونه منویی زیبا با استفاده از CSS3 و HTML طراحی کنید!

مرحله اول: پیاده سازی HTML

در این مرحله ابتدا طرح HTML منو را طراحی می کنیم.

<ul class="menu">

    <li><a href="#">پیشخوان</a></li>
    <li><a href="#">لینک ها</a></li>
    <li><a href="#">نمایش</a>

        <ul>
            <li><a href="#" class="documents">برنامه ها</a></li>
            <li><a href="#" class="messages">پیغام ها</a></li>
            <li><a href="#" class="signout">خروج از سایت</a></li>
        </ul>

    </li>
    <li><a href="#">بارگذاری فایل</a></li>
    <li><a href="#">ویدئو</a></li>
    <li><a href="#">برنامه ها</a></li>

</ul>

پیش نمایش:

مرحله دوم: CSS منو

در این مرحله ما در ابتدا تمامی اعمال را (reset) میکنیم. مانند فاصله ها (margin,padding ,…). سپس نوبت به انتخاب رنگ پشت زمینه برای منو, گرد کردن گوشه های منو, تنظیم ارتفاع و عرض منو میرسد

 .menu {    
    height: 40px;
    width: 435px;
    direction:rtl;
    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: right;
    display: block;
    height: 40px;
}

مرحله سوم: 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: Tahoma, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;

    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 > a { color: #8fde62; }

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

در این مرحله نوبت به CSS زیر منو ها می رسد. در این قسمت باید تنظیم فاصله از سمت راست و فاصله از بالا را تنظیم می کنیم. همچنین با استفاده از opacity کاری می کنیم که در هنگام رفتن موس بر روی منویی که دارای زیر منو است زیر منو ها به صورت fade نمایش داده شوند. سپس برای هر لینک زیر منو یک تصویر تعیین می کنیم.

 .menu ul {
    position: absolute;
    top: 40px;
    right: 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 > 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 > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
    direction:rtl;
}

می توانید اندازه عرض زیر منو را تغییر دهید. در حالت عادی 100 پیکسل می باشد.

 .menu ul li a {
    width: 100px;
    padding: 4px 30px 4px 0;
    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  right; }
.menu a.messages { background: url(../img/bubble.png) no-repeat  right; }
.menu a.signout { background: url(../img/arrow.png) no-repeat  right; }

همچنین می توانید در زیر دموی اسکریپت را ببینید یا آن را دریافت کنید!

برچسب ها: آموزش css3 آموزش ساخت منو آموزش طراحی سایت آموزش طراحی سایت تصویری آموزش طراحی منوی سایت آموزش پرشین اسکریپت طراحی منو سایت منوی css منوی css3

نظرات

5 1 رای

رأی دهی به مطلب

اشتراک در

وارد شدن

اطلاع از

نظرات جدید فالواپ پاسخ جدید به کامنت های من

Label

{} [+]

اسم*

ایمیل*

Δ

Label

{} [+]

اسم*

ایمیل*

Δ

6 نظرات

تازه‌ترین

قدیمی ترین بیشترین واکنش نشان داده شده(آرا)

بازخورد (Feedback) های اینلاین

مشاهده همه نظرات

ali

8 سال قبل

سلام ..خوب هستید..ممنون از آموزشتون..عالی بود…فقط یه سوال؟؟ چه جوری میشه منوها به صورت منوهای سایت شما درست کرد..عکس بالا باشه نوشته پایین…مثل پوسته ها..افزونه ها..جی کوئری سایت شما.ممنون اگه راهنماییم کنید.

0

مجتبی

10 سال قبل

با سلام
کاربردی و مفید بود
با سپاس فراوان

0

badsector

11 سال قبل

سلام ممنونم از مطلب خوبتون

0

محمد

12 سال قبل

سلام ممنونم از مطلب خوبتون، چطور میشه این منو رو ویرایش کرد، من میخوام تعداد لینک ها بیشتر بشه یا اینکه هر کدوم رو خواستم واسش زیر منو بذارم
ممنون میشم راهنمایی کنید

0

Ali Yaghobi

12 سال قبل

سلام
میشه لطف کنیدآموزش ساخت منوی CSS3 و قسمت login سایت Ning.com رو قرار بدید
با تشکر

0

S431D sDs

12 سال قبل

اگه میشه منو خود سایت ( پرسین لرن) رو بزارید
ممنون

0