Lista

wolfphw · Dezembro 6, 2011

Boa tarde,

Tentei procurar por ai mas não consegui achar, dai estou recorrendo por aqui...

Estou com um problema, estou montando uma lista com vários níveis, e queria saber se tem como o CSS reconhecer os nivel dele automático, tipo caso exista um nível em uma determinada linha ele coloca uma figura na linha.. segue exemplo do que eu quero falar.

estrutura

<ul>
 <li>Nivel 1</li>
 <li>Nivel 2
   <ul>
     <li>Nivel 2-1</li>
     <li>Nivel 2-2</li>
     <li>Nivel 2-3
       <ul>
         <li>Nivel 2-3-1</li>
       </ul>
     </li>
   </ul>
 </li>
 <li>Nivel 3</li>
 <li>Nivel 4</li>
</ul>

Que eu sei que em lista a gente pode utilizar para reconhecer o ultimo e o primeiro item da lista com o last-child e o first-child... mas essa parada de identificar os níveis eu já fico perdido...

Desde já eu agradeço a ajuda.

Henrique Barcelos · Dezembro 6, 2011

e queria saber se tem como o CSS reconhecer os nivel dele automático, tipo caso exista um nível em uma determinada linha ele coloca uma figura na linha

Você quer que apareça uma seta, um indicador, ou qualquer coisa do tipo?

Com CSS3 dá pra fazer:

li:has(ul) {
background: url('../images/icon-arrow-left.png') left top no-repeat;
}

Entretanto, isso aí não funciona nos IE8-...

João Prado · Dezembro 6, 2011

Se você der uma class para cada ul deve funcionar.

Exemplo:

<ul class="nivel1">
 <li>Nivel 1</li>
 <li>Nivel 2
   <ul class="nivel2">
     <li>Nivel 2-1</li>
     <li>Nivel 2-2</li>
     <li>Nivel 2-3
       <ul class="nivel3">
         <li>Nivel 2-3-1</li>
       </ul>
     </li>
   </ul>
 </li>
 <li>Nivel 3</li>
 <li>Nivel 4</li>
</ul>

Depois no CSS só aplicar conforme a class de cada um.

wolfphw · Dezembro 6, 2011

Você quer que apareça uma seta, um indicador, ou qualquer coisa do tipo?

Com CSS3 dá pra fazer:
li:has(ul) {
background: url('../images/icon-arrow-left.png') left top no-repeat;
}
Entretanto, isso aí não funciona nos IE8-...

Pode ser qualquer coisa..

tentei colocar esse seu exemplo e não consegui.. estou testando no FF 8.0.1

Que tenho várias listas no meu layout, dai minha estrutura é a seguinte

<style>
#navSetores {
margin: 0px;
padding: 0px;
}

#navSetores li {
list-style: none;
line-height: 20px;
}


#navSetores li:has(ul) {
background: url(../img/seta.png) left top no-repeat;
}
</style>
<ul id="navSetores">
 <li>Setor 1</li>
 <li>Setor 2
   <ul>
     <li>Setor 2-1
       <ul>
         <li>Setor 2-1-1</li>
         <li>Setor 2-1-2
           <ul>
             <li>Setor 2-1-2-1</li>
           </ul>
         </li>
       </ul>
     </li>
     <li>Setor 2-2</li>
     <li>Setor 2-3</li>
   </ul>
 </li>
 <li>Setor 3</li>
 <li>Setor 4</li>
 <li>Setor 5
   <ul>
     <li>Setor 5-1
       <ul>
         <li>Setor 5-1-1
           <ul>
             <li>Setor 5-1-1-1</li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>
 </li>
</ul>

Hoje ela esta vindo dessa forma do meu banco... mas ela é dinamica.. por isso estou tentando fazer isso com CSS

João Prado · Dezembro 6, 2011

Já tentou aplicar a minha dica anterior?

Talvez se você inserir no seu css desta forma:

#navSetores ul li{} /* nivel 1 */

#navSetores ul li ul li{} /* nivel 2 */

#navSetores ul li ul li ul li{} /* nivel 3 */

#navSetores ul li ul li ul li ul li{} /* nivel 4 */

Não tenho certeza do funcionamento, muito menos se esta correto semanticamente, mas pode ser uma alternativa.

wolfphw · Dezembro 6, 2011

Já tentou aplicar a minha dica anterior?

Talvez se você inserir no seu css desta forma:

#navSetores ul li{} /* nivel 1 */

#navSetores ul li ul li{} /* nivel 2 */

#navSetores ul li ul li ul li{} /* nivel 3 */

#navSetores ul li ul li ul li ul li{} /* nivel 4 */

Não tenho certeza do funcionamento, muito menos se esta correto semanticamente, mas pode ser uma alternativa.

vlw pela dica...

Mas essa sua forma não é bem oque eu estou querendo, que eu quero que mostre a imagem apenas nas que tiverem níveis, nessa sua ela vai aparecer em todas as linhas... e meu sistema ele pode ter de nenhum a Ns níveis

João Prado · Dezembro 6, 2011

Entendi. Consegue gerar classes para cada nível pelo seu sistema?

Acredito que seja o único jeito mesmo.

wolfphw · Dezembro 6, 2011

Entendi. Consegue gerar classes para cada nível pelo seu sistema?

Acredito que seja o único jeito mesmo.

Esse eh o problema... na hora de montar eu não consigo ver se ele tem filho.. soh consigo ver depois que passou

Que estou usando a seguinte função para montar minha lista

<?php
function montaSetor($ref) {
	$sql = mysql_query("SELECT * FROM setores WHERE setor_referencia='$ref' ORDER BY setor_nome ASC");

	if (mysql_num_rows($sql) > 0) {

		if ($ref == 0) {
			echo "<ul id='navSetores'>";
		} else {
			echo "<ul>";
		}

		while ($row = mysql_fetch_array($sql)) {
			$setor_id = $row["setor_id"];
			$setor_referencia = $row["setor_referencia"];
			$setor_nome = $row["setor_nome"];

			echo "<li>".$setor_nome;

			echo montaSetor($setor_id);

			echo "</li>";
		}
		echo "</ul>";
	}
}

echo montaSetor(0);
?>

wolfphw · Dezembro 8, 2011

Eu achei isso aqui em jQuery: http://api.jquery.com/has/

mas tb não ajuda.. pq ele colocar em todas as listas... :(

Henrique Barcelos · Dezembro 8, 2011

Tenta fazer um esquemático, um desenhinho aí de como você quer, pois não estou entendendo...

wolfphw · Dezembro 9, 2011

Estranho.. eu tinha postado a imagem de como era pra ficar... mas o forum não esta mostrando a imagem...

Vou colocar o link direto pra imagem

http://www.egwebsite.com.br/exemplo_lista.jpg

Henrique Barcelos · Dezembro 10, 2011

Não dá pra ver a imagem não, o site é redirecionado para a home page...

wolfphw · Dezembro 14, 2011

Não sei pq não esta aparecendo... mas vamos lah..

 Nivel 1
> Nivel 2
   Nivel 2-1
   Nivel 2-2
 > Nivel 2-3
     Nivel 2-3-1
 Nivel 3
> Nivel 4
 > Nivel 4-1
     Nivel 4-1-1
   Nivel 4-2

Algo assim, ele reconhecer sozinho quando tem um nível dentro.... e colocar algum simbolo ou imagem antes para identificar

Henrique Barcelos · Dezembro 14, 2011

Assim funcionou:

Imagem arrow.png:

<!DOCTYPE html>
<html>
<head>
<title>Listas em Árvore</title>
<style type="text/css">
*{
	padding: 0;
	margin: 0;
}

body {
	font-family: sans-serif;
	font-size: .9em;
}

#main {
	width: 400px;
	margin: 20px;
}

ul {
	list-style: none;
}

ul li {
	padding-left: 15px;
	line-height: 20px;
}

ul li ul {
	margin-left: 15px;
}

li.has-ul {
	background: url("arrow.png") left 5px no-repeat;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li class="has-ul">Item 1
	<ul>
		<li>Item 1.1</li>
		<li class="has-ul">Item 1.2
			<ul>
				<li>Item 1.2.1</li>
				<li>Item 1.2.2</li>
			</ul>
		</li>
		<li>Item 1.3</li>
	</ul>
</li>
<li class="has-ul">Item 2
	<ul>
		<li>Item 2.1</li>
		<li>Item 2.2</li>
	</ul>
</li>
<li class="has-ul">Item 3
	<ul>
		<li>Item 3.1</li>
	</ul>
</li>
<li>Item 4</li>
</ul>
</div>
</body>
</html>

wolfphw · Dezembro 15, 2011

Bem Henrique, como eu disse lá em cima, dessa forma no meu caso não resolve, pq eu só vou saber quando tem nível depois que eu escrevo os sub-niveis.

Henrique Barcelos · Dezembro 16, 2011

Isso vai ser gerado por alguma linguagem dinâmica?

É só bolar um jeito de "marcar" os itens que possuem filhos...

Posta aí como você está fazendo...

Arquivado

Lista

Recommended Posts

wolfphw 60

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Prado 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

wolfphw 60

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Prado 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

wolfphw 60

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Prado 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

wolfphw 60

Compartilhar este post

Link para o post

Compartilhar em outros sites

wolfphw 60

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

wolfphw 60

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

wolfphw 60

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

wolfphw 60

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

Fóruns

Tempo Real

Informação importante