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

در این آموزش قصد داریم یک منوی LavaLamp را از به وسیله CSS3 طراحی کنیم.

[demo link=”http://bit.ly/wd_clm”]منوی lavalamp با استفاده از css3[/demo]

css3-lavalamp-menu

ابتدا از طریق HTML منوی خود را بصورت زیر ایجاد می‌کنیم.

<ul id="nav">
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">آموزش‌ها</a></li>
<li><a href="#">تماس</a></li>
<li><a href="#">درباره</a></li>
<div id="slider"></div>
</ul>

حالا استایل مورد نظرمان را بر روی nav اعمال می‌کنیم.

#nav {
background: white;
border: 1px solid #CACACA;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 3px 1px #ebebeb;
-moz-box-shadow: 0px 0px 3px 1px #ebebeb;
box-shadow: 0px 0px 3px 1px #ebebeb;
height: 40px;
width: 400px;
margin: 0 auto;
margin-top: 50px;
position: relative;
}

تا به حال کارهایی که انجام دادیم بیشتر مربوط به ظاهر منو بود و شما می‌توانید در ظاهر منوی خود تغییراتی را ایجاد کنید، اما به یاد داشته باشید در کدهای فوق لازم است مقدار position برابر relative قرار گیرد.

حالا ما برای لیست‌ها و لینک‌های داخلی نیز استایل مورد نظرمان را اعمال می‌کنیم.

#nav li {
float: right;
width: 100px;
height: 40px;
text-align: center;
}

#nav li a {
color: #717171;
font-family: Tahoma;
font-size: 14px;
line-height: 40px;
display: block;
width: 100px;
height: 40px;
}

آخرین قسمتی که نیاز به استایل دارد، آیدی slider در div آخر هست.

#slider {
left: 0px;
position: absolute;
top: 35px;
height: 5px;
background: #717171;
width: 100px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}

باز هم این نکته را ذکر می‌کنم که بیشتر موارد فوق در استایل‌بندی مربوط به سلیقه‌ی شخصی فرد است، ولی در برخی از موارد لازم است برخی از مقادیر ثابت باشند و تغییر نکنند تا در عملکرد منوی ما مشکلی بوجود نیاید. مثلاً مقدار position باید برابر با absolute باشد.

حال نوبت به مرحله‌ی آخر از کار رسیده، ما باید نحوه‌ی عملکر لرزانک زیر منو را تعیین کنیم که با توجه به استایل‌بندیمان آن را به صورت زیر ایجاد می‌کنیم.

#nav li:nth-child(1):hover ~ #slider {
left: 300px;
}

#nav li:nth-child(2):hover ~ #slider {
left: 200px;
}

#nav li:nth-child(3):hover ~ #slider {
left: 100px;
}

#nav li:nth-child(4):hover ~ #slider {
left: 0px;
}

کار تمام شد، حالا شما یک منو ایجاد کرده‌اید که هر گاه بر هر کدام از لینک‌های آن بروید، لرزانک زیر منو به حرکت در خواهد آمد و به زیر لینک اشاره خواهد کرد.

٪ نظرات