دشواری : مبتدی
زمان تکمیل آموزش : 20 دقیقه
منبع اصلی آموزش به زبان انگلیسی : http://designmodo.com/css3-dropdown-menu
مترجم و تهیه کننده مطلب : حمید رضا کاظمی – www.hamidoffice.com
مرحله ی اول – کدنویسی HTML
ما در ابتدا یک unordered list همراه آیتم های آن و تگ لینک خواهیم ساخت . برای ساخت زیر منو یا همان Sub Menu در درون لیست خود یک unordered list خواهیم نوشت.
[sourcecode language=”html”]
<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>
[/sourcecode]
نتیجه ی کار تا اینجا به صورت زیر می باشد :
مرحله ی دوم – قالب و بدنه ی منو
در اولین قدم شروع به حذف خاصیت های margin ، padding ، border و outline از عناصر منوی مورد نظر خود می کنیم. سپس طول و ارتفاع ثابتی به منوی خود اختصاص می دهیم ( fixed width & height ) . برای افزودن جلوه به منوی خود از گوشه های گرد یا همان rounded corners و البته CSS3 gradients بهره خواهیم برد. برای تنظیم لینک ها به صورت افقی تنها کافی است لیست های خود را به سمت چپ شناور نماییم. در ضمن باید از خاصیت موقعیت نسبی استفاده نماییم ، بدلیل اینکه باید زیر منو ها را نیز تنظیم نماییم.
[sourcecode language=”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;
}
[/sourcecode]
برای راحتی اعمال طرح و توسعه کار در این مرحله زیر منو ها را موقتا مخفی می نماییم. برای این کار از کد زیر استفاده می نماییم :
[sourcecode language=”css”]
.menu ul { display: none; }
[/sourcecode]
نتیجه ی کار تا اینجا به صورت زیر می باشد :
مرحله ی سوم – لینک منو ها
برای زیبا کردن و طرح دادن به لینک منو ها از مشخصات ساده ی CSS استفاده خواهیم کرد. مشخصاتی از قبیل نوع قلم ، رنگ و … سپس ما شروع به افزودن خاصیت هایی نظیر سایه تیره رنگ و انتخاب رنگی مناسب در هنگام انتقال موس روی لینک می نماییم. برای جدا سازی لینک ها باید حاشیه یا همان border به کار بیفزاییم. این حاشیه ها باید به سمت چپ و راست لینک ها اضافه شود و البته حاشیه چپ در اولین لینک را حذف خواهیم کرد چون نیاز به جدا سازی لینک اول از سمت چپ نداریم. ( در قالب های فارسی که از سمت راست به چپ می باشند باید حاشیه راست را از اولین لینک حذف نماییم).
[sourcecode language=”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; }
[/sourcecode]
نتیجه ی کار به صورت زیر می باشد :
مرحله ی چهارم – زیر منو ها
اگر یادتان باشد در مرحله ی دوم کار با کمک کدی که نوشتیم مانع نمایش زیر منو ها شدیم ، اول از همه خط زیر را از کد حذف نمایید:
[sourcecode language=”css”]
.menu ul { display: none; }
[/sourcecode]
در این قدم شروع به استایل دادن به زیر منوها می نماییم ، با اعمال موقعیت به زیر منو ها کار را ادامه می دهیم ، موقعیت زیر منو را 40px از بالا و 0px از چپ تعیین می نماییم و گوشه ی منحنی به پایین زیر منو اضافه می نماییم. در قدم بعدی خاصیت opacity را به 0 و مقدار hover را به 1 تعیین می کنیم ، این کار باعث ایجاد افکت fade in / fade out می شود. البته کار هنوز به اتمام نرسیده است ، برای ایجاد افکت باز شدن زیر منو باید ارتفاع لیست یا همان height آنرا در هنگامی که مخفی است به 0px تنظیم می کنیم و زمانی که موس روی آن می رود آنرا به 36px تبدیل می نماییم.
[sourcecode language=”css”]
.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 > 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;
}
[/sourcecode]
ما باید در این مرحله عرض یا همان width مربوط به لینک زیر منو را به 100px تعیین می کنیم. بجای افزودن حاشیه به سمت چپ و راست این خاصیت را به بخش زیرین اضافه می نماییم و البته برای تمامی لینک ها به غیر از لینک آخر.
[sourcecode language=”css”]
.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; }
[/sourcecode]
برای اتمام این منو فقط کافی است آیکون ها را به آن اضافه نماییم ، این آیکون ها را برای زیر منو ها در نظر گرفته ایم ، برای این کار به راحتی کافی است کلاس های خاص تهیه نماییم و برای هر یک آیکون مورد نظر را فراخوانی نماییم :
[sourcecode language=”css”]
.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; }
[/sourcecode]
این هم نتیجه ی پایانی کار :
جهت مشاهده نمونه عملی این آموزش در سایت اصلی بر روی دکمه زیر کلیک کنید:
مطالب مرتبط:
کتاب طراحی وب به صورت گام به گام
می خواهم یک طراح وب حرفه ای شوم! – شماره 1
بسیار ممنونم.
من یه تازه وارد به دنیای طراحی وب هستم.این مطلب خیلی بهم کمک کرد.
اما یه مشکلی هست در اخر کار زیرمنوها نمایش داده نمیشن!!
چند بار کدهایی رو که خودم نوشتم رو بررسی کردم اما همه کدها کاملا شبیه کدهای شما بودن.
حتی چند بار هم کدهای شما رو کپی و پیست کردم ام بازم نشد.!!
خواهش میکنم ببینید مشکل از کجاست؟
http://p30emrooz.xzn.ir
شما نمونه ای چیزی دارین که بشه دیدش؟ این نمونه توی این سایتی که دادین هست؟
بله
این آدرس فایل اچ تی ام ال:
http://www.4shared.com/document/uKogiS7v/test.html
و این هم آدرس فایل سی اس اس:
http://www.4shared.com/document/24TvdKVu/style.html
اگر مشکل از کدهای منه ممنون میشم من رو راهنمایی کنید.
دوست عزيز كد سايت منبع بهتر از كد سايت شما كار مي كند.
نمونه :
http://ipsat.iwebz.org/menu.php
لطفاً كدها رو بازنويسي كنيد.
باتشكر
سلام
کدهایی رو که گذاشتین کپی کردم ولی زیر منوها و هاور دکمه ها کار نمیکنه.