::..Conexão D2S..::



Seja bem vindos ao ConexãoD2S,


Cadastre-se no fórum e tenha benefícios:


*Baixe músicas, jogos, vídeos;
*Faça perguntas, tire suas dúvidas;
*Entre em nosso Xat;
*Crie tópicos, converse direto com o Admin;
*Leia tutoriais completos



Cadastre-se e faça parte da equipe CD2S
Tudo gratuito!
Sign Up NowFAQ
Signup Now
Esta afim fazer uma postagem iniciar um novo tópico e ou interagir com outros
membros deste conselho, você precisa criar uma conta primeiro.
Se esta é sua primeira visita, não se esqueça de verificar o FAQ clicando no link acima. Você pode ter que registrar antes que você possa postar: clique no link de registro para prosseguir. Para começar a ver as mensagens, selecione o fórum que pretende visitar da seleção abaixo.

Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo Mensagem [Página 1 de 1]

#1 Menu horizontal com sub menu e caixa de busca em Sab Maio 19, 2012 4:18 pm

O seguinte menu é feito unicamente com CSS, é um menu horizontal com sub-menu, e do lado direito tem uma caixa de busca.

É um menu prático para os que não querem lidar com menus muito complexos ou preferem não usar um que requer scripts para funcionar ou que tenha muitas imagens.

A instalação e personalização é bastante simples, e é bastante funcional, já que tendo a caixa de busca integrada você terá dois elementos em uma mesma área.


Você pode vê-lo funcionando neste [Você precisa estar registrado e conectado para ver este link.] se você quiser testar a caixa de busca digite a palavra que desejar e pressione ENTER.

Passos para instalar o menu

Vá em design >> Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e coloque-o antes de ]]></b:skin> (use "CTRL + F" para localizar)

Código:
/* Menu horizontal com caixa de busca
------------------------------------------------------------------ */
#menuWrapper {
width:100%; /* Tamanho do menu */
height:40px;
padding-left:14px;
background:#444; /* Cor de fundo */
border-radius:5px; /* Bordas arredondadas */
}
.menu {
width: 100%;
float: left;
font-family:"Arial", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:14px; /* Tamanho da fonte */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 5px 5px; /* Bordas arredondadas do sub-menu */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
border-right: 1px solid #666;
color:#cccccc; /* Cor da fonte */
display:block;text-transform:uppercase;
font-weight:normal;
line-height:40px;
margin:0px;
padding:0px 25px; /* Espaço entre cada casa */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Cor das casas ao passar o cursor */
color:#FFFFFF; /* Cor do texto ao passar o cursor */
text-decoration:none;
}
.menu li ul {
background:#333333; /* Cor de fundo do sub-menu */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Tamanho do sub-menu */
z-index:100;
border-top:1px solid #fff; /* Borda superior do sub-menu */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 5px 5px; /* Borda das sub-casas */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Cor das sub-casas ao passar o cursor */
color:#ffffff;
text-decoration:none;
}

#search {
width: 228px; /* Tamanho da caixa de busca */
height: 24px;
float: right;
text-align: center;
margin-top: 8px;
margin-right: 6px;
background: #fff;/* Cor de fundo da caixa de busca */
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Vá até 'design' → 'Elementos de página' → Clique em 'Adicionar um elemento de página'→ Escolha tipo 'HTML/Javascript' e cole o seguinte código:

Código:
<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL">Home</a></li>
<li><a href="#">Casa 2</a>
<ul>
<li><a href="URL">Casa 2.1</a></li>
<li><a href="URL">Casa 2.2</a></li>
<li><a href="URL">Casa 2.3</a></li>
<li><a href="URL">Casa 2.4</a></li>
</ul>
</li>
<li><a href="#">Casa 3</a>
<ul>
<li><a href="URL">Casa 3.1</a></li>
<li><a href="URL">Casa 3.2</a></li>
<li><a href="URL">Casa 3.3</a></li>
<li><a href="URL">Casa 3.4</a></li>
</ul>
</li>

<li><a href="#">Casa 4</a>
<ul>
<li><a href="URL">Casa 4.1</a></li>
<li><a href="URL">Casa 4.2</a></li>
<li><a href="URL">Casa 4.3</a></li>
<li><a href="URL">Casa 4.4</a></li>
</ul>
</li>

</ul>


<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>

</div></div>

Adicione as URLS onde indicado, bem como o nome da casa.

No primeiro código estão as áreas que podem ser personalizadas, como a cor de fundo, fonte, tamanho e etc.

O desenho arredondado de todo o menu também é puro CSS, portanto se você estiver usando um navegador antigo você não verá essas bordas.

Ver perfil do usuário http://conexaod2s.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum


Ganhadores da SOTW
Small BannerSmall BannerSmall BannerSmall BannerSmall BannerBig Banner
PurevB Banner Placeholder