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