سبد خرید

نمایش خلاصه ای از خرید هایی که شما انجام خواهید داد

سبد خرید خالی می باشد
مبلغ کل
0
تسویه حساب

آموزش ساخت منو با css
حميد  شریفی
حميد شریفی
تعداد کل دانلود ها : 568378
تعداد کل مطالب : 1104

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

تعداد دانلود:
257
تعداد بازدید:
2341
تاریخ:
۱۳۹۶-۰۱-۱۹
دسته بندی:

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

این منو کاملا با 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;}

 

 

  •  

محصولات مشابه فروشی
هشتگ ها :

این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید

ارسال نظر

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

  • تلفن : 04136383693
  • پیامک : 500020606688
  • آدرس : آذربایجان شرقی، تبریز، شهرک مصلی، خیابان راجی، راجی 4، کوچه بیست هشتم، قطعه 1339، طبقه چهارم

ملت وب در سال 1393 فعالیت خود را در چهار بخش قالب های آماده، طراحی لوگو، طراحی سایت، طراحی بنر آغاز کرده است، که در مدت بسیار کم با تلاش های بی وقفه خود و همکاران توانسته بزرگترین وب سایت ارائه دهنده قالب های با کیفیت در ایران باشد رمز موفقیت شرکت ملت وب پشتیبانی بی دریغ از کاربران خود می باشد ما موقعیت خود را مدیون مشتریان وفادار خود هستیم پس همیشه همراهشان خواهیم بود .

  • logo-samandehi