• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

آموزش ساخت منو با استفاده از CSS3

A

amininho

متخصص بخش کامپیوتر
how-to-make-a-css3-menu.gif
​

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

مرحله اول – HTML
ابتدا قسمت HTML هستش. برای این کار کد مورد نظر رو در جایی که میخواهید منوی نمایش داده شود قرار دهید :
HTML: 
<ul class="menu">    <li><a href="http://tarmaster.com/">TarMaster</a></li>    <li><a href="#">Link</a></li>    <li><a href="#">Link</a></li>    <li><a href="#">Link</a></li>    <li><a href="#">Link</a></li>    <li><a href="#">Link</a></li></ul>

مرحله دوم – طرح بندی منو
در این قسمت ما باید به حذف margin, padding, border و outline از منو بپردازیم. همچنین باید gradient‌های CSS3 رو اضافه کنیم. همچنین در اینجا ما منو رو چپ چین تعیین میکنیم.
کد زیر رو به قسمت CSS فایل خود اضافه کنید :

کد: 
.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;
}

مرحله سوم – لینک‌های منو
در این قسمت ما باید کد‌های اصلی برای لینک‌ها روم اضافه کنیم. مثل رنگ، فونت، اندازه فونت، وزن فونت و … . همچنین برای تغییر رنگ منو‌ها از خاصیت hover استفاده میکنیم. یعنی با رفتن نشانگر موس بر روی لینک، رنگ لینک تغییر کنید.
حالا کد زیر رو به قسمت 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 > a { color: #8fde62 }

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