Ir para conteúdo

POWERED BY:

Arquivado

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

PatrickPC

Menu drop down

Por , em Desenvolvimento frontend

Recommended Posts

Marcos Xavier    189

Marcos Xavier
Postado 

<div id="menu">
               <ul id="nav">
                   <li><a href="#">Item1</a></li>
                   <li><a href="#">Item2</a></li>
                   <li><a href="#">v</a>
                   	<ul>
                           <li><a href="#">subitem1</a></li>
                           <li><a href="#">subitem2</a></li>
                           <li><a href="#">subitem3</a></li>
                       </ul>
                	</li>

               </ul>
           </div><!-- FIM DA DIV MENU -->

Voce vai precisar utilizar CSS e dá uma lida nisso:

http://forum.imaster...menu-drop-down/

Compartilhar este post

Link para o post
Compartilhar em outros sites

PatrickPC    0

PatrickPC
Postado 

<div id="menu">
               <ul id="nav">
                   <li><a href="#">Item1</a></li>
                   <li><a href="#">Item2</a></li>
                   <li><a href="#">v</a>
                   	<ul>
                           <li><a href="#">subitem1</a></li>
                           <li><a href="#">subitem2</a></li>
                           <li><a href="#">subitem3</a></li>
                       </ul>
                	</li>

               </ul>
           </div><!-- FIM DA DIV MENU -->

Voce vai precisar utilizar CSS e dá uma lida nisso:

http://forum.imaster...menu-drop-down/

................

 

Corn flakes ... beleza

 

Seguinte ... a lista eu criei la da forma que me passou, segue link atualizado: Clique aqui

Agora vem a questão do CSS incluindo tb a <ul id="nav">.

 

Porque este topico q me passou como exemplo está um pouco quebrado.

Fico no aguardo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Patrick cuidado para nao fechar um bloco no lugar errado.

O menu Itens tem seus submenus, logo voce só fechará o bloco após ter colocado todos os sub-itens.Beleza.

Fica assim:

 

    <div id="menu">
	<ul id="nav">
       <li class="current_page_item"><a href="#" class="first">Homepage</a></li>
       <li><a href="#">Itens</a>
                     <ul>
                       <li><a href="#">Item 1</a></li>
                       <li><a href="#">Item 2</a></li>

                       <li><a href="#">Item 3</a></li>
                  	</ul>
              	</li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
	</ul>
   </div>

 

Fiz uns testes aqui e acho que resolvi. Ve ae :

 

<style type="text/css">
#menu {padding:10px;}
#menu a {text-decoration:none;}
ul li {list-style:none;}
#nav li {float:left; position:relative; width:120px;}
li ul {width:30px;}
#nav li:hover li {margin:0 -40px;}
li li :hover{color:red;background:gold;}
#nav li li{ position:relative;margin:-100px;}
</style>

</head>
<body>
<div id="menu">
<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">Itens</a>
     <ul>
       <li><a href="#">item1</a></li>
       <li><a href="#">item2</a></li>
       <li><a href="#">item3</a></li>
     </ul>
   </li>
   <li><a href="#">Contato</a></li>
 </ul>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

PatrickPC    0

PatrickPC
Postado

Patrick cuidado para nao fechar um bloco no lugar errado.

O menu Itens tem seus submenus, logo voce só fechará o bloco após ter colocado todos os sub-itens.Beleza.

Fica assim:

 

    <div id="menu">
	<ul id="nav">
       <li class="current_page_item"><a href="#" class="first">Homepage</a></li>
       <li><a href="#">Itens</a>
                     <ul>
                       <li><a href="#">Item 1</a></li>
                       <li><a href="#">Item 2</a></li>

                       <li><a href="#">Item 3</a></li>
                  	</ul>
              	</li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
	</ul>
   </div>

 

Fiz uns testes aqui e acho que resolvi. Ve ae :

 

<style type="text/css">
#menu {padding:10px;}
#menu a {text-decoration:none;}
ul li {list-style:none;}
#nav li {float:left; position:relative; width:120px;}
li ul {width:30px;}
#nav li:hover li {margin:0 -40px;}
li li :hover{color:red;background:gold;}
#nav li li{ position:relative;margin:-100px;}
</style>

</head>
<body>
<div id="menu">
<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">Itens</a>
     <ul>
       <li><a href="#">item1</a></li>
       <li><a href="#">item2</a></li>
       <li><a href="#">item3</a></li>
     </ul>
   </li>
   <li><a href="#">Contato</a></li>
 </ul>
</div>
[/quote]

.........

 

Corn flakes ...

 

De uma olhada la na pagina como ficou ...

O menu está meio desconfigurado ...

Pagina atualizada: http://www.mundolivr...oo.com.br/page/

 

Fico no aguardo

Patrick

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

É a primeira coisa a se fazer.

 

Depois de ler o link que recomendei, verá que os 4º e 5º menus são dois exemplos, ainda que visualmente simples, complexos de se montar em CSS. Estude a estrutura e a forma com que foram projetados.

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Aplicando as correções que o Evandro frisou você deve agora

definir o seu CSS de acordo com o que você precisa aí, especificamente

as seguintes linhas:

 

/* posicão do menu quando o mouse estiver em cima do menu Itens */

#nav li:hover li {margin:0 -40px;}

 

/* posicão do menu quando o mouse não estiver em cima do menu Itens */

#nav li li{ margin:-100px;}

//

 

Onde você define as medidas quando o mouse em foco e fora de foco respectivamente.

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