Tasty Sundae: Seleção de Menus

Hey my little monsters
Hoje deixo para vocês uma seleção de menus bem bonitinhos aqui, acho muito fofo usar em em gadget ao lado do cabeçalho, ou em um gadget sem fundo (transparente), deixo aqui 3 tipos de menu, Menu Heart Menu Down Ribbon Menu topo do blog com caixa de pesquisa
Créditos ao Garota do Olhar Sincero

Menu Heart

O Menu Heart é bem simples, é aquele menu que usamos nos goodies:

Ele fica com essas gifs do lado quando usado um codigo em um URL, e fica bem bonitinho para fazer um menu assim né! então vamos lá

Entre na sua HTML e de um CTRL+F e procure ]]></b:skin>
ACIMA dele cole esse codigo

#menuextra {display : block;
font-size: 10px; /* tamanho da fonte */
font-family: Tahoma; /* nome da fonte */
letter-spacing : 0;
border-bottom : 1px dashed #COR DA BORDA DE BAIXO;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
line-height : 15px;
margin-bottom : 1px;
background : url('http://imagem-normal.gif') no-repeat left; /* Gif que você quer que fique na frente do link
padding-left : 10px;}

Deixo aqui umas gifs para vocês!

Não são muitas mais são minhas preferidas (desculpe pela maioria ser comida, é que são as mais fofas)

Para usar é só usar esse codigo:

<div id="menuextra"><a href="http://link/">Conteúdo</a></div>

Menu topo do blog com caixa de pesquisa

É mais complicado esse, requer mais paciência!
Primeiro va na sua HTML e procure ]]></b:skin> ACIMA dessa tag cole >>ESSE<< codigo
Para entender o codigo clique >>AKI<<
Sim, ele não aparecera ainda, mais logo aparecera!
Para aparecer o menu, procure <body expr:class='"loading" + data:blog.mobileClass'> ABAIXO dele cole esse codigo:

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='link'>pagina</a>
<ul>
<li>
<a href='link'>sub pagina</a>
<ul>
<li><a href='link'>sub sub pagina</a></li>
<li><a href='link'>sub sub pagina</a></li>
</ul>
</li>
<li><a href='link'>pagina</a></li>
<li><a href='link'>pagina</a></li>
</ul>
</li>
<li><a href='link'>pagina</a></li>
<li><a href='link'>pagina</a></li>
<li><a href='link'>pagina</a></li>
<li><a href='link'>pagina</a></li>

Página = É a que aparece logo no menu.

Sub Página = Ao passar o mouse pela página aparecerá um quadradinho com a sub página.

Sub Sub Página = Ao passar o mouse sobre a sub página aparece outro quadradinho do lado.

Se der tudo certinho, sem dar erro, salve!

Menu Down Ribbon

Esse eu já usei em outro blog, e ficou lindo, mas fiz na horizontal, esse é na vertical!
Aqui a Live Preview para vocês!

.Pra cada menu você deverá colar o código mais uma vez. Por exemplo, primeiro eu crio o .menuinicio, depois pros goodies eu crio .menugoodies, e assim vai, em cada um com a imagem respectiva. Só não repete a parte do menupamecontet que vale por todas. Se não entenderam comente!
O codigo é o seguinte:

#menupamecontent {height:116px;

width:260px;

margin-left:auto;

margin-right: -40px;

margin-top:-840px;

z-index:100;}

#menupame {display:inline-block;

height:119px;

width:40px;

background-repeat:no-repeat;

background-position: 0px -75px;

background-image:url('LINK DA IMAGEM AQUI');

important;-webkit-transition: 0.7s ease-in;

-moz-transition: 0.7s ease-in;

transition: 0.6s ease-in;}

#menupame:hover{

background-repeat:no-repeat;

background-position: 0px -20px;

important;-webkit-transition: 0.7s ease-in;

-moz-transition: 0.7s ease-in;

transition: 0.6s ease-in;

}

Explicando: Tudo dentro da class menupamecontent é o posicionamento do menu. É só você trocar os valores até a faixinha ficar onde você quer. Menupame é as propriedades da faixinha, height é altura, width a largura do ribbon, em background-image você coloca o link da tua faixinha. Agora dentro de menupame:hover é as propriedades hover do menu, quando você passa o mouse. Não é necessário mexer em nada nessa parte.

Pra cada página, faixa, que você for colocar você deve repetir o menupame e o menupame:hover de novo, só que com outro nome, como falei. Exemplo:

.menucontent{

conteudo da alinhação do menu. não precisa repetir denovo. }

.menuinicio {

conteudo}

menuinicio:hover{

conteudo}

menugoodies {

conteudo}

menugoodies:hover{

conteudo}

E assim vai. Você copia tudo, e só altera o link da sua faixinha. Deixo aqui pra vocês a base da faixinha, você muda a cor no PhotoShop, PhotoFiltre ou qualquer progama que você quiser, e depois escreve por cima. A faixinha não é minha, é do Garota do Olhar sincero.

Para usar, adicione um gadget HTML/JavaScript e cole dentro isso:

<a href=”teulink id="menupameNOMEDACLASS"></a><a href=”link” id="menupameNOMEDACLASS"></a>

E repete o nome fa class, conforme os que você colocou antes, adicione um para cada!
Esse ficou meio mal explicada, muito enrolado e complicado, mais da para entender

Então gente essa foi a seleção de menus do Tasty Sundae!
Até amanha!

Seleção de Menus

Nenhum comentário:

Postar um comentário

Tasty Sundae