آموزش ساخت منو با css

سلام با آموزش ساخت منو انیمشن یا به اصطلاح متحرک در خدمت کاربران ملت وب می باشیم .

این منو کاملا با css نوشته شده است و بسیار سبک می باشد دارای طراحی فلت و زیبا می باشد .

کاملا مناسب جهت استفاده در قالب هایتان امیدوارم خوشتان آمده باشد.

کد های html

اکثر منو ها بر اساس لیست یا تگ های <UI> و <li> نوشته می شوند که این کد نیز نمونه ای از آن ها می باشد که ul به عنوان پدر لیست و li به عنوان فرزندان یک لیست در نظر گرفته می شوند . کد های زیر نیز گویایی این مسئله می باشد .

<nav id="colorNav">
	<ul>
		<li class="green">
			<a href="#" class="icon-home"></a>
			<ul>
				<li><a href="#">Dropdown item 1</a></li>
				<li><a href="#">Dropdown item 2</a></li>
				<!-- More dropdown options -->
			</ul>
		</li>

		<!-- More menu items -->

	</ul>
</nav>

کد های Css

#colorNav > ul{
	width: 450px;
	margin:0 auto;
}

کد بالا نشان دهنده این می باشد که شما از آیدی #colorNav زیر مجموعه ul یک عرض با 450 پیکسل تعریف میکنیم می توانیم این مقدار را بیشتر نیز نمایید و margin نیز (همان حاشیه) 0 در نظر میگیریم

استایل های لیست 

#colorNav > ul > li{ /* will style only the top level li */
	list-style: none;
	box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
	display: inline-block;
	line-height: 1;
	margin: 1px;
	border-radius: 3px;
	position:relative;
}

دوستان هر کدام از خط ها یک عملی را انجام می دهند که میتوانید با غیر فعال کردن آن به کاربردشان دستیابی پیدا نمایید حال مهمترین مسئله در این بخش کاربرد  display: inline-block; می باشد که باعث می شود آیتم ها در کنار هم قرار بگیرند یعنی به هم ریخته نباشند.

استایل دهی به لینک منو ها

#colorNav > ul > li > a{
	color:inherit;
	text-decoration:none !important;
	font-size:24px;
	padding: 25px;
}

این بخش به رنگ متون منو ها و حاشیه های آن را استایل سازی می نمایید مهمترین المنت این بخش padding: 25px; می باشد که باعث می شود حاشیه درون منو بیشتر یا کمتر باشد.

انیمشن سازی در منو

#colorNav li ul{
	position:absolute;
	list-style:none;
	text-align:center;
	width:180px;
	left:50%;
	margin-left:-90px;
	top:70px;
	font:bold 12px 'Open Sans Condensed', sans-serif;

	/* This is important for the show/hide CSS animation */
	max-height:0px;
	overflow:hidden;

	-webkit-transition:max-height 0.4s linear;
	-moz-transition:max-height 0.4s linear;
	transition:max-height 0.4s linear;
}

باز بسته کردن منو (کرکره ای)

#colorNav li ul li{
	background-color:#313131;
}

#colorNav li ul li a{
	padding:12px;
	color:#fff !important;
	text-decoration:none !important;
	display:block;
}

#colorNav li ul li:nth-child(odd){ /* zebra stripes */
	background-color:#363636;
}

#colorNav li ul li:hover{
	background-color:#444;
}

#colorNav li ul li:first-child{
	border-radius:3px 3px 0 0;
	margin-top:25px;
	position:relative;
}

#colorNav li ul li:first-child:before{ /* the pointer tip */
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#313131;
	left:50%;
	top:-10px;
	margin-left:-5px;
}

#colorNav li ul li:last-child{
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
}

رنگ بندی منو ها 

#colorNav li.green{
	/* This is the color of the menu item */
	background-color:#00c08b;

	/* This is the color of the icon */
	color:#127a5d;
}

#colorNav li.red{		background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{		background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{	background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{	background-color:#df6dc2;color:#9f3c85;}