No código abaixo, você aprenderá como estender o topo e o rodapé do seu site, através de css.
Incluí também uma div para conteúdos.
Visite:
CSS: Estendendo o topo (top) e rodapé (bottom) do seu site (Completo)
CSS: Estendendo o topo (top) e rodapé (bottom) do seu site (Completo)
8 junMenu Sanfona com JQuery
8 junUm menu sanfona(Accordion Menu) é um menu divido por categorias que quando está mostrando os links de uma categoria esconde os links das outras(ele estica e comprime como uma sanfona).
Esta funcionalidade pode também ser aplicada a um texto com vários tópicos ficando disponível os titulos e quando clicado mostra somente o texto do tópico. Este recurso é muito interessante quando temos um texto grande dividido em tópicos, pois não deixa a página muito longa.
Nesta implementação vamos utilizar uma lista de definições ( dl – dt- dd ) então segue abaixo o HTML do menu:
Veja o link abaixo:
http://www.botecodigital.info/jquery/menu-sanfona-com-jquery/
Menu Vertical Deslizante (Dropdown) Apenas com CSS/HTML
8 junFaça login ► Clique em “Design” e depois ► “Editar HTML”
O código CSS deve ser colado acima da tag </head>:
<style type=”text/css”>
ul.sidenav {
/* el rectángulo contenedor */
list-style: none;
margin: 0 auto;
padding: 0;
width: 250px;
/* propiedades optativas */
background-color: #CD853F;
border: 1px solid #300;
outline: 1px solid #FFF;
}
ul.sidenav li a {
/* el enlace de cada item */
display: block;
text-decoration: none;
/* propiedades optativas */
background: transparent url(URL_imagen_icono) no-repeat 5px 7px;
border-bottom: 1px solid #AD651F;
border-top: 1px solid #300;
color: #FFF;
font-size: 18px;
padding: 15px 10px 10px 45px;
width: 195px;
}
ul.sidenav li a:hover {
/* propiedades optativas */
background: #CD853F url(URL_imagen_icono) no-repeat 5px 7px;
border-top:1px solid #300;
}
ul.sidenav li span {
/* el contenido permanece oculto por defecto */
display: none;
}
ul.sidenav li a:hover span {
/* el contenido se muestra al pasar el cursor encima */
display: block;
/* propiedades optativas */
font-size: 12px;
padding: 10px 0;
margin: 0 0 0 -30px;
}
</style>
Você poderá alterar o tamanho e cor do box, cor das letras e os ícones.
Agora vamos ao HTML que pode ser colocado em um elemento de página (dentro da página Design)
<ul class.=”sidenav”>
<li>
<a ref.=”URL_DO_O_LINK”>Home <spam>
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
<li>
<a ref.=”URL_DO_O_LINK”>Blog <spam>
Blandit turpis patria euismod at iaceo appellatio,
</spam> </a>
</li>
<li>
<a ref.=”URL_DO_O_LINK”>Tutorial <spam>
Blandit turpis patria euismod at iaceo appellatio,.</spam> </a>
</li>
<li>
<a ref.=”URL_DO_O_LINK”>Arquivo<spam>
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
</ul>
- Em azul o endereço para direcionamento
- Em negrito o nome do link
- Em vermelho, o texto que se desprende ao passar o mouse
Se quiser acrescentar mais abas, repita o trecho abaixo colando sempre ANTES de </ul>
<li> <a ref.=”URL_DO_O_LINK”>TÍTULO <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Cátion utrum utrum abigo demoveo immitto aliquam sino aliquip. </spam> </a> </li>
Fonte:
http://blogger-dicasmamanunes.blogspot.com/2010/09/menu-vertical-deslizante-dropdown.html
jQuery: seletores personalizados
8 junComo se não bastasse ser altamente personalizável através de plugins, o framework jQuery também é bastante flexível com seus seletores. Além de poder localizar objetos e elementos por ID, classe, nome do elemento, expressões e atributos também é possível criar o seu próprio seletor.
Abaixo o linkda matéria completa:
lauraandradeweb 