Did you ever wish to design a gorgeous menu like apple website has?
I am sure you must have visited the apple.com site once or more times before you got a chance to read this article. How many of you noticed the beautiful top horizontal
menu? If you are a developer/designer you must have thought of creating the similar for your site as well, didn’t you? This tutorial will help you to create this similar stunning apple.com like horizontal menu in couple of minutes and with minimal CSS and jQuery code.
Here is the screenshot of what we are going to design. Live demo is also available at the botom of this tutorial (Ah, do you want to jump over demo first? Yeah you can but do come back to this tutorial to get into code beauty).
It is based on linear gradient property supported by CSS3. This works on all browsers except legacy IE browsers like IE7, IE8 and IE9. Though I have added support for IE10. so let’s get started with it. I have broken this tutorial in three parts: css, html and jquery(optional). jQuery is an optional if you want to add an extra effect to your search box, you can add it in the page code else don’t add it.
First part: CSS3
/* the menu wrapper and the main design element */
#menuwrapper{
margin:10px 0px;
padding:0px;
width:auto;
background:#626262;
border: 1px solid #6a6a6a;
list-style:none;
font-family:"Lucida Grande", Geneva, Arial, Verdana, sans-serif;
/* round corner effect */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/* box shadow effect */
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
/* Safari 4-5, Chrome 2-9 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));
/* Safari 5.1, Chrome 10+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#777), to(#777), color-stop(.5,#555));
/* Firefox 3.6+ */
background: -moz-linear-gradient(100% 100% 90deg,#777, #555, #777 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #fafafa, #e5e5e5);
/* IE6 & IE7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');
/* IE8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";
/* IE 10 */
background: -ms-linear-gradient(top, #fafafa, #e5e5e5);
}
/* navigation style */
ul.nav{
padding:0;
margin:0;
width:auto;
}
/* menu item style, list item */
ul.nav li{
display: inline;
text-align:center;
list-style-type: none;
margin:0;
padding:0;
width:auto;
}
/* icon image should be 15px in height and 15px width for optimal view */
ul.nav li.home a img{
height:15px;
width:15px
}
/* menu item link design */
ul.nav li a{
padding:10px 30px 10px 30px;
display:block;
float:left;
font-size:0.78em;
color:#f3f3f3;
font-weight:normal;
text-decoration:none;
text-shadow:1px 1px 1px #505050;
border-right:1px solid #3a3a3a;
cursor:pointer;
}
/* mouse over effect of menu item */
ul.nav li a:hover{
padding:10px 30px 10px 30px;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#767676), to(#626262));
/* Safari 5.1, Chrome 10+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4a4a4a), to(#3a3a3a), color-stop(.5,#555));
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #4a4a4a, #3a3a3a);
/* IE 10 */
background: -ms-linear-gradient(top, #fafafa, #e5e5e5);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #fafafa, #e5e5e5);
text-shadow:1px 1px 1px #666;
}
/* search form wrapper style */
div.search{
float:right;
width:270px;
}
/* search form style */
div.search form{
margin:0;
padding:0;
float:right;
}
/* search form input style */
div.search form input{
padding:3px 3px 3px 17px;
margin:7px 5px;
width:180px;
color:#222;
background:url("search.png") #888 no-repeat left;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #4a4a4a;
outline:none;
}
/* clears floating from left and right */
.clear{
clear:both;
}
Second Part: html markup
Third Part: jQuery
If you want to add an extra effect on search box, you can do so by adding following code of jQuery:
$(document).ready(function() {
/* Expand the search box with highlighting effect when mouse focus comes in */
$("#searchtext").focus(function(){
$(this).css("background","url(search.png) #fff no-repeat left");
$(this).css("color","#222");
/* exapnd animattion */
$("#searchtext").animate({
width: '250px'
}, { duration: 200, queue: false });
});
/*--Squeeze the search box, when mouse focus goes out from it */
$("#searchtext").focusout(function(){
$(this).css("background","url(search.png) #888 no-repeat left");
$(this).css("color","#222");
$(function () {
/* squeeze animation */
$("#searchtext").animate({
width: '180px'
}, { duration: 200, queue: false });
});
});
});
This tutorial is dedicated to one of my facebook friend (Rabby Bhuiyan) who requested me to design a similar menu like we see on apple.com.
Live Demo
Yeah, I know you are searching for the live demo all the way in this tutorial. Here it is, check it out live.
Icon Image Courtesy: IconFinder.com
