گروه توسعه علوم کامپیوتر, سخت افزار, شبکه, طراحی سایت

گروه توسعه علوم کامپیوتر

آموزش مفاهیم کامپیوتر

آموزش ترفند گرافیکی

اخرين ورژن نرم افزار

دانلود رایگان نرم افزار با لینک مستقیم

دانلود نرم افزار رایگان

دانلود آنتی ویروس

دانلود جدیدترین نرم افزار

دانلود قالب گرافیکی

دانلود قالب سیستم مدیریت محتوا

وردپرس

جوملا

دانلود بازی رایگان

دانلود بازی موبایل

دانلود فیلم انیمیشن با لینک مستقیم

دانلود کتاب

سخت افزار

آخرین قیمت سخت افزار

شرکت خدمات کامپیوتری گروه توسعه

سخت افزار، نرم افزار، شبکه، گرافیک و طراحی سایت

شرکتهای فعال در اطلاع رسانی و ارائه خدمات در زمینه امنیت شبکه

راه اندازی شبکه های كامپيوتري

اخرين ورژن نرم افزار

کلیه خدمات کامپیوتری در محل و خدمات تخصصی تعمیرات کامپیوتر

تعمیر کامپیوتر لپ تاپ و خدمات شبکه شعب در تمامی نقاط تهران

خدمات کامپیوتری درمحل شما‎

خدمات كامپيوتري درمحل شما - فروش،تعمير وارتقا -نصب ويندوز و...‎

اخبار شرکت خدمات کامپیوتری - خبرهای شرکت خدمات کامپیوتری

وب سايت رسمي شركت مهندسي كامپيوتر گروه توسعه

فهرست وب سایت های شرکت های کامپیوتری ايراني

- مقالات علمي خدماتاینترنت , طراحی وب سایت , میزبانی صفحات وب , تجارت

شرکت مهندسی کامپيوتر گروه توسعه توليد كننده نرم افزار مالي ، بازرگاني و ...

خدمات تعمیرات و فروش نوت بوک و pc - بازیابی اطلاعات انواع هار و تعویض chip

Web Application Design

Sfotware

Training

Consulting

Develope Software

Hardware

Networking

Web Application

Trainnig

کلیه امور خرید و فروش ، خدمات کامپیوتر
تعمیرات کامپیوتر و لپ تاپ
انواع مواد مصرفی پرینتر ، فکس و کپی
کامپیوتر
دانلود گزارش کارآموزی مربوط به رشته کامپیوتر
دانلود گزارش کارورزی
پروژه کارآموزی
کارآموزی خدمات کامپیوتری
گزارش کارآموزی
گزارش کارآموزی خدمات کامپیوتری
گزارش کارآموزی رشته نرم افزار
گزارش کاراموزی سخت افزار
پروژه پایانی رشته کامپیوتر
پایان نامه ارشد کامپیوتر
مقاله رشته کامپیوتر
آموزش ساختن منوی باز شو CSS3 Reviewed by Momizat on . داشتن یک منو در سایت کاربردهای زیادی دارد ، از رایج ترین و مهم ترین این اثراتش ، معرفی واضح بخش های دیگر به کاربر و همچنین هدایت راحت تر به دیگر صفحات ، است . د داشتن یک منو در سایت کاربردهای زیادی دارد ، از رایج ترین و مهم ترین این اثراتش ، معرفی واضح بخش های دیگر به کاربر و همچنین هدایت راحت تر به دیگر صفحات ، است . د Rating:
شما اینجا هستید:خانه » آموزشی » آموزش ساختن منوی باز شو CSS3

آموزش ساختن منوی باز شو CSS3

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

 

آموزش ساختن منوی باز شو CSS3 - گروه توسعه - مهندس خسرو یعقوبی

 

 

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

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

<pre><ul>

<li><a href="#">پیشخوان</a></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>
</ul>

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

</ul>

پیش نمایش:

آموزش ساختن منوی باز شو CSS3 - گروه توسعه - مهندس خسرو یعقوبی

 

مرحله دوم: 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;
}

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

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

 


تاکنون 1 دیدگاه منتشر شده است

  • mal2moh

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

    پاسخ دادن

دیدگاه خود را بنویسید

لطفاً پاسخ معادله زیر را واردکنید * Time limit is exhausted. Please reload CAPTCHA.

بازگشت به بالا