آموزش ساخت منوی سایت گوگل – Google

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

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

بروزرسانی شده در: 9 ماه قبل

مطالب مشابه

16 دیدگاه

  • سلام , مهمان
  • سلام خیلی خوب بود ولی همه کار رو خودتون انجام داده بودید ما فقط یک کد رو کپی کردیم :دی
  • سپاس بابت آموزش چه کنیم که این منو با مرور صفحه پایین بیاد یعنی ثابت نباشه ؟؟
  • با سلام سایت خیلی خوب و پر محتوایی دارید . خوشحال میشم با هم تبادل لینک کنیم . اگه شما هم با تبادل لینک یا تبادل تبلیغات متنی موافقید لطفا منو با اسم ویکی دانلود ها لینک کنید و بعد به سایت ما هم سری بزنید و بگید شما را با چه اسمی لینک کنیم . با تشکر تیم مدیریت ویکی دانلود ها www.wikidownloadha.ir wikidownloadha@yahoo.com
  • سلام میدونم اینجا جای سوال کردن نیست و باید به تالار مراجعه کرد ولی ممنون میشم همین جا بگید کجا باید اون تب ها رو لینک دار کرد جای لینک هاش کجاست
  • درست شد دوست عزیز اون کدی که بالا قرار دادید خط اولش نیست Home About us Our Services Our Technologies Contact us ممنون
  • خیلی خوب هست اما برای من هر جای استایل و قالب میزارم فقط 4 5 خط نشون میده که حتی لینک هم ندارن میشه بگید کجای css باید قرار داد ؟ من هرجا میزارم کار نمیکنه
  • سلام ممنون کاشکی آموزش درست کردن ساب منوها رو هم توضیحی میدادی
  • سلام... من از سایت شما خیلی خوشم اومد آخه عکس پست ها رو یهو نشون نمیده که باعث کندی باز شدن سایت بشه و با حرکت اسکرول بار عکس نمایش داده میشه... می شه آموزشش رو بدید؟
+3800

روز فعالیت سایت

+57,358

کاربر عضو

+22,152

مبحث در تالارگفتگو

+117,999

پاسخ در تالارگفتگو

+10.000

دیدگاه ثبت شده

+2000

قالب،اسکریپت و افزونه