امین بهشتی

Design Tutorials

طراحی وِب و گرافیک

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

در این آموزش به شما یاد می‌دهیم که چطور با استفاده از تکنیک‌های CSS3 یک منوی کِشویی مرتب و تمیزی بسازید!

گام 1 : نشانه‌گذاری HTML

یک لیست نامرتب از آیتم‌هایی می‌سازیم که هر کدام از لینک‌های منو یک تگ anchor دارد. برای ساختن زیر مِنو، یک لیست نامرتب دیگری در داخل لیست کنونی می‌سازیم.

<ul class="menu">

	<li><a href="#">صفحه پیش خان</a></li>
	<li><a href="#">علاقه مندی ها</a></li>
	<li><a href="#">نظرها</a>

		<ul>
			<li><a href="#" class="documents">مستندات</a></li>
			<li><a href="#" class="messages">پیام ها</a></li>
			<li><a href="#" class="signout">خروج</a></li>
		</ul>

	</li>
	<li><a href="#">بارگزاری ها</a></li>
	<li><a href="#">ویدیوها</a></li>
	<li><a href="#">مستندات</a></li>

</ul> <!-- end .menu -->

گام 2 : طرح منو

ابتدا margin ، paddgin و border تمام اجزاء لیست را خذف می‌کنیم. سپس یک ارتفاع و عرض معین و گوشه‌های گرد شده و gradientهای CSS3 به منو اضافه می‌کنیم. برای اینکه لیست بصورت افقی ردیف شود لیست را در سمت راست float می‌کنیم. همچنین باید position را به relative ست کنیم، زیرا برای ردیف کردن زیر مِنوها لازم خواهیم داشت.

/* Reset */
.menu,
.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

/* Menu */
.menu {	
	height: 40px;
	width: 485px;

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

برای اینکه در این مراحل اولیه بتوانیم راحتتر روند استایل‌دهی را انجام دهیم، زیر مِنو را موقتاً پنهان می‌کنیم.

.menu ul { display: none; }

گام 3 : لینکهای منو

برای اینکه به لینک‌ها منو استایل بدهیم، برخی خواص پایه CSS مثل font، color، padding و … استفاده می‌کنیم. سپس یک سایه متن تیره و یک color transition اضافه می‌کنیم تا لینک‌ها در هنگام hover شدن افکت صاف و روانی به خود بگیرند. برای ایجاد تفکیک‌کنندۀ لینک‌ها، به راست و چپ آنها یک border اضافه می‌کنیم و سپس border راستِ اولین لینک و border چپِ آخرین لینک را خذف می‌کنیم. برای حالت hover فقط رنگ متن را تغییر می‌دهیم.

.menu li a {
	display: block;
	padding: 0 14px;
	margin: 6px 0;
	line-height: 28px;
	text-decoration: none;
	
	border-right: 1px solid #393942;
	border-left: 1px solid #4f5058;

	font-family: Tahoma, Arial, sans-serif;
	font-weight: bold;
	font-size: 10px;

	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-right: none; }
.menu li:last-child a{ border-left: none; }

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

گام 4 : زیر مِنو

اول این خط کدی که چند لحظه پیش بصورت موقت اضافه کردi بودیم را حذف می‌کنیم.

.menu ul { display: none; }

اکنون زیر مِنو را استایل می‌دهیم. با ست کردن position زیر منو در فاصله 40 پیکسلی از بالا و 0 پیکسل از سمت راست آیتم منو شروع می‌کنیم و گوشه‌های پایینی گرد شده‌ای را اضافه می‌کنیم. opacity را به 0 و در حالت hover به 1 ست می‌کنیم تا افکت fade in/out ایجاد شود. برای افکت باز و بسته شدن منو (بالا/پایین شدن) بایستی ارتفاع را در هنگام مخفی بودن به 0px و در حالت hover به 36px ست کنیم.

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

عرض لینک‌های زیرمِنو را به 100px تنظیم می‌کنیم. بجای borderهای چپ و راست، یک border پایینی اضافه می‌کنیم و border آخری را حذف می‌کنیم.

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

برای اتمام کار تنها کافیست یک آیکون برای هر لینک زیر مِنو اضافه کنیم. برای این کار برای هر یک از آنها یک کلاس شخصی ایجاد می‌کنیم و برای هر کدام یک پس‌زمینه اضافه می‌کنیم.

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

رمز عبور برای باز کردن فایل : www.dtuts.net

منبع: DesignModo

درباره امین بهشتی

یک ایرانی ترک زبان که علاقه زیادی به طرّاحی وِب و گرافیک دارد!
در این سایت سعی می‌کنم مطالب جالب، مفید و کاربردی را در جهت آموزش به اشتراک بگذارم!
امیدوارم لحظات خوشی را در سایت سپری نمایید و مطالب سایت مورد استفاده شما قرار بگیرد.
سپاس

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

  2. عزیز و دستت درد نکنه…
    مطلب خیلی مفیدی بود و خیلی کمکم کرد…
    یک سوال؟!!
    اگر بخواهیم یک استایل خاص برای لینک یا دکمه ای از این منو ها تعریف کنیم(مثل استایلی که هنگام mouse hover به منو دادید) باید چه چیزی اضافه کنیم…
    تشکر…

    • سلام، خواهش می‌کنم،

      شما اول باید مشخص کنید که چه استایلی می‌خواهید اضافه کنید، و برای این کار باید با کدهای CSS آشنایی داشته باشید.
      لینک زیر شاید بتونه یکم کمک‌تان کنه:
      http://www.w3schools.com/cssref/sel_hover.asp

      واژه های زیر را هم گوگل کنید شاید نمونه‌های بهتری بیاره براتون :
      mousehover css effects

      بر فرض می‌خواهید موقع hover شدن ماوس روی لینک‌ها، پس زمینه‌اش قرمز شه، در کدهایی که در گام سوم آموزش معرفی شده کد زیر را زیر را پیدا کنید:

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

      و کد زیر را بهش اضافه کنید :

      background: red;
      

      که بعد از اضافه کردن باید به صورت زیر در بیاد :

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

درصورت تمایل برای ارسال دیدگاه‌تان از فرم زیر می‌توانید استفاده کنید ↓

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

(الزامی*)

می‌توانید از نشان و برچسب‌های HTML زیر در متن دیدگاه‌تان استفاده کنید:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
(الزامی*)
(اختیاری)

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