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

[آگونیس]

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

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

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

01	<ul class="menu">

02

03	<li><a href="#">پیشخوان</a></li>

04	<li><a href="#">لینک ها</a></li>

05	<li><a href="#">نمایش</a>

06

07

<ul>

08	<li><a href="#" class="documents">برنامه ها</a></li>

09	<li><a href="#" class="messages">پیغام ها</a></li>

10	<li><a href="#" class="signout">خروج از سایت</a></li>

11

</ul>

12

13

</li>

14	<li><a href="#">بارگذاری فایل</a></li>

15	<li><a href="#">ویدئو</a></li>

16	<li><a href="#">برنامه ها</a></li>

17

18

</ul>

پیش نمایش:

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

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

01

.menu {

02	height: 40px;

03	width: 435px;

04	direction:rtl;

05	background: #4c4e5a;

06	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

07	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

08	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

09	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

10	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

11

12	-webkit-border-radius: 5px;

13	-moz-border-radius: 5px;

14	border-radius: 5px;

15

}

16

17	.menu li {

18	position: relative;

19	list-style: none;

20	float: right;

21	display: block;

22	height: 40px;

23

}

مرحله سوم: CSS لینک های منو

در این مرحله در استایل لینک های منو فاصله ها را مشخص می کنیم. رنگ فونت ها سایه و… در این قسمت قرار خواهند گرفت

01

02	.menu li a {

03	display: block;

04	padding: 0 14px;

05	margin: 6px 0;

06	line-height: 28px;

07	text-decoration: none;

08

09	border-left: 1px solid #393942;

10	border-right: 1px solid #4f5058;

11

12	font-family: Tahoma, Arial, sans-serif;

13	font-weight: normal;

14	font-size: 12px;

15

16	color: #f3f3f3;

17	text-shadow: 1px 1px 1px rgba(0,0,0,.6);

18

19	-webkit-transition: color .2s ease-in-out;

20	-moz-transition: color .2s ease-in-out;

21	-o-transition: color .2s ease-in-out;

22	-ms-transition: color .2s ease-in-out;

23	transition: color .2s ease-in-out;

24

}

25

26	.menu li:first-child a { border-left: none; }

27	.menu li:last-child a{ border-right: none; }

28

29	.menu li:hover > a { color: #8fde62; }

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

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

01	.menu ul {

02	position: absolute;

03	top: 40px;

04

right: 0;

05	opacity: 0;

06	background: #1f2024;

07	-webkit-border-radius: 0 0 5px 5px;

08	-moz-border-radius: 0 0 5px 5px;

09	border-radius: 0 0 5px 5px;

10	-webkit-transition: opacity .25s ease .1s;

11	-moz-transition: opacity .25s ease .1s;

12	-o-transition: opacity .25s ease .1s;

13	-ms-transition: opacity .25s ease .1s;

14	transition: opacity .25s ease .1s;

15

}

16

17	.menu li:hover > ul { opacity: 1; }

18

19	.menu ul li {

20	height: 0;

21	overflow: hidden;

22	padding: 0;

23	-webkit-transition: height .25s ease .1s;

24	-moz-transition: height .25s ease .1s;

25	-o-transition: height .25s ease .1s;

26	-ms-transition: height .25s ease .1s;

27	transition: height .25s ease .1s;

28

}

29

30	.menu li:hover > ul li {

31	height: 36px;

32	overflow: visible;

33	padding: 0;

34	direction:rtl;

35

}

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

1	.menu ul li a {

2	width: 100px;

3	padding: 4px 30px 4px 0;

4	margin: 0;

5	border: none;

6	border-bottom: 1px solid #353539;

7

}

8

9	.menu ul li:last-child a { border: none; }

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

1	.menu a.documents { background: url(../img/docs.png) no-repeat right; }

2	.menu a.messages { background: url(../img/bubble.png) no-repeat right; }

3	.menu a.signout { background: url(../img/arrow.png) no-repeat right; }

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


مشخصات فایل :

حجم فایل : 78 کیلوبایت تاریخ انتشار : ۱۲ اردیبهشت ۱۳۹۱

پیش نمایش :

• پیش نمایش اصلی

دریافت فایل از پرشین اسکریپت :

http://dl.persianscript.ir/script/css3-dropdown-menu.zip

رمز عبور فایل : www. persianscript .ir