تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

دوشنبه 13 آبان 1392

آموزش ساخت منوی عمودی با استفاده از CSS

نویسنده: امیر حسینی   

منو عمودی با استفاده از CSS


 در این مطلب نسخه عمودی همان منو را با استفاده CSS اجرا خواهیم کرد کد HTML ما با استفاده از ul و li نوشته شده و تنها تفاوت موجود استفاده از خاصیت block به جای inline-block است.
پیش نمایش منو عمودی با استفاده از CSS را به صورت آنلاین از طریق این لینک مشاهده کنید.

ترکیب کد HTML به ترتیب زیر است:


<ul id="menu">
	<li><a href="#">خانه</a></li>
	<li><a href="#">محصولات</a></li>
	<li><a href="#">سفارش</a></li>
	<li><a href="#">راهنما</a></li>
	<li><a href="#">تماس با ما</a></li>
</ul>


و در استایل قالب:


#menu{
	margin: 10% auto;
	display: block;
	width: 120px;
	width: 123px\9; /*IE Hack*/
	height: 205px;
	border: 1px solid #77BBBB;
	border-bottom: 0px;
	box-shadow: 0px 0px 3px -1px #55AAAA;
	-webkit-box-shadow: 0px 0px 3px -1px #55AAAA;
}
#menu li{
	display: block;
	overflow: hidden;/*برای اینکه متن از بلوک تعیین شده خارج نشود*/
	background-color: #99CCCC;
}
#menu li a{
	display: block;
	height: 20px;
	width: 100px;
	width: 103px\9; /*IE Hack*/
	padding: 10px 5px 10px 15px;
	border-bottom: 1px solid #77BBBB;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #55AAAA;
	text-shadow: 0px 1px 0px #BBDDDD;
}


و استایل برای وقتی که موس بر روی منو ها قرار می گیرد:


#menu li:hover{
	background-color: #88C3C3;
}
#menu li:hover a{
	color: #4D9999;
	text-shadow: 0px 1px 0px #AAD4D4;
}
#menu li a:hover{
	color: #4D9999;
	text-shadow: 0px 1px 0px #AAD4D4;
}


برای اینکه زیر مجموعه منوها را نمایش دهیم نیاز هست که با استفاده از تگ div و کلاس استایل های مورد نظر را تعریف کنیم. پس در HTML اضافه می کنیم:


<ul id="menu">
	<li><a href="#">خانه</a></li>
	<li class="submenu"><!--از این کلاس برای اضافه کردن آیکن استفاده می شود-->
		<a href="#">محصولات</a>
		<div class="sub"><!--تگ زیر مجموعه منو ما-->
			<a href="#">محصول یک</a>
			<a href="#">محصول دو</a>
			<a href="#">محصول سه</a>
		</div>
	</li>
	<li><a href="#">سفارش</a></li>
	<li class="submenu">
		<a href="#">راهنما</a>
		<div class="sub">
			<a href="#">راهنمای خرید</a>
			<a href="#">راهنمای نصب</a>
			<a href="#">قوانین استفاده</a>
		</div>
	</li>
	<li><a href="#">تماس با ما</a></li>
</ul>


و استایل برای زیر مجموعه منوها:


#menu .submenu{
	background: url(img/arrow.png) no-repeat left center #99CCCC;
}
#menu li .sub{
	display: none;/*در حالت عادی مخفی باشد*/
	position: absolute;/*برای اینکه مستقل از منو اصلی عمل کند*/
	margin: -42px 120px 0 0;
	margin-right: 123px\9; /*IE Hack*/
	border: 1px solid #77BBBB;
	border-bottom: 0px;
}
#menu li:hover .sub{
	display: block;/*با رفتن موس بر روی منو نمایان شود*/
}
#menu .sub a{
	background-color: #99CCCC;
	font-size: 15px;
	overflow: hidden;
}
#menu .sub a:hover{
	background-color: #88C3C3;
}


پیش نمایش منو عمودی با استفاده از CSS به صورت آنلاین [کلیک کنید]

نظرات() 
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com