segunda-feira, 10 de outubro de 2011

Menu horizontal – Tema Apple

image
Como você pode ver na imagem, este menu nada mais é do que um menu na horizontal com o tema Apple. O menu é muito parecido com o original contido no site da Apple e se adapta perfeitamente em blogs de tecnologia. Todo menu tem como principal função, criar links para facilitar a navegação do leitor, mas este vai além, ele exibe uma caixa de busca no canto direito do menu, facilitando ainda mais a navegação do visitante. Encontrei este menu no site Coswyn, mas creio que muitos têm dúvidas de como aplicar no blog e a partir de agora você vai aprender a colocar no seu. Lembrando que o menu ficará localizado na parte superior da sua página.
Menu horizontal - tema apple
1. Acesse o “Editar HTML” do seu blog.
2. Procure por:
]]></b:skin>
3.  Acima dessa tag cole o código abaixo:
div.nav { 
    margin: 18px auto 0px auto;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #fff #dfdfdf #dfdfdf #dfdfdf;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    display: table;
}
div.nav ul {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #9f9f9f;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    background: -webkit-gradient(linear, left top, left bottom, from(#b3b3b3), to(#6e6e6e));
    background: -moz-linear-gradient(top,  #b3b3b3,  #6e6e6e);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#6e6e6e');
    display: inline-block;
    list-style: none;
}
div.nav ul li {
    margin: 0px 1px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8c8c8c));
    background: -moz-linear-gradient(top,  #cecece,  #8c8c8c);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cecece', endColorstr='#8c8c8c');
    float: left;
}
div.nav ul li:first-child {
    border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    -webkit-border-radius: 5px 0px 0px 5px;
}
div.nav ul li:last-child {
    margin-right: 0px !important;
    border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    -webkit-border-radius: 0px 5px 5px 0px;
}
div.nav ul li a {
    margin: 0px 1px 0px 1px;
    padding: 11px 33px 11px 33px;
    background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484));
    background: -moz-linear-gradient(top,  #cacaca,  #848484);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#848484');
    float: left;
    /*-*/
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #252525;
    text-shadow: #cecece 0px 1px 0px;
        text-decoration: none;
}
div.nav ul li:first-child a {
    border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    -webkit-border-radius: 5px 0px 0px 5px;
}
div.nav ul li:last-child a {
    margin-right: 0px !important;
    border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    -webkit-border-radius: 0px 5px 5px 0px;
}
div.nav ul li:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#5f5f5f));
    background: -moz-linear-gradient(top,  #999999,  #5f5f5f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#5f5f5f');
}
div.nav ul li:hover a {
    padding: 11px 33px 11px 33px;
    background: -webkit-gradient(linear, left top, left bottom, from(#929292), to(#535353));
    background: -moz-linear-gradient(top,  #929292,  #535353);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#929292', endColorstr='#535353');
    /*-*/
    color: #fff;
    text-shadow: #454545 0px -1px 1px;
}
div.nav ul li:active {
    background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#3f3f3f));
    background: -moz-linear-gradient(top,  #242424,  #3f3f3f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242424', endColorstr='#3f3f3f');
}
div.nav ul li:active a {
    margin: 0px 0px 0px 0px;
    padding: 9px 33px 11px 33px;
    border-width: 2px 1px 0px 1px;
    border-style: solid;
    border-color: #282928 #3f3f3f #525051 #3f3f3f;
    -webkit-box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255, 255, 255, .1);
    -moz-box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255, 255, 255, .1);
    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#5f5f5f));
    background: -moz-linear-gradient(top,  #999999,  #5f5f5f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#5f5f5f');
    color: #fff;
    text-shadow: #454545 0px -1px 1px;
}
div.nav ul li:last-child:active a {
    padding-right: 34px;
}
div.nav ul li.selected {
    background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#3f3f3f));
    background: -moz-linear-gradient(top,  #242424,  #3f3f3f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242424', endColorstr='#3f3f3f');
}
div.nav ul li.selected a {
    margin: 0px 0px 0px 0px;
    padding: 9px 33px 11px 33px;
    border-width: 2px 1px 0px 1px;
    border-style: solid;
    border-color: #282928 #3f3f3f #525051 #3f3f3f;
    background: -webkit-gradient(linear, left top, left bottom, from(#373837), to(#525051));
    background: -moz-linear-gradient(top,  #373837,  #525051);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#373837', endColorstr='#525051');
    /*-*/
    color: #fff;
    text-shadow: #454545 0px -1px 1px;
}
div.nav ul li.selected:last-child a {
    padding-right: 34px;
}
/*-----*/
div.nav ul li.logo a {
    padding: 5px 34px 7px 34px;
}
div.nav ul li.logo:active a {
    padding: 5px 35px 7px 35px;
    border: none;
}
div.nav ul li.logo a img { width: 24px; height: 24px; }
/*-----*/
div.nav ul li.search a {
    padding: 8px 9px 9px 7px;
}
div.nav ul li.search a input {
    width: 120px;
    height: 17px;
    padding: 0px 0px 0px 20px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #888 #b0b0b0 #dedede #b0b0b0;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    background: #fff url(http://work.coswyn.com/apple_nav/button_search.png) no-repeat 5px 3px;
    /*-*/
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 11px;
    color: #7e7e7e;
}
div.nav ul li.search:hover, div.nav ul li.search:active {
    background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8c8c8c));
    background: -moz-linear-gradient(top,  #cecece,  #8c8c8c);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cecece', endColorstr='#8c8c8c');
}
div.nav ul li.search:hover a, div.nav ul li.search:active a {
    margin: 0px 1px 0px 1px;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484));
    background: -moz-linear-gradient(top,  #cacaca,  #848484);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#848484');
}
div.nav ul li.search:active a {
    padding: 8px 9px 9px 7px;
}
4. Agora pesuise por <body> e abaixo dessa tag cole o seguinte código:
<div class="nav">
    <ul>
        <li class="logo"><a href="#"><img src="http://icons.iconarchive.com/icons/tatice/cristal-intense/32/Apple-grey-icon.png" border="0" /></a></li>
           <li><a href="LINK">ITEM</a></li>
           <li><a href="LINK">ITEM</a></li>
           <li><a href="LINK">ITEM</a></li>
           <li><a href="LINK">ITEM</a></li>
           <li><a href="LINK">ITEM</a></li>
           <li><a href="LINK">ITEM</a></li> 
        <li class="search"><a><form action='/search' id='pesquisar-in' nmethod='get' style='display:inline;'><input class='pesquisar' id='search-box' name='q' type='text' value='Pesquise...'/></form></a></li>
    </ul>
</div>
5. Agora é só modificar as partes em vermelho e depois salvar.

Marcadores: , , , ,