Bom e feliz domingo,eu tou com um tempinho livre e ai vim trazer uma partilha .
Trago um novo menu com submenu para colocar em cima de seu cabeçalho,,,header do blog.
Esta imagem acima é resultado final ,só não tem como visualizár online porque não vou colocár em nenhum blog de teste ,porque é mesmo modo que outros menus que eu já postei só muda um pouco o estilo do menu.
Antes de tudo faça uma cópia do seu template...
Entre no seu painel e depois modelo e click editar html.
Procure este código:
Agora acima cole este meu código:
.navbest-tuga {
background: rgb(124,226,153); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(124,226,153,1) 0%, rgba(89,89,89,1) 12%, rgba(117,214,124,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 41%, rgba(114,224,151,1) 51%, rgba(17,17,17,1) 60%, rgba(106,209,161,1) 77%, rgba(28,28,28,1) 91%, rgba(92,224,173,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(124,226,153,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(25%,rgba(117,214,124,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(41%,rgba(44,44,44,1)), color-stop(51%,rgba(114,224,151,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(77%,rgba(106,209,161,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(92,224,173,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(124,226,153,1) 0%,rgba(89,89,89,1) 12%,rgba(117,214,124,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 41%,rgba(114,224,151,1) 51%,rgba(17,17,17,1) 60%,rgba(106,209,161,1) 77%,rgba(28,28,28,1) 91%,rgba(92,224,173,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(124,226,153,1) 0%,rgba(89,89,89,1) 12%,rgba(117,214,124,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 41%,rgba(114,224,151,1) 51%,rgba(17,17,17,1) 60%,rgba(106,209,161,1) 77%,rgba(28,28,28,1) 91%,rgba(92,224,173,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(124,226,153,1) 0%,rgba(89,89,89,1) 12%,rgba(117,214,124,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 41%,rgba(114,224,151,1) 51%,rgba(17,17,17,1) 60%,rgba(106,209,161,1) 77%,rgba(28,28,28,1) 91%,rgba(92,224,173,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(124,226,153,1) 0%,rgba(89,89,89,1) 12%,rgba(117,214,124,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 41%,rgba(114,224,151,1) 51%,rgba(17,17,17,1) 60%,rgba(106,209,161,1) 77%,rgba(28,28,28,1) 91%,rgba(92,224,173,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ce299', endColorstr='#5ce0ad',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-bottom: 4px solid #000;
width: 100%;
padding: 0px;
position: relative;
margin: auto;
}
ul.navcolorsbt {
list-style: none;
padding: 1px 1px;
font-family: 'Bobber',Oswald;
font-size: 15px;
line-height: 15px;
margin: auto;
width: 951px;position: relative;
}
ul.navcolorsbt:after {
content: "";
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;}
ul.navcolorsbt li {
float: left;
position: relative;
margin: 1px;
}
ul.navcolorsbt li a, ul.navcolorsbt li a:link {
color: #fafafa;
text-decoration: none;text-transform: uppercase;
display: block;
padding: 8px 26px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
ul.navcolorsbt li a:hover {
color: #fafafa;
background: rgb(201,222,150); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(201,222,150,1) 0%, rgba(138,182,107,1) 44%, rgba(57,130,53,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(201,222,150,1)), color-stop(44%,rgba(138,182,107,1)), color-stop(100%,rgba(57,130,53,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-bottom: 2px solid #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
ul.navcolorsbt li a.selected, ul.navcolorsbt li a:active {
background: rgb(201,222,150); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(201,222,150,1) 0%, rgba(138,182,107,1) 44%, rgba(57,130,53,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(201,222,150,1)), color-stop(44%,rgba(138,182,107,1)), color-stop(100%,rgba(57,130,53,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color: #fafafa;
margin-left: 165px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
border-bottom: 2px solid #000;
text-transform: uppercase;}
ul.navcolorsbt li ul {
display: none;
}
ul.navcolorsbt li ul:before {
content: " ";
position: absolute;
display: block;
z-index: 1500;
left: 0;
top: -10px;
height: 10px;
width: 100%;}
ul.navcolorsbt li:hover ul {
position: absolute;
display: block;
z-index: 1000;
left: 0;border-radius: 0px 0px 5px 5px;
top: 35px;
padding: 5px 0;
list-style: none;
}
ul.navcolorsbt li ul li {
float: none;
margin: 0 10px;
}
ul.navcolorsbt li ul li:first-child {
margin: 0 10px;
border-top: 0 none;}
ul.navcolorsbt li ul li:last-child {
border-bottom: 0 none;
}
ul.navcolorsbt li ul li a, ul.navcolorsbt li ul li a:link {
color: #fff;
display: block;
background: rgb(124,226,153); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(124,226,153,1) 0%, rgba(89,89,89,1) 12%, rgba(117,214,124,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 41%, rgba(114,224,151,1) 51%, rgba(17,17,17,1) 60%, rgba(106,209,161,1) 77%, rgba(28,28,28,1) 91%, rgba(92,224,173,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(124,226,153,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(25%,rgba(117,214,124,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(41%,rgba(44,44,44,1)), color-stop(51%,rgba(114,224,151,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(77%,rgba(106,209,161,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(92,224,173,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(124,226,153,1) 0%,rgba(89,89,89,1) 12%,rgba(117,214,124,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 41%,rgba(114,224,151,1) 51%,rgba(17,17,17,1) 60%,rgba(106,209,161,1) 77%,rgba(28,28,28,1) 91%,rgba(92,224,173,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(124,226,153,1) 0%,rgba(89,89,89,1) 12%,rgba(117,214,124,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 41%,rgba(114,224,151,1) 51%,rgba(17,17,17,1) 60%,rgba(106,209,161,1) 77%,rgba(28,28,28,1) 91%,rgba(92,224,173,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(124,226,153,1) 0%,rgba(89,89,89,1) 12%,rgba(117,214,124,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 41%,rgba(114,224,151,1) 51%,rgba(17,17,17,1) 60%,rgba(106,209,161,1) 77%,rgba(28,28,28,1) 91%,rgba(92,224,173,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(124,226,153,1) 0%,rgba(89,89,89,1) 12%,rgba(117,214,124,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 41%,rgba(114,224,151,1) 51%,rgba(17,17,17,1) 60%,rgba(106,209,161,1) 77%,rgba(28,28,28,1) 91%,rgba(92,224,173,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ce299', endColorstr='#5ce0ad',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
padding: 10px 20px 10px 5px;
white-space: nowrap;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}
ul.navcolorsbt li ul li a:hover {
text-decoration: none;}
Vamos 2 parte procure este código:
E abaixo dele cole este meu código:
<div class='navbest-tuga'>E o menu já esta adicionado agora coloque seus links onde encontrar este sinal ( # )
<ul class='navcolorsbt'>
<li><a class='selected' href='#' title='Rss'>RECENTE</a></li>
<li><a href='#'>AJUDA</a><ul>
<li><a href='#'>NORMAS</a></li>
<li><a href='#'>REGRAS</a></li>
</ul></li><li><a href='#'>SOCIAL</a><ul>
<li><a href='#'>FACEBOOK</a></li>
<li><a href='#'>TWITTER</a></li>
<li><a href='#'>GOOGLE+</a></li>
</ul></li>
<li><a href='#'>CONTATO</a><ul>
<li><a href='#'>EMAIL</a></li>
</ul></li><li><a href='#'>VARIOS</a><ul>
<li><a href='#'>INDICE</a></li>
<li><a href='#'>PERFIL</a></li>
<li><a href='#'>CRÉDITOS</a></li>
</ul></li>
</ul></div>
E foi isto que trouxe agora até mais...
1 comentários:
comentários:p :p
Mostra SmilesOculta Smiles