How to display child ul right next to parent ul
As you can see in my code, where I have five parent links and each link has 12 child links. The way I wanted to show my child links right next to the parent link when selected and other child links of other parent links should be hidden at the same time. Navigating to telegraph is exactly what I want.
This is a sample navigation code.
<div class="menu_container">
<nav class="menu">
<ul>
<li><a href="#Menu 1">Menu 1</a>
<ul>
<li><a href="#SubMenu 1.1">SubMenu 1.1</a></li>
<li><a href="#SubMenu 1.2">SubMenu 1.2</a></li>
<li><a href="#SubMenu 1.3">SubMenu 1.3</a></li>
<li><a href="#SubMenu 1.4">SubMenu 1.4</a></li>
<li><a href="#SubMenu 1.5">SubMenu 1.5</a></li>
<li><a href="#SubMenu 1.6">SubMenu 1.6</a></li>
<li><a href="#SubMenu 1.7">SubMenu 1.7</a></li>
<li><a href="#SubMenu 1.8">SubMenu 1.8</a></li>
<li><a href="#SubMenu 1.9">SubMenu 1.9</a></li>
<li><a href="#SubMenu 1.10">SubMenu 1.10</a></li>
<li><a href="#SubMenu 1.11">SubMenu 1.11</a></li>
<li><a href="#SubMenu 1.12">SubMenu 1.12</a></li>
</ul>
</li>
<li><a href="#Menu 2">Menu 2</a>
<ul>
<li><a href="#SubMenu 2.1">SubMenu 2.1</a></li>
<li><a href="#SubMenu 2.2">SubMenu 2.2</a></li>
<li><a href="#SubMenu 2.3">SubMenu 2.3</a></li>
<li><a href="#SubMenu 2.4">SubMenu 2.4</a></li>
<li><a href="#SubMenu 2.5">SubMenu 2.5</a></li>
<li><a href="#SubMenu 2.6">SubMenu 2.6</a></li>
<li><a href="#SubMenu 2.7">SubMenu 2.7</a></li>
<li><a href="#SubMenu 2.8">SubMenu 2.8</a></li>
<li><a href="#SubMenu 2.9">SubMenu 2.9</a></li>
<li><a href="#SubMenu 2.10">SubMenu 2.10</a></li>
<li><a href="#SubMenu 2.11">SubMenu 2.11</a></li>
<li><a href="#SubMenu 2.12">SubMenu 2.12</a></li>
</ul>
</li>
<li><a href="#Menu 3">Menu 3</a>
<ul>
<li><a href="#SubMenu 3.1">SubMenu 3.1</a></li>
<li><a href="#SubMenu 3.2">SubMenu 3.2</a></li>
<li><a href="#SubMenu 3.3">SubMenu 3.3</a></li>
<li><a href="#SubMenu 3.4">SubMenu 3.4</a></li>
<li><a href="#SubMenu 3.5">SubMenu .5</a></li>
<li><a href="#SubMenu 3.6">SubMenu 35.6</a></li>
<li><a href="#SubMenu 3.7">SubMenu 3.7</a></li>
<li><a href="#SubMenu 3.8">SubMenu 3.8</a></li>
<li><a href="#SubMenu 3.9">SubMenu 3.9</a></li>
<li><a href="#SubMenu 3.10">SubMenu 3.10</a></li>
<li><a href="#SubMenu 3.11">SubMenu 3.11</a></li>
<li><a href="#SubMenu 3.12">SubMenu 3.12</a></li>
</ul>
</li>
<li><a href="#Menu 4">Menu 4</a>
<ul>
<li><a href="#SubMenu 4.1">SubMenu 4.1</a></li>
<li><a href="#SubMenu 4.2">SubMenu 4.2</a></li>
<li><a href="#SubMenu 4.3">SubMenu 4.3</a></li>
<li><a href="#SubMenu 4.4">SubMenu 4.4</a></li>
<li><a href="#SubMenu 4.5">SubMenu 4.5</a></li>
<li><a href="#SubMenu 4.6">SubMenu 4.6</a></li>
<li><a href="#SubMenu 4.7">SubMenu 4.7</a></li>
<li><a href="#SubMenu 4.8">SubMenu 4.8</a></li>
<li><a href="#SubMenu 4.9">SubMenu 4.9</a></li>
<li><a href="#SubMenu 4.10">SubMenu 4.10</a></li>
<li><a href="#SubMenu 4.11">SubMenu 4.11</a></li>
<li><a href="#SubMenu 4.12">SubMenu 4.12</a></li>
</ul>
</li>
<li><a href="#Menu 5">Menu 5</a>
<ul>
<li><a href="#SubMenu 5.1">SubMenu 5.1</a></li>
<li><a href="#SubMenu 5.2">SubMenu 5.2</a></li>
<li><a href="#SubMenu 5.3">SubMenu 5.3</a></li>
<li><a href="#SubMenu 5.4">SubMenu 5.4</a></li>
<li><a href="#SubMenu 5.5">SubMenu 5.5</a></li>
<li><a href="#SubMenu 5.6">SubMenu 5.6</a></li>
<li><a href="#SubMenu 5.7">SubMenu 5.7</a></li>
<li><a href="#SubMenu 5.8">SubMenu 5.8</a></li>
<li><a href="#SubMenu 5.9">SubMenu 5.9</a></li>
<li><a href="#SubMenu 5.10">SubMenu 5.10</a></li>
<li><a href="#SubMenu 5.11">SubMenu 5.11</a></li>
<li><a href="#SubMenu 5.12">SubMenu 5.12</a></li>
</ul>
</li>
</ul>
</nav>
</div>
I am already using JQuery, so any solution with JQuery is also appreciated and of course any help would be really appreciated.
source to share
This is best done with show()
and hide()
with some DOM requests:
var currentParent = null;
$('.menu>ul>li>ul').hide();
$('.menu>ul>li').on('click', selectParent);
function selectParent(event) {
var elem = $(this);
if (currentParent && !elem.is(currentParent)) {
currentParent.children('ul').hide();
}
elem.children('ul').show();
currentParent = elem;
}
See this fiddle for experimentation. It also shows how you can reproduce the appearance of the Telegraph navbar with float
and display: inline
without changing your markup.
However, I would strongly suggest adding a second item <nav>
to #menu_container
that will contain a submenu. Then you can bind parent elements li
to subscribers ul
using attributes href
and id
in the selection handler.
<nav class="menu">
<ul>
<li><a href="#menu_1">Menu 1</a>
<li><a href="#menu_2">Menu 2</a>
...
</ul>
</nav>
<nav class="submenu">
<ul id="#menu_1">
<li><a href="#SubMenu 1.1">SubMenu 1.1</a></li>
<li><a href="#SubMenu 1.2">SubMenu 1.2</a></li>
<li><a href="#SubMenu 1.3">SubMenu 1.3</a></li>
...
</ul>
...
</nav>
Relevant JS:
var currentParent = null;
var currentSubMenu = null;
// Hide all sublists
$('.submenu>ul').hide();
$('.menu>ul>li').on('click', selectParent);
function selectParent(event) {
var elem = $(this);
// If there is a previous parent, hide its child list
if (currentParent && !elem.is(currentParent)) {
currentSubMenu.hide();
}
var childID = elem.children('a').attr('href');
var childMenu = $(childID);
// Show the clicked element child list
childMenu.show();
currentParent = elem;
currentSubMenu = childMenu;
}
This layout, demonstrated here , gives you much more control over styling and allows for precise positioning. In fact, this is exactly how Telegraph HTML does it (only using s div
instead nav
).
source to share