menu retratil com o "conceito" de aba

[william_aem 0]

OLá a todos! Esse é meu primeiro post....primeiramente queria me desculpar se caso estiver postando no lugar errado, pois não sei ao certo se a minha dúvida encaixa nesse subforum...

 

Estou tentando desenvolver um menu retratil (expansível , árvore, etc), mas até agora não tive sucesso...

a principio quero fazer uma coisa bem simples... mais ou menos dessa forma (simulação):

 

link1

link2 >

link3

link4 ^

link4.1

link4.2 >

link4.3 >

link4.4 ^

link4.4.1

link4.4.2

link4.5

link4.6

link5 >

link6

 

Pesquisando encontrei algumas formas de tentar fazer (a mais simples foi com css e mas "complexa" com jquery)

 

Queria fazer com q o menu sempre mostrasse/destacasse o ultimo link q foi clicado (e automaticamente deselecionasse o anterior q foi clicado)... utilizando css, acho q é possivel gerar o "destaque" ao selecionar o item do menu (acho q com cor, backgroundcolor, ou tamanho de fonte).. porem, dessa forma, não sei se é possivel deselecinoar o link anterior (tirar o destaque) fazendo-o voltar ao normal...

 

estou tentando fazer algo mais simples q os exemplos q citei, provavelmente usando duas imagens de setas, uma pra baixo e outra pra cima para serem usadas ao expandar ou retrair... a idéia é q quando se clicasse em um link, ficasse destacado ...e ao clicar em outro link, o anterior q estava em destaque voltasse ao normal.

 

obs:os menus q se expadem nao precisariam se "retrair" automaticamnte ao clicar em outro link, ficariam abertos para q o usuário podesse abrir e fechar...

 

alguém tem alguma idéia de como posso fazer?

[Marcos Xavier 189]

Ve se é isso ae:

<ul> 
   <li><a href="#" >item 1</a></li>
   <li><a href="#">item 2</a>
     <ul> 
       <li><a href="#" ">item 2.1</a></li>
       <li><a href="#" >item 2.2</a></li>
       <li><a href="#" ">item 2.3</a></li>
     </ul>
   </li> 
   <li><a href="#">item 3</a>
     <ul> 
       <li><a href="#">item 3.1</a></li>
       <li><a href="#">item 3.2</a></li>
       <li><a href="#">item 3.3</a></li>
     </ul> 
   </li>

   <li><a href="#" >item 4</a> </li>
</ul>

 

CSS

ul {

margin:10px;
padding: 0;
list-style: none;
width: 150px;
}


ul li {
position: relative;
}

li ul {
margin:0;
position: absolute;
left: 149px;
top: 0;
display: none;
border-bottom:4px solid #a4a0f5; 

}

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom:1px solid #a4a0f5;
}


li:hover ul {
 display: block; 
}

li a:hover {
background-color: #FFE4B5; 
color: #777; 
display:block;
border-top: thin dotted ;
}

li a:active {
color:#777;
text-decoration:underline;
background-color:#a4a0f5;
}

[william_aem 0]

Opa!

 

cara, acho que funcionou bem aqui, mas infelizmente não era bem isso... mas muito obrigado mesmo assim!

 

me aprofundando um pouco mais, percebo que a estrutura é praticamente a mesma que a de um menu arvore...

como nesse exemplo...

o codigo é esse:

Codigo

mas é javascript e eu achoq não tenho conhecimento suficiente pra adaptar (até agora eu não consegui entender muito bem)

 

só o objetivo seria q fosse sem as imagens, sem as pastas, sem linha pontilhada, sem o visual "windows"... (só as de + e -, mas seriam substituidas por uma seta pra baixo(+) e uma seta pra cima(-) ) mais parecido no visual com o terceiro exemplo desses menus aqui:

mais menus arvore

 

o problema é q esse terceiro exemplo não faz como o primeiro q citei, ou seja, não fica selecionado o item no qual você clicou...

[Marcos Xavier 189]

Nesse caso acho que seria viavel, utilizar Jquery mas... tem que estudar um pouco.