Icones: OFF: http://www.merrypic.com/files/jlvjequcwpg0s8lzcljr.ico http://www.iconj.com/ico/8/g/8gulktd3sd.ico OFF: http://www.imageboo.com/files/7jrisja3pe8b18nbdcsj.ico Circuito Rede Cerebral: Menu no Blog
sábado, 12 de setembro de 2009

Menu no Blog

Nesta postagem ensinarei passo a passo como criar um Menu e adicioná-lo ao Blog.
Vou apresentar dois modelos de Menu e decada modelo, dois formatos.

Observações:
Todos os códigos abaixo podem ser alterado caso necessário
Os Menus estão montados em um Padrão de WebPage 800x600px [px = pixel]
Cada exemplo possui 3 links e/ou 3 sublinks
Onde há um código de cor para background [preenchimento] pode ser alterado para imagem, basta substituir a cor por url(http://url da imagem.formato da imagem/)
Atenção ao remover ou adicionar códigos da cor AZUL para que não seja desconfigurado
Não altere os valores em VERDE.
Caso tenha dúvidas para alterar os códigos em VERMELHO, consulte algumas postagem que poderão te ajudar: BackgroundTabelas de Cores • Curso Básico de CSS  (Em Construção)

Legenda as Tag's:

li » Linha
ul » Coluna
div id="" » Comando [div] para identidade [id]



Modelo Horizontal - Simples

Parte HTML do Menu:

<div id="menubar">
<ul id="menunav">
<li><a href="/">Link 1</a></li>
<li><a href="/">Link 2</a></li>
<li><a href="/">Link 3</a></li>
</ul>
</div>


Parte CSS do Menu:

#menubar {
background : url('URL da imagem') repeat-x;
font-family : "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
width : 800px;
height : 40px;
padding : 0;
}
#menunav {
margin : 0;
padding : 0;
}
#menunav ul {
float : left;
list-style : none;
margin : 0;
padding : 0;
}
#menunav li {
list-style : none;
margin : 0;
padding : 0;
}
#menunav li a, #menunav li a:link, #menunav li a:visited {
color : #ffffff;
display : block;
font-size : 10px;
font-weight : normal;
text-transform : uppercase;
margin : 0px 0px 0 0;
padding : 0px 8px 0px 8px;
line-height : 40px;
}
#menunav li a:hover, #menunav li li a:active {
background : url('URL da imagem') repeat-x;
color : #ffffff;
display : block;
text-decoration : none;
margin : 0px 0px 0 0;
padding : 0px 8px 0px 8px;
line-height : 40px;
}



Modelo Horizontal - Composto

Parte HTML do Menu:

<div id="menubar">
<ul id="menunav">
<li><a href="/">Link 1</a>
<ul id="menunav">
<li><a href="/">SubLink 1</a></li>
<li><a href="/">SubLink 2</a></li>
<li><a href="/">SubLink 3</a></li>
</ul>
</li>
<li><a href="/">Link 2</a>
<ul id="menunav">
<li><a href="/">SubLink 1</a></li>
<li><a href="/">SubLink 2</a></li>
<li><a href="/">SubLink 3</a></li>
</ul>
</li>
<li><a href="/">Link 3</a>
<ul id="menunav">
<li><a href="/">SubLink 1</a></li>
<li><a href="/">SubLink 2</a></li>
<li><a href="/">SubLink 3</a></li>
</ul>
</li>
</ul>
</div>

Parte CSS do Menu:

#menubar {
background : url('URL da imagem') repeat-x;
font-family : "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
width : 800px;
height : 40px;
padding : 0;
}
#menunav {
margin : 0;
padding : 0;
}
#menunav ul {
float : left;
list-style : none;
margin : 0;
padding : 0;
}
#menunav li {
list-style : none;
margin : 0;
padding : 0;
}
#menunav li a, #menunav li a:link, #menunav li a:visited {
color : #ffffff;
display : block;
font-size : 10px;
font-weight : normal;
text-transform : uppercase;
margin : 0px 0px 0 0;
padding : 0px 8px 0px 8px;
line-height : 40px;
}
#menunav li a:hover, #menunav li li a:active {
background : url('URL da imagem') repeat-x;
color : #ffffff;
display : block;
text-decoration : none;
margin : 0px 0px 0 0;
padding : 0px 8px 0px 8px;
line-height : 40px;
}
#menunav li li a, #menunav li li a:link, #menunav li li a:visited {
background : url('URL da imagem') repeat-x;
width : 140px;
float : none;
margin : 0;
padding : 0px 8px 0px 8px;
border-bottom : 1px solid #ffffff;
border-left : 1px solid #ffffff;
border-right : 1px solid #ffffff;
line-height : 30px;
}
#menunav li li a:hover, #menunav li li a:active {
background : #888888 url(URL da imagem) repeat-x;
margin : 0;
padding : 0px 8px 0px 8px;
line-height : 30px;
}
#menunav li {
float : left;
padding : 0;
}
#menunav li ul {
z-index : 9999;
position : absolute;
left : -999em;
height : auto;
width : 160px;
margin : 0;
padding : 0;
}
#menunav li ul a {
width : 140px;
}
#menunav li ul ul {
margin : -25px 0 0 161px;
}
#menunav li:hover ul ul, #menunav li:hover ul ul ul, #menunav li.sfhover ul ul, #menunav li.sfhover ul ul ul {
left : -999em;
}
#menunav li:hover ul, #menunav li li:hover ul, #menunav li li li:hover ul, #menunav li.sfhover ul, #menunav li li.sfhover ul, #menunav li li li.sfhover ul {
left : auto;
}
#menunav li:hover, #menunav li.sfhover {
position : static;
}



Modelo Vertical - Simples

Parte HTML do Menu Simples:

<div class="mainmenu">
<ul>
<li class="li_nc"><a href="#" target="_self" >Link1</a></li>
<li class="li_nc"><a href="#" target="_self" >Link2</a></li>
<li class="li_nc"><a href="#" target="_self" >Link3</a></li>
</ul>
</div>

Modelo Vertical - Composto


Parte HTML do Menu Composto:

<div class="mainmenu">
<ul>
<li class="li_hc"><a href="#" target="_self" >Link1</a><ul class="ul_ch">
<li class="li_nc"><a href="#" target="_self" >Sublink1</a></li>
<li class="li_nc"><a href="#" target="_self" >SubLink2</a></li>
<li class="li_nc"><a href="#" target="_self" >Sublink3</a></li>
</ul></li>
<li class="li_hc"><a href="#" target="_self" >Link2</a><ul class="ul_ch">
<li class="li_nc"><a href="#" target="_self" >Sublink1</a></li>
<li class="li_nc"><a href="#" target="_self" >Sublink2</a></li>
<li class="li_nc"><a href="#" target="_self" >Sublink3</a></li>
</ul></li>
<li class="li_hc"><a href="#" target="_self" >Link3</a><ul class="ul_ch">
<li class="li_nc"><a href="#" target="_self" >Sublink1</a></li>
<li class="li_nc"><a href="#" target="_self" >Sublink2</a></li>
<li class="li_nc"><a href="#" target="_self" >Sublink3</</li>
</ul></li>
</ul>
</div>


Parte CSS dos Menus Simples-Composto:

.mainmenu{

width: 15em;
padding: 0;
float: left;

}
.mainmenu ul {
float: left;
width: 100%;
list-style: none;
line-height: 1;
color:#FFFF00;
background: #000080;

padding: 0;
border: solid #A0A0A4;
border-width: 1px 1px;
margin: 0 0 0 0;
}

.mainmenu a, .mainmenu a:visited {
display: block;
width: 100%;
font-family:Arial, Helvetica, sans-serif;font-size:0.8em;font-weight:bold;font-style:normal;text-decoration:underline;
color: #FFFF00;
text-decoration: none;
padding: 1em 0em;
text-indent:1em;
margin: 0;

}
.mainmenu li li a{padding:1em;text-indent:0;}
.mainmenu ul ul a{
width:100%;
height:100%;
}
.mainmenu ul a{
width: 100%;
}


.mainmenu li {
float: left;
width:100%;
margin:0;
padding:0;
}

.mainmenu ul li {float:left; position:relative; }
.mainmenu ul li {width:100%;}

.mainmenu li ul {
position: absolute;
left: -999em;
height: auto;
width:15em;
background: #000080;
font-weight: normal;
border-width: 1px;
margin: 0;
}

.mainmenu li li {
width: 100% ;
}
.mainmenu li a{width: 100% ; }
.mainmenu li li a{
width: 100%;
}

.mainmenu li ul {
margin: 0 0 0 0;
}
.mainmenu li ul ul {
margin: 0 0 0 0;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
left: 100%;
}
.mainmenu li:hover>ul.ul_ch
{
left: 100%;
}

.mainmenu li:hover{
background: #FF0000;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
color:#FFFF00;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a,
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
color:#FFFF00;
}
.mainmenu li li:hover, .mainmenu li li li:hover,
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover
{
background: #B90000;
z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a,
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
color: #FFFF00;
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
color: #FFFF00;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
color: #FFFF00;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
color: #FFFF00;
}



Como adicionar o Menu ao Blog:

Para cada tipo e formato de template há diferentes configurações de código. Antes de adicionar um código ao template precisa-se ter conhecimento dos códigos que geram cada elemento do Blog. Identifiqueo local e posicionamento do menu e a partir disso procure pelos códigos que formam a região onde ficará o Menu.


Noção Básica de Formação:

Um Blog possui Colunas e Caixas. E é dentro das Caixas que é colocado o "conteúdo do blog" (elementos: textos, widgets, imagens, objetos, etc). Veja abaixo uma réplica de um Blog com 3 colunas na sua estrutura elementar.


Legenda: (Separada por números e cores) 

1 - Caixa da coluna HTML da página (English: HyperText Mark-up Language - Português BR: Linguagem de Marcação de HiperTextos)
2 - Caixa da coluna BODY da página (Corpo da página)
3 - Caixa da coluna BLOG [outer] da página (Corpo do Blog)
4 - Caixa da coluna HEADER da página (Cabeçalho)
5 - Caixa da coluna MENU da página (Menu)
6 - Caixa da coluna BLOG2 [outer2] da página (Segundo Corpo do Blog - poucos blogs possuem)
7 - Caixa da coluna SIDEBAR-LEFT da página (Coluna Lateral da Esquerda)
8 - Caixa da coluna POST [main] da página (Coluna Centra de Postagens e Comentários)
9 - Caixa da coluna SIDEBAR-RIGHT da página (Coluna Lateral da Direita)
10 - Caixa da coluna FOOTER da página (Rodapé)
11 - Conteúdo do Blog ou Elementos [textos, widgets, imagens, objetos, etc]

De acordo com o esquema acima você conseguirá encontar os códigos facilmente, caso não os encontre através do explicativo abaixo.



Menu Horizontal:

Acesse o Painel [ http://www.blogger.com/ ], clique em Layout e depois na guia Editar HTML.
Localize [tecla de atalho: Ctrl+F] um local nos códigos CSS do Blog o seguinte código:

#outer-wrapper {
(Vai ter algum código aqui)

}

Esse código corresponde ao itém 3 da lista no esquema acima.
Logo abaixo desse código vem os códigos de Sidebar-left, Main e Sidebar-right. Mas, caso seu blog tenha 2 coluna, os próximos códigos serão Sidebar e Main ou Main e Sidebar, pois dependem da posição no blog.
 

#sidebar-left-wrapper {
(Vai ter algum código aqui)
}

#main-wrapper {
(Vai ter algum código aqui)
}

#sidebar-right-wrapper {
(Vai ter algum código aqui)
}

Após ter encontrado, crie umu novo elemento. Adicione o código a seguir acima dos outros código [Sidebar e Main]:

#menu-wrapper {
float : $startSide;
word-wrap: break-word;
overflow: hidden;
}

Abaixo do código da caixa do menu, coloque os códigos CSS do Menu.
Em seguida localize [Ctrl+F] o código HTML do Main:

<div id='main-wrapper'>

"Apenas" se tiver uma Sidebar "antes" da Main procure por:

<div id='sidebar-wrapper'>
ou
<div id='sidebar-left-wrapper'>

Note que acima desse código haverá uma finalização: </div>. Abaixo dela coloque este código:

<div id='menu-wrapper'>
<b:section class='menu' id='menu-wrapper' preferred='yes'>
</b:section>
</div> 


Clique em Salvar Modelo e se não houver erros vá para a guia Elementos da página.
Agora repare que apareceu uma nova caixa de elementos acima das colunas [Sidebar e Main]. Clique em Adicionar um Gadget. Na janela popup que abriu, clique em HTML/JavaScript. Não coloque um Título [pois aparecerá acima do menu], em Conteúdo coloque os códigos HTML do Menu. Em seguida, clique em Salvar.



Menu Vertical:

Acesse o Painel [ http://www.blogger.com/ ], clique em Layout e depois na guia Editar HTML.

Localize [tecla de atalho: Ctrl+F] um local nos códigos CSS do Blog o seguinte código:

body {
(Vai ter algum código aqui)
}



Logo abaixo dele coloque os códigos CSS do Menu.
Clique em Salvar Modelo e se não houver erros vá para a guia Elementos da página.
Agora clique em Adicionar um Gadget. Na janela popup que abriu, clique em HTML/JavaScript. Não coloque um Título [pois aparecerá acima do menu], em Conteúdo coloque os códigos HTML do Menu. Em seguida, clique em Salvar.



Caso ocorra algum erro, comente-o logo abaixo.
Obrigado!

2 comentários:

A.C Once Caldas - SM disse...

bom pra quem não sabe, bom post mesmo, com vária opções :D

Matheus Engelman disse...

Muito util sem duvidas..


vlw

Postar um comentário

 
Subir