Search jQuery

jQuery Forum

Tree Menu

in Using jQuery • 9 years ago

Hello, I am trying to implement a tree menu, but I have no idea to get it work fine, it's multilevel , thanks for any help

Here is my source code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
*{
padding:0;
margin:0;
}
#dvmenucategorias{
width:15%;
float:left;
}
#dvmenucategorias a{
color:#000;
text-decoration: none;
}
#dvmenucategorias li p{
padding:3%;
}
#dvmenucategorias li{
list-style: none;
}
#dvenccategorias{
background-color: #fbb03b;
padding:3%;
text-align: center;
}
li.level1{
background-color: #005b9f;
color:#FFFFFF;
border-bottom: 1px solid lightslategray;
}
li.level2 {
background-color: #373636;
border-top: 1px solid #FFFFFF;
color:#FFFFFF;
}
li.level3{
color:#000;
background-color: #f0f2f2;
border-top: 0;
}
li.level4{
color:#000;
background-color: yellowgreen;
border:0;
}
li.level5{
background-color: #FFFFFF;
border:0;
}
</style>
<script type="text/javascript">
$('document').ready(function() {
$('li').click(function() {
if ($(this).find(':first-child').find('ul').is(':visible')) {
$(this).find(':first-child').find('ul').hide();
}
else {
$(this).find(':first-child').find('ul').show();
}
});
});
</script>
</head>
<body>
<ul id="dvmenucategorias">
<li class="level1">Vehiculos
<ul><li class="level2">Carros
<ul>
<li class="level3">Marca
<ul>
<li class="level4"><a href="" class="lnkfiltro">Chevrolet</a>
<ul>
<li class="level5">---<a href="" class="lnkfiltro">Spark</a></li>
<li class="level5">---<a href="" class="lnkfiltro">Cruze</a></li>
</ul>
</li>
</ul>
<ul>
<li class="level4"><a href="" class="lnkfiltro">Mazda</a>
<ul>
<li class="level5">---<a href="" class="lnkfiltro">Mazda 3</a></li>
<li class="level5">---<a href="" class="lnkfiltro">Mazda 6</a></li>
</ul>
</li>
</ul>
<ul>
<li class="level4"><a href="" class="lnkfiltro">Daewoo</a>
<ul>
</ul>
</li>
</ul>
<ul>
<li class="level4"><a href="" class="lnkfiltro">Toyota</a>
<ul>
</ul>
</li>
</ul>
<ul>
<li class="level4"><a href="" class="lnkfiltro">Hiunday</a>
<ul>
</ul>
</li>
</ul>
<ul>
<li class="level4"><a href="" class="lnkfiltro">Renault</a>
<ul>
</ul>
</li>
</ul>
<ul>
<li class="level4"><a href="" class="lnkfiltro">Audi</a>
<ul>
</ul>
</li>
</ul>
</li>
<li class="level3">Dirección
<ul>
<li class="level4"><a href="" class="lnkfiltro">Asistida</a>
<ul>
</ul>
</li>
</ul>
<ul>
<li class="level4"><a href="" class="lnkfiltro">Hidraulica</a>
<ul>
</ul>
</li>
</ul>
<ul>
<li class="level4"><a href="" class="lnkfiltro">Mecanica</a>
<ul>
</ul>
</li>
</ul>
</li>
<li class="level3">Color
<ul>
<li class="level4"><a href="" class="lnkfiltro">Rojo</a>
<ul>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul><li class="level2">Camiones
<ul>
<li class="level3">Marca
<ul>
<li class="level4"><a href="" class="lnkfiltro">Chevrolet</a>
<ul>
<li class="level5">---<a href="" class="lnkfiltro">Turbo </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="level1">Ubicación</li>
<li class="level1">Rango de Precios</li>
<li class="level1">Refinar Busqueda Por</li>
</ul>
</body>
</html>

Replies(1)

sebatiancb

Re: Tree Menu

9 years ago

If someone needs it here is a link: http://sower.com.au/demo/accordion.html, but this is an accordion menu

Top Reply

Response title

Attachments

jQuery Forum

Tree Menu

Replies(1)

Re: Tree Menu

Statistics

Tags

Actions