موتور جستجوی قدرتمند گوگل چندی پیش تغییراتی در منوی سایت خود ایجاد کرد. در این مطلب قصد داریم آموزش ساخت چنین منویی , با استفاده از CSS3 را به شما آموزش دهیم.

http://dl.persianscript.ir/img/google-nav.jpg

در ابتدا با استفاده از ul و li یک لیست ایجاد میکنیم. شما میتوانید این قسمت را در هر جای قالب قرار دهید تا منو نمایش داده شود

<ul>
 <li>Home</li>
 <li>About us</li>
 <li>Our Services</li>
 <li>Our Technologies</li>
 <li>Contact us</li>
</ul>

حالا کافیستکد های CSS را در قسمت style قالب خود قرار دهید.

ul.googleTab				{
	background: #848383;
	padding:0 5px;
	font-size:13px;
	color:#3366cc;
	overflow:hidden;

	background:-moz-linear-gradient(0% 100% 90deg,#f5f5f5, #ffffff);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#f5f5f5));
}
ul.googleTab li	{
	float:left;
	padding:7px 8px;
	border-top:solid 2px #bad3ea;
}
ul.googleTab li.active{
	border-top: solid 3px #1a54e1;
	color:#363636;
	font-weight:bold;
}
ul.googleTab li:hover	{
	background:#e4ebf8;
	cursor:pointer;
}

 

برای نمایش دمو اینجا و برای دانلود سورس اینجا کلیک کنید

5 1 رای
رأی دهی به مطلب
چرا فایل های پرشین اسکریپت رایگان است؟

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

برچسب ها: آموزش css آموزش html آموزش ساخت منو منوی سایت گوگل منوی گوگل

نظرات

guest
16 نظرات
قدیمی ترین
تازه‌ترین بیشترین واکنش نشان داده شده(آرا)
بازخورد (Feedback) های اینلاین
مشاهده همه نظرات