ایجاد منوی پیمایش فقط با CSS3

ایجاد منوی پیمایش فقط با CSS3

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

برای مشاهده لینک وارد شود

HTML

در بخش مربوط به html ما کار زیادی نداریم و فقط ما نام منو های خود را وارد می کنیم.

		<ul class="menu">
			<li><a href="#"><span class="iconic home"></span> خانه</a></li>
			<li><a href="#"><span class="iconic plus-alt"></span> درباره ما </a>
				<ul>
					<li><a href="#">تاریخچه شرکت</a></li>
					<li><a href="#">ملاقات با اعضا</a></li>
				</ul>
			</li>
			<li><a href="#"><span class="iconic magnifying-glass"></span> خدمات</a>
				<ul>
					<li><a href="#">طراحی وب</a></li>
					<li><a href="#">توسعه نرم افزار</a></li>
					<li><a href="#">خدمات رایانامه</a></li>
					<li><a href="#">کپی رایت</a></li>
				</ul>
			</li>
			<li><a href="#"><span class="iconic map-pin"></span> محصولات</a>
				<ul>
					<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>
					<li><a href="#">سخت افزار های موبایلی</a></li>
				</ul>
			</li>
			<li><a href="#"><span class="iconic mail"></span> تماس با ما</a>
				<ul>
					<li><a href="#">تماس با ما</a></li>
					<li><a href="#">موقعیت ما در نقشه</a></li>
				</ul>
			</li>
		</ul>

همانطور که در بالا مشاهده می کنید ما با استفاده از یک لیست نامرتب(ul) آیتم های مورد نیاز خود را اضافه کردیم.ما همچنین برای هر یک از آیتم ها میخواستیم زیر منو داشته باشد ،یک لیست نامرتب دیگری در داخل آن ایجاد کردیم.

به کلاس های استفاده شده در هر آیتم توجه کنید.ما برای نمایش فونت گرافیکی که نیاز داشتیم از کلاس های موجود در iconic استفاده کردیم که ما آن را در ابتدای فایل html خود وارد کرده ایم.

CSS

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

body {
	background: url('img/denim.png');
	font-family: 'Droid Sans', sans-serif;;
}

.
.
.
.

.menu li {
	float: right;
	position: relative;
        text-align: right;
}

.menu li a {
	color: #444;
	display: block;
	font-size: 14px;
	line-height: 20px;
	padding: 6px 12px;
	margin: 8px 8px;
	vertical-align: middle;
	text-decoration: none;
}

.menu li a:hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
	background-image: linear-gradient(#ededed, #fff);
	border-radius: 12px;
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
	color: #222;
}

ما در ابتدا برای تصویر زمینه یک الگو(pattern) که بصورت تصویر می باشد قرار داده ایم .سپس استایل مربوط به منو ها و همچنین استایل مربوط به قرار گیری موس بر روی هر یک از آنها را نوشته ایم.ما منو ها را از راست چیدمانشان را انجام داده ایم  و چیدمان متن را نیز از راست برایشان تعریف کرده ایم.همچنین برای زمانی که موس بر روی آنها قرار می گیرد نیز یک تصویر تعیین کرده ایم که با قرار گیری موس بر روی آنها به نمایش در خواهد آمد.

.menu ul {
	position: absolute;
	left: -9999px;
	list-style: none;
	opacity: 0;
	transition: opacity 1s ease;
}

.menu ul li {
	float: none;
}

ما برای زیر منوها استایل ها فوق را تعیین کرده ایم.ما برای جابجایی زیر منوها از خاصیت transition استفاده کرده ایم و مقدار آن را به یک ثانیه تنظیم کرده ایم.

.menu li:hover ul {
	background: rgba(255,255,255,0.7);
	border-radius: 0 0 6px 6px;
	box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
	left: 5px;
	opacity: 1;
}

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

.menu li:hover a {
	background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));
	background-image: linear-gradient(#ccc, #ededed);
	border-radius: 12px;
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
	color: #222;
}

.menu li:hover ul a {
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.menu li:hover ul li a:hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));
	background-image: linear-gradient(#ededed, #fff);
	border-radius: 12px;
	box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
}

ما همچنین برای نمایش زیر منوها  و همچنین قرار گیری موس بر روی آنها از استایل های بالا استفاده کرده ایم.e

 

پایان

0
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


سه − = 2