Multi level sliding menu with jQuery v1: vertical layout This is the top level Item 1 Item 2 Item 3 Level 1 Back to level 1 Item 1.1 Item 1.2 Item 1.3 Item 1.4 Item 1.5 Item 2.1 Item 2.2 Item 2.3 Item 3.1 Item 3.2 Item 3.3 Level 2 Back to level 2 Item 1.1.1 Item 1.1.2 Level 3 v2: horizontal layout This is the top level Item 1 Item 2 Item 3 Level 1 Back to level 1 Item 1.1 Item 1.2 Item 1.3 Item 1.4 Item 1.5 Item 2.1 Item 2.2 Item 3.1 Item 3.2 Item 3.3 Level 2 Back to level 2 Item 1.1.1 Item 1.1.2 Item 1.1.3 Item 1.1.4 Item 1.1.5 Item 1.1.6 Item 1.1.7 Level 3 This code applies to both v1 and v2. v2 has additional CSS mentioned below. HTML You’re at the top level Item 1 Item 2 Item 3 Level 1 Back to level 1 Item 1.1 Item 1.2 Item 1.3 Item 1.4 Item 1.5 Item 2.1 Item 2.2 Item 2.3 Item 3.1 Item 3.2 Item 3.3 Level 2 Back to level 2 Item 1.1.1 Item 1.1.2 Level 3 CSS .av-sliding-menu div[class*="av-wrap-"] { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px 0; } .av-sliding-menu div[class*="av-level-"]:not(.av-level-1), .av-sliding-menu div[class*="av-level-"]:not(.av-level-1) div[class*="av-wrap-"] { display: none; } .av-sliding-menu div[class*="av-wrap-"] div { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 250px; margin-bottom: 2%; padding: 20px; background-color: #16a5aa; opacity: .5; color: white; font-size: 32px; font-weight: bold; text-align: center; } .av-sliding-menu div[class*="av-wrap-"]::after { content: ""; display: block; } .av-sliding-menu div[class*="av-wrap-"] div, .av-sliding-menu div[class*="av-wrap-"]::after { flex: 0 1 32%; } .av-sliding-menu div[class*="av-wrap-"] .has-child { position: relative; opacity: 1; transition: all .3s; } .av-sliding-menu div[class*="av-wrap-"] .has-child:hover { background-color: #168891; cursor: pointer; } .av-sliding-menu div[class*="av-wrap-"] .has-child::after { content:"\f063"; font-family: "Font Awesome 5 Pro"; font-weight: 400; position: absolute; bottom: 10%; } .av-sliding-menu .av-text { min-height: 1em; font-size: 20px; font-weight: bold; text-align: center; } .av-sliding-menu .av-back { color: #16a5aa; } .av-sliding-menu .av-back:hover, .av-sliding-menu .av-back:active, .av-sliding-menu .av-back:focus { text-decoration: none; } .av-sliding-menu .av-back:hover, .av-sliding-menu .av-back:focus { text-decoration: none; color: #168891; cursor: pointer; } .av-sliding-menu .av-back::before { content:"\f062"; font-family: "Font Awesome 5 Pro"; font-weight: 400; margin-right: .5em; } /* RESPONSIVE */ @media (max-width: 870px) { .av-sliding-menu div[class*="av-wrap-"] div { flex: 1 1 100%; } } CSS (v2) .av-sliding-menu.v2 div[class*="av-wrap-"] { flex-wrap: nowrap; justify-content: flex-start; margin: 20px 0; overflow: auto hidden; scroll-snap-type: x mandatory; } .av-sliding-menu.v2 div[class*="av-wrap-"] div:not(last-child) { margin-right: 2%; scroll-snap-align: center; } .av-sliding-menu.v2 div[class*="av-wrap-"] div, .av-sliding-menu.v2 div[class*="av-wrap-"]::after { flex: 0 0 32%; } .av-sliding-menu.v2 div[class*="av-wrap-"]::after { display: none; } .av-sliding-menu.v2 .av-text:last-child::after { content: "Scroll horizontally to browse the items"; display: block; font-size: 17px; font-weight: normal; } ::-webkit-scrollbar { -webkit-appearance: none; } ::-webkit-scrollbar:horizontal { height: 10px; } ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:window-inactive { background: #e7e7e7; border: 2px solid #e7e7e7; border-radius: 10px; } /* RESPONSIVE */ @media (max-width: 870px) { .av-sliding-menu.v2 div[class*="av-wrap-"] div { flex: 0 0 100%; } } JS jQuery(document).ready(function($) { var mainWrapper = '.av-sliding-menu'; var scrWidth = window.matchMedia("(max-width: 992px)"); $(mainWrapper+' .has-child').click(function(e) { // Get target level index var levelIndex = $(this).closest('div[class*="av-level-"]').index()+2; // Get target row index var rowIndex = $(this).index()+1; // target level var levelTarget = $(this).closest(mainWrapper).find('.av-level-'+levelIndex); // target row var rowTarget = $(this).closest(mainWrapper).find('.av-level-'+levelIndex+' .av-wrap-'+rowIndex); // Hide current level $(this).closest('div[class*="av-level-"]').slideToggle(); // Reset current row's siblings (hide) $(rowTarget).siblings().not('.av-text').css('display','none'); // Show target row $(rowTarget).css('display','flex'); // Show target level $(levelTarget).slideToggle(); // Scroll to main wrapper's top (mobile) if (scrWidth.matches) { $('html,body').animate({scrollTop: $(this).closest(mainWrapper).offset().top-50},'slow'); } }); $(mainWrapper+' .av-back').click(function(e) { e.preventDefault(); // Set upper level index var backLevelIndex = $(this).closest('div[class*="av-level-"]').index(); // Hide current level $(this).closest('div[class*="av-level-"]').animate({ height: 'toggle', opacity: 'toggle' }); // Show upper level $(this).closest(mainWrapper).find('.av-level-'+backLevelIndex).slideToggle(); });