COMO COLOCAR SUBMENU NO BLOG
Autor: Léo | Publicado: 2012-01-22T09:15:00-08:00

COMO COLOCAR SUBMENU NO BLOGColocar um submenu no blog é um pouco mais complicado que um menu normal. Para não deixar duvidas um submenu é quando você passa o mouse pelo menu e sobre algum item aparecem mais opções, por exemplo, um menu de um blog de downloads tem musica, jogos, filmes, games e outros itens, quando você coloca o mouse sobre o item filmes aparece um novo menu ao lado com os itens suspense, terror, comédia, adulto...
Agora que já explicamos como funciona o submenu vamos começar a dizer como colocar um no seu blog. Entre na pagina layout, adicionar gadget, html/javascript e coloque o código abaixo, por ser um código grande pode haver algum problema com o código em copiar e colar direito do blog, então temos aqui o mesmo&nbsp;código pronto para download.

&lt;style type="text/css"&gt;
&lt;!--
ul.MenuBarHorizontal{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
width: auto;
}
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
width: auto;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
float: left;
}
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 150px;
position: absolute;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
ul.MenuBarHorizontal ul li
{
width: 150px;
}
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
ul.MenuBarHorizontal a
{background-color: #6633FF;
border-top: 1px solid #FFFFFF;
color: #FFFFFF;
border-right: 1px solid #0000CC;
border-bottom: 1px solid #0000CC;
border-left: 1px solid #FFFFFF;
font-size: 120%;
text-decoration: none;
padding-top: 5px;
padding-bottom: 4px;
width: 150px;
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{background-color: #FFCC99;background-image: url(http://img16.imageshack.us/img16/122/overc.gif);
color: #000000;letter-spacing: normal;word-spacing: normal;border-top: 1px solid #FFFF00;
border-right: 1px solid #CC0000;
border-bottom: 1px solid #CC0000;
border-left: 1px solid #FFFF00;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #66CCFF;
}
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
float: left;
background: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(http://img6.imageshack.us/img6/9470/sprymenubardownhover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(http://img6.imageshack.us/img6/5549/sprymenubarright.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(http://img6.imageshack.us/img6/9470/sprymenubardownhover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(http://img6.imageshack.us/img6/5549/sprymenubarright.gif);
background-repeat: no-repeat;
background-position: 95% 50%;}
--&gt;
&lt;/style&gt;
&lt;ul id="MenuBar1" class="MenuBarHorizontal"&gt;
&lt;li&gt;&lt;a class="MenuBarItemSubmenu" href="#"&gt;Item 1&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="link do Item 1.1"&gt;Item 1.1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="link do Item 1.2"&gt;Item 1.2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="link do Item 1.3"&gt;Item 1.3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="MenuBarItemSubmenu" href="#"&gt;Item 3&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="link do Item 3.1"&gt;Item 3.1&lt;/a&gt; &lt;/li&gt;
&lt;li&gt;&lt;a href="link do Item 3.2"&gt;Item 3.2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="link do Item 3.3"&gt;Item 3.3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;
&lt;script src="http://acessoriosparablogs.com.br/scripts/submenu.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"http://img6.imageshack.us/img6/5549/sprymenubarright.gif", imgRight:"http://img6.imageshack.us/img6/9470/sprymenubardownhover.gif"});
//--&gt;
&lt;/script&gt;

Vamos falar sobre o item 1, isso é o texto que vai aparecer no seu blog, o link dele é daquele jeito mesmo só um sinal de jogo da velha, os subitens é só trocar onde está Item 1.1 pelo titulo que desejar e colocar a url no lugar indicado na mesma linha, e assim por diante em todos os outros links.

Você deve colocar esse código onde aparecerá o menu horizontal com submenu, lembre-se que se o espaço (largura) do seu blog não for suficiente para o menu completo um ou mais itens vão para linha debaixo, portanto é preciso ter cuidado com o numero de itens e a largura do botão para alterar a largura de cada botão mude o valor 150px, veja no código ele aparece 4 vezes width: 150px; você deve mudar esse numero em todos, ou seja, se colocar 130px tem que alterar nos 4 lugares que aparece o 150.

Para mudar as cores, letras, fundo e tudo mais dos botões é nesta parte do código:

ul.MenuBarHorizontal a
{background-color: #6633FF;
border-top: 1px solid #FFFFFF;
color: #FFFFFF;
border-right: 1px solid #0000CC;
border-bottom: 1px solid #0000CC;
border-left: 1px solid #FFFFFF;
font-size: 120%;
text-decoration: none;
padding-top: 5px;
padding-bottom: 4px;
width: 150px;
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}

E o estilo quando o mouse está sobre ele é aqui:

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{background-color: #FFCC99;background-image: url(http://img16.imageshack.us/img16/122/overc.gif);
color: #000000;letter-spacing: normal;word-spacing: normal;border-top: 1px solid #FFFF00;
border-right: 1px solid #CC0000;
border-bottom: 1px solid #CC0000;
border-left: 1px solid #FFFF00;
}

Veja aqui uma&nbsp;demostração do menu com sub menu. Para fazer modificações nos botões é como se fosse qualquer outra coisa feita em CSS, então veja nossas dicas sobre: