Responsive Multi-Level Menu

A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.

Responsive Multi-Level Menu

View demo Download source

Today we want to share an experimental drop-down menu with you. The main idea is to save space for menus that have a lot of content and sub-levels. Each sub-level in this menu will be shown in its own context, making the “parent” level disappear. This is done with subtle animations that are defined in separate animation classes. The menu is fluid so that it can be used easily in a responsive layout.

Please note: this only works as intended in browsers that support the respective CSS properties.

The structure of the menu contains an unordered list that can have an arbitrary number of sub-lists:

<div id="dl-menu" class="dl-menuwrapper">
	<button class="dl-trigger">Open Menu</button>
	<ul class="dl-menu">
		<li>
			<a href="#">Item 1</a>
			<ul class="dl-submenu">
				<li><a href="#">Sub-Item 1</a></li>
				<li><a href="#">Sub-Item 2</a></li>
				<li><a href="#">Sub-Item 3</a></li>
				<li>
					<a href="#">Sub-Item 4</a>
					<ul class="dl-submenu">
						<li><a href="#">Sub-Sub-Item 1</a></li>
						<li><a href="#">Sub-Sub-Item 2</a></li>
						<li><a href="#">Sub-Sub-Item 3</a></li>
					</ul>
				</li>
				<li><!-- ... --></li>
				<!-- ... -->
			</ul>
		</li>
		<li><!-- ... --></li>
		<li><!-- ... --></li>
		<!-- ... -->
	</ul>
</div><!-- /dl-menuwrapper -->

Animations are defined in animation classes:

.dl-menu.dl-animate-out-1 {
	animation: MenuAnimOut1 0.4s linear forwards;
}

@keyframes MenuAnimOut1 {
	50% {
		transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

.dl-menu.dl-animate-in-1 {
	animation: MenuAnimIn1 0.3s linear forwards;
}

@keyframes MenuAnimIn1 {
	0% {
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

And the plugin is called as following:

$( '#dl-menu' ).dlmenu({
	animationClasses : { classin : 'animation-class-name', classout : 'animation-class-name' }
});

We hope you like this little experiment and find it inspiring!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 195

Comments are closed.
  1. 1

    Question.

    I’m using a very simple menu with no sub menu’s and right now when viewing in mobile I click a link, but the menu doesn’t close. I’ve had a few friends test out my site and they all mention the menu should close when one of the links is clicked. It just seems natural.

    I’m not the best with jquery or javascript. I was curious what code do I need to add to the .js file and where in the code do I need to add it in order to close the menu when a link is clicked?

    Can anyone please tell me the code to achieve this? None of the previous solutions I saw in these replies has worked for me.

  2. 2

    Hey all,

    great plugin! Thanks for sharing!

    I have one problem with the size. In a normal browser, the button has the normal size. If I use a mobile device like an iphone, the button is really small and the menu entrys are small as well. I have to zoom in to use the menu.

    How do I change the size of the button and the menu? What css tags are responsible for that?

    Its on a dev environment with a pw, so I cannot show it. Hope you can say anything w/o seeing it. I use typo3 for the website.

    Thank you for you help, I appreciate that!

  3. 4

    It’s a very very nice menu… but as I can’t put anything in the space underneath it – i.e. where the menu will expand, it’s all a bit pointless.

    The top of a screen is the critical area that your customers are going to see – not much use if it is blank.

    Thanks for the effort though :)

    • 5

      HI JT, not sure if this applies to your own situation? I added a z-index of 2 to the .dl-menuwrapper class and that allowed the menu to open above the other content on the page reliably. It is indeed a very nice menu, thanks to tympanus for making it available.

Comments are closed.