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

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

​

​

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

کد:

[/RIGHT]
 1<ul>
2 <li>Home</li>
3 <li>About us</li>
4 <li>Our Services</li>
5 <li>Our Technologies</li>
6 <li>Contact us</li>
7</ul>


 حالا کافیستکد های CSS را در قسمت style قالب خود قرار دهید.
 01ul.googleTab                {
02    background: #848383;
03    padding:0 5px;
04    font-size:13px;
05    color:#3366cc;
06    overflow:hidden;
07 
08    background:-moz-linear-gradient(0% 100% 90deg,#f5f5f5, #ffffff);
09    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#f5f5f5));
10}
11ul.googleTab li {
12    float:left;
13    padding:7px 8px;
14    border-top:solid 2px #bad3ea;
15}
16ul.googleTab li.active{
17    border-top: solid 3px #1a54e1;
18    color:#363636;
19    font-weight:bold;
20}
21ul.googleTab li:hover   {
22    background:#e4ebf8;
23    cursor:pointer;
24}

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