How To Create a Menu like Apple Style Menubar For Blogger

{[["☆","★"]]}

[tintuc]

With this article I share with you how to create a menu like apple.com site.You can view the demo at apple.com site, and now I will guide you through the tips.

See the screenshot below

» Begin tips

1. Login to your Blogger account
2. Click Template
3. Select Edit HTML
4. Find (Ctrl F) & Insert the below CSS code just before ]]></b:skin>

#appleNav form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtBj1rkKfY7GtUIqeerf1FS2dgN1RalqZI4K8DVll2nZU6A5x4MUj7bss9GHL8Iy_hQuwJYDONLWMVUaquL0DSC5Yszc-AVR1pgRxD6sB19w5ZnidoYCYqcB0DNJJg0sU7ixalSsHGYNG7/s1600/btrix_magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtBj1rkKfY7GtUIqeerf1FS2dgN1RalqZI4K8DVll2nZU6A5x4MUj7bss9GHL8Iy_hQuwJYDONLWMVUaquL0DSC5Yszc-AVR1pgRxD6sB19w5ZnidoYCYqcB0DNJJg0sU7ixalSsHGYNG7/s1600/btrix_magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
background-repeat: no-repeat;
background-color:#6E6E6E; /* Fallback */
-moz-box-shadow: inset 0 2px 1px 1px #363636;
-webkit-box-shadow: inset 0 2px 1px 1px #363636;
box-shadow: inset 0 2px 1px 1px #363636;
}
#appleNav li:first-child {
-moz-border-radius:4px 0 0 4px;
-webkit-border-radius:4px 0 0 4px;
border-radius:4px 0 0 4px;
border-left:none;
}
#appleNav li:first-child a img {
vertical-align:middle; margin-top:-2px;
}
#appleNav li:last-child {
-moz-border-radius:0 4px 4px 0;
-webkit-border-radius:0 4px 4px 0;
border-radius:0 4px 4px 0;
border-right:none;
width:124px;
}
/* Fade in animation (Webkit only) */
@-webkit-keyframes showMenu {
from { opacity: 0; top:-20px; }
to { opacity: 1; }
}
#appleNav {
-webkit-animation: showMenu 1s; position:relative;
}​

5. Save the template and return to the Layout
6. Click Add Gadget, select HTML / JavaScript and add the below code

<nav>
<ul id="appleNav">
<li><a href="http://www.bloggertrix.com/" title="Apple"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVDtDCadtUjXp9n7Ovu1sJNYV4B262qbzxXRn_AynhFisHq_kbgH3zggcztoju4io5mvgJYPkQ-Vquc9Kd-GtNTPyTaKC0Rqe32qfV8D6MklOBkukZXk6dwwJxXG9rqU4jKfrcNrrb_WW6/s1600/btrix_logo.png" alt="Apple Logo" /></a></li>
<li><a href="#" title="Store">Store</a></li>
<li><a href="#" title="Mac">Mac</a></li>
<li><a href="#" title="iPod">iPod</a></li>
<li><a href="#" title="iPhone">iPhone</a></li>
<li><a href="#" title="iPad">iPad</a></li>
<li><a href="#" title="iTunes">iTunes</a></li>
<li><a href="#" title="Support">Support</a></li>
<li>
<form>
<input type="text" />
</form>
</li>
</ul>
</nav>

Replace # with your links.

7. Now save your HTML / JavaScript

You are done...

bloggertrix.com

[/tintuc]