Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Ivandro

Inserir um menu Drop-down - ( Template Pronto)

Por , em Desenvolvimento frontend

Recommended Posts

Ivandro    0

Ivandro
Postado

Pessoal,

 

Peguei um template pronto da internet e alterei bastante coisa nele, só que agora preciso criar uns menus Drop-downs na vertical e na horizontal, estou me batendo algum tempo já e esta muito dificil para eu fazer esse menu, pois vejo que nesse template tem muitas regras css.

Ficaria muito feliz se vocês podessem me ajudar me monstrando os codigos e onde eu posso colocar no meu site.

 

O que eu preciso fazer é o seguinte. Quando eu passar o mouse em cima do item, ele abre as caixas. Coloquei a imagem do site abaixo.

www.ivandrosite.xpg.com.br/menus.jpg

 

Nesse template tenho a folha de estilos CSS.

 

Vou colocar os codigos aqui..

 

 

Codigo dos menus das paginas - Abaixo:

 

</head>

<body id="page3">
	<div class="tail-top">
      <div id="main">
         <!-- header -->
         <div id="header">
            <div class="row-1">
               <div class="fright">
               </div>
            </div>
            <div class="row-2">
            	<ul id="top-menu">           [b] Esses são os menus de cima[/b]                      
               	  <li><a href="praias.html">As praias</a></li>
                  <li><a href="hospedagem.html">Hospedagem</a></li>
                  <li><a href="gastronomia.html">Gastronomia</a></li>
                  <li><a href="turisticos.html">Pontos Turísticos</a></li>
                  <li><a href="shoppings.html">Shoppings</a></li>
                  <li><a href="casasnoturnas.html">Casas Noturnas</a></li>      
                  <li><a href="imobiliarias.html">Imobiliárias</a></li>
               </ul>
            </div>
         </div>
         <div id="content">
         	<div class="wrapper">
           	  <div id="left-side">
               	<div class="box">
                  	<div class="border-right">
                     	<div class="border-bot">
                        	<div class="border-left">
                           	<div class="left-top-corner">
                              	<div class="right-top-corner">
                                 	<div class="right-bot-corner">
                                    	<div class="left-bot-corner">
                                       	<div class="inner">
                                          	<ul id="site-nav">               [b]Esse são os menus laterais[/b]
                                                                <li><a href="index.html">Home</a></li>
								<li><a href="acidade.html">A Cidade</a></li>
								<li><a href="aeroportos.html">Aeroportos</a></li>
								<li><a href="praias.html">As praias</a></li>
                                                                <li><a href="cambio.html"> Casas de Câmbio</a></li>
								<li><a href="casasnoturnas.html">Casas Noturnas </a></l>
								<li><a href="distancias.html">Distâncias </a></li>
								<li><a href="gastronomia.html">Gastronomia </a></li>
								<li><a href="hospedagem.html">Hospedagem</a></li>
								<li><a href="hospitais.html">Hospitais</a></li>
								<li><a href="imobiliarias.html">Imobiliárias</a></li>
								<li><a href="locadoras.html">Locadoras de carros</a></l>
                                                                <li><a href="mapa.html">Mapa</a></l>
								<li><a href="turisticos.html">Pontos Turísticos</a></li>
								<li><a href="rodoviaria.html">Rodoviária</a></li>
								<li><a href="saunas.html">Saunas</a></li>
                                                                <li><a href="surf.html">Surf </a></li>
                                                                <li><a href="Shoppings.html">Shoppings</a></li>
                                                                <li><a href="taxistas.html">Taxistas</a></li>
								<li><a href="telefones.html">Telefones Úteis</a></li>

                                                                </ul>
                                                               </div>
                                                               </div>
                                                               </div>

E esse é o código da folha de estilos.

 

#top-menu { width:100%; overflow:hidden;}
#top-menu li { margin-left:-2px; float:left;}
#top-menu li a { display:block; font-size:1.1em; color:#FFFFFF; text-decoration:none; text-transform:uppercase; font-weight:bold; background:url(images/divider.gif) no-repeat left top; width:122px; text-align:center; line-height:38px;}
#top-menu li a:hover { background:#111; background:url(images/menu1.gif) left top repeat-x; color:#FFFFFF;}

#site-nav li { display:inline;}
#site-nav li a { display:block; background:url(images/site-menu-bg.png) no-repeat left top; width:190px; height:33px; font-size:1.2em; color:#FFFFFF; text-transform:uppercase; text-indent:15px; text-decoration:none; line-height:28px; margin-top:-2px;}

#site-nav li a:hover {
	text-decoration:underline;
	background-color: #F9C61B;
}

Peço encarecidamente que me ajudem.

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

poe um link para o seu site em funcionamento para vermos o problema

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ivandro    0

Ivandro
Postado

poe um link para o seu site em funcionamento para vermos o problema

 

abraço

 

Amigo, esse site não esta no ar ainda. É que não consigo fazer, acho que devo estar colocando as coisas no lugar errado.

 

Esse é o codigo limpo, sem as tentativas de colocar o menu drop down.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Matheus Matos    0

Matheus Matos
Postado

Opa.. é simples, dá pra fazer até sem javascript. Vamos lá:

 

Nas opções do menu normal.. no código, cada item está assim:

<li><a href="index.html">Home</a></li>

Você vai fazer o seguinte, irá colocar a parte que vai aparecer dentro dessa, assim:

<li><a href="index.html">Home</a>
      <ul class="dropdown-aberto">
         <li><a href="index.html">Sub-item de Home</a></li>
      </ul>
</li>

No css, organiza com margin ou position para que fique onde queira, e coloque um display: none;

E utilizando a target :hover, faça aparecer:

#site-nav li a:hover .dropdown-aberto {
        display: block;
}

É bem simples de se fazer, não expliquei melhor porque creio que tenha um certo conhecimento.

Falei só a "manha"..

 

Tente fazer, se não consiguir pergunte, só não vá embora se consiguir!

 

Abraços

Matheus Matos

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ivandro    0

Ivandro
Postado

Obrigado Matheus e Evandro, vou tentar fazer o que o Matheus colocou ali, e depois dou uma reposta se deu certo.

 

 

Matheus, fiz tudo que você colocou ali, só que nao sei onde colocar as margens, pode me mostrar ? Porque o menu ficou embaixo do outro.

 

Estou começando.. :(

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ivandro    0

Ivandro
Postado

Obrigado Matheus e Evandro, vou tentar fazer o que o Matheus colocou ali, e depois dou uma reposta se deu certo.

 

 

Matheus, fiz tudo que você colocou ali, só que nao sei onde colocar as margens, pode me mostrar ? Porque o menu ficou embaixo do outro.

 

Estou começando.. :(

 

Obrigado.

 

------------- Consegui fazer o menu vertical, agora só falta fazer o horizontal. Eis a questão... Vou ter q fazer outro codigo? Ou posso ir alterando nesse ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Se você fizer no mesmo, vai alterar o menu que já tem feito.

 

Se são dois menus de navegação, faça duas listas.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito