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

در این قسمت قصد داریم نحوه ی ساخت منوی موتور جستجوگر گوگل را با استفاده از CSS3 به شما آموزش بدهیم.

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

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

حالا کافیستکد های CSS را در قaسمت 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;
}