This Joomla override allows you to display a pure CSS tree menu simply using the Joomla's mod_menu module.

Joomla 4 frontend rendering

CSS

.tree-menu,
.tree-menu ul {
  margin:0 0 0 1em; 
  padding:0;
  list-style:none;
  color:#369;
  position:relative;
}
.tree-menu ul {
  margin-left:.5em;
} 
.tree-menu:before,
.tree-menu ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}
.tree-menu li {
  margin:0;
  padding:0 1.5em; 
  line-height:2em; 
  font-weight:bold;
  position:relative;
}
.tree-menu li:before {
  content:"";
  display:block;
  width:10px; 
  height:0;
  border-top:1px solid;
  margin-top:-1px; 
  position:absolute;
  top:1em; 
  left:0;
}
.tree-menu li:last-child:before {
  background:white; 
  height:auto;
  top:1em; 
  bottom:0;
}

This Joomla 3 override allows you to display a pure CSS tree menu simply using the Joomla's mod_menu module. .

Joomla 3 frontend rendering

CSS

.tree-menu,
.tree-menu ul {
  margin:0 0 0 1em; 
  padding:0;
  list-style:none;
  color:#369;
  position:relative;
}
.tree-menu ul {
  margin-left:.5em;
} 
.tree-menu:before,
.tree-menu ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}
.tree-menu li {
  margin:0;
  padding:0 1.5em; 
  line-height:2em; 
  font-weight:bold;
  position:relative;
}
.tree-menu li:before {
  content:"";
  display:block;
  width:10px; 
  height:0;
  border-top:1px solid;
  margin-top:-1px; 
  position:absolute;
  top:1em; 
  left:0;
}
.tree-menu li:last-child:before {
  background:white; 
  height:auto;
  top:1em; 
  bottom:0;
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net