موتور جستجوی قدرتمند گوگل چندی پیش تغییراتی در منوی سایت خود ایجاد کرد. در این مطلب قصد داریم آموزش ساخت چنین منویی , با استفاده از 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;
}

 

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

دانلود و اطلاعات بیشتر
چرا فایل های پرشین اسکریپت رایگان است؟

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

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

نظرات

3 2 رای ها
رأی دهی به مطلب
اشتراک در
اطلاع از
guest

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

سلام خیلی خوب بود ولی همه کار رو خودتون انجام داده بودید ما فقط یک کد رو کپی کردیم :دی

ای پی کی نیوز
10 سال قبل

بسیار پرکاربرد و مفید .

محمد
11 سال قبل

سپاس بابت آموزش
چه کنیم که این منو با مرور صفحه پایین بیاد یعنی ثابت نباشه ؟؟

حمید
11 سال قبل

خوب بود ادامه بدید!

حمید
11 سال قبل

با سلام
سایت خیلی خوب و پر محتوایی دارید . خوشحال میشم با هم تبادل لینک کنیم . اگه شما هم با تبادل لینک یا تبادل تبلیغات متنی موافقید لطفا منو با اسم ویکی دانلود ها لینک کنید و بعد به سایت ما هم سری بزنید و بگید شما را با چه اسمی لینک کنیم .
با تشکر
تیم مدیریت ویکی دانلود ها
http://www.wikidownloadha.ir
wikidownloadha@yahoo.com

علی
11 سال قبل

چطور برم این قسمت میشه توضیه بیدید ممنون میشم

سی صد
12 سال قبل

سلام میدونم اینجا جای سوال کردن نیست
و باید به تالار مراجعه کرد
ولی ممنون میشم همین جا بگید کجا باید اون تب ها رو لینک دار کرد جای لینک هاش کجاست

پیمان
12 سال قبل

دقیق نیست و زمان هاش اشتباه است

mohammad
13 سال قبل

آخ کد رو نشون نمیده یادم نبود

mohammad
13 سال قبل

درست شد
دوست عزیز اون کدی که بالا قرار دادید خط اولش نیست

Home
About us
Our Services
Our Technologies
Contact us

ممنون

mohammad
13 سال قبل

خیلی خوب هست اما برای من هر جای استایل و قالب میزارم فقط 4 5 خط نشون میده که حتی لینک هم ندارن
میشه بگید کجای css باید قرار داد ؟ من هرجا میزارم کار نمیکنه

amir
13 سال قبل

بسیار عالی!ممنون!

علی حاجی محمدی
13 سال قبل

سلام ممنون کاشکی آموزش درست کردن ساب منوها رو هم توضیحی میدادی

بهروز
13 سال قبل

سلام…
من از سایت شما خیلی خوشم اومد آخه عکس پست ها رو یهو نشون نمیده که باعث کندی باز شدن سایت بشه و با حرکت اسکرول بار عکس نمایش داده میشه…
می شه آموزشش رو بدید؟

ساسان
ساسان
13 سال قبل

جالب بود ممنونم….. موفق باشید

پوریا
پوریا
13 سال قبل

جالب بود ممنون