Horizontal Drop-Down Menu

A responsive horizontal drop-down menu inspired by the Microsoft.com menu.

By Manoela Ilic in Blueprints on March 5, 2013

Demo Code

From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!

This large horizontal drop-down menu simply shows the sub-menu when an item gets clicked. It’s inspired by the Microsoft.com drop-down menu. Some example media queries show how to adjust the menu for smaller screens.

The HTML

<nav id="cbp-hrmenu" class="cbp-hrmenu">
	<ul>
		<li>
			<a href="#">Products</a>
			<div class="cbp-hrsub">
				<div class="cbp-hrsub-inner"> 
					<div>
						<h4>Learning & Games</h4>
						<ul>
							<li><a href="#">Catch the Bullet</a></li>
							<li><a href="#">Snoopydoo</a></li>
							<!-- ... -->
						</ul>
					</div>
					<div>
						<h4>Utilities</h4>
						<ul>
							<li><a href="#">Gadget Finder</a></li>
							<li><a href="#">Green Tree Express</a></li>
							<li><a href="#">Green Tree Pro</a></li>
							<li><a href="#">Wobbler 3.0</a></li>
							<li><a href="#">Coolkid</a></li>
						</ul>
					</div>
					<div>
						<!-- ... -->
					</div>
				</div><!-- /cbp-hrsub-inner -->
			</div><!-- /cbp-hrsub -->
		</li>
		<li><!-- ... --></li>
		<li><!-- ... --></li>
		<!-- ... -->
	</ul>
</nav>

The CSS

.cbp-hrmenu {
	width: 100%;
	margin-top: 2em;
	border-bottom: 4px solid #47a3da;
}

/* general ul style */
.cbp-hrmenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
	width: 90%;
	max-width: 70em;
	margin: 0 auto;
	padding: 0 1.875em;
}

.cbp-hrmenu > ul > li {
	display: inline-block;
}

.cbp-hrmenu > ul > li > a {
	font-weight: 700;
	padding: 1em 2em;
	color: #999;
	display: inline-block;
}

.cbp-hrmenu > ul > li > a:hover {
	color: #47a3da;
}

.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
	color: #fff;
	background: #47a3da;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
	display: none;
	position: absolute;
	background: #47a3da;
	width: 100%;
	left: 0;
}

.cbp-hropen .cbp-hrsub {
	display: block;
	padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
	width: 33%;
	float: left;
	padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
	content: " ";
	display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
	clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
	line-height: 2em;
}

.cbp-hrsub h4 {
	color: #afdefa;
	padding: 2em 0 0.6em;
	margin: 0;
	font-size: 160%;
	font-weight: 300;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) { 

	.cbp-hrmenu {
		font-size: 80%;
	}

}

@media screen and (max-width: 43em) { 

	.cbp-hrmenu {
		font-size: 120%;
		border: none;
	}

	.cbp-hrmenu > ul,
	.cbp-hrmenu .cbp-hrsub-inner {
		width: 100%;
		padding: 0;
	}

	.cbp-hrmenu .cbp-hrsub-inner {
		padding: 0 2em;
		font-size: 75%;
	}

	.cbp-hrmenu > ul > li {
		display: block;
		border-bottom: 4px solid #47a3da;
	}

	.cbp-hrmenu > ul > li > a { 
		display: block;
		padding: 1em 3em;
	}

	.cbp-hrmenu .cbp-hrsub { 
		position: relative;
	}

	.cbp-hrsub h4 {
		padding-top: 0.6em;
	}

}

@media screen and (max-width: 36em) { 
	.cbp-hrmenu .cbp-hrsub-inner > div {
		width: 100%;
		float: none;
		padding: 0 2em;
	}
}

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

The JavaScript

var cbpHorizontalMenu = (function() {

	var $listItems = $( '#cbp-hrmenu > ul > li' ),
		$menuItems = $listItems.children( 'a' ),
		$body = $( 'body' ),
		current = -1;

	function init() {
		$menuItems.on( 'click', open );
		$listItems.on( 'click', function( event ) { event.stopPropagation(); } );
	}

	function open( event ) {

		if( current !== -1 ) {
			$listItems.eq( current ).removeClass( 'cbp-hropen' );
		}

		var $item = $( event.currentTarget ).parent( 'li' ),
			idx = $item.index();

		if( current === idx ) {
			$item.removeClass( 'cbp-hropen' );
			current = -1;
		}
		else {
			$item.addClass( 'cbp-hropen' );
			current = idx;
			$body.off( 'click' ).on( 'click', close );
		}

		return false;

	}

	function close( event ) {
		$listItems.eq( current ).removeClass( 'cbp-hropen' );
		current = -1;
	}

	return { init : init };

})();

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

menu tabs

Master JavaScript Animation with GSAP – Perfect for Beginners! Get full, free access to 34 video lessons, step-by-step projects, and hands-on demos. Enroll for free →

Feedback ¹¹¹

Comments are closed.

Dan March 5, 2013 at 12:22

Nice – can it be set to hover by changing ‘click’ references to ‘hover’?
- Achal Varma March 5, 2013 at 13:01
  
  Yup, I’m pretty sure it can!
- Jon Schuster March 5, 2013 at 15:13
  
  Dan, have a look at this. Without giving the answer away on quite a simple solution, I say “why not take a stab at a few of these events?” 🙂
  
  Definitely not too hard to figure out at all. I’m a JS n00b, and still got it right away.
- Zephon March 24, 2013 at 16:38
  
  I tried the same, but it won’t work. Try to use mouseover or mouseenter. But since I am not good with this either, I can’t figure out a way to let it stay open when using the actual submenu but to close when moving somewhere else.
- badass sasquatch August 16, 2013 at 00:57
  
  I couldn’t get it to work with changing the click event to hover. I’ll try the mouse enter event next.
Dídac March 5, 2013 at 12:45

A little bit buggy in chrome when doing clicks 25.0.1364.97 m
Erkan March 5, 2013 at 13:47

Cute Blue! 😛 Thanks 🙂
Emily March 5, 2013 at 15:31

Thank you!!! This is amazing as always!!!
Jesús March 6, 2013 at 02:25

Beautifull, keep the good work.
Andrey March 6, 2013 at 07:21

Good job, really awesome – clean and professioanal.

I have a question – is it possible to close menu when user clicks somewhere outside of the menu area?
- Calvin December 18, 2013 at 23:08
  
  Hi Audrey,
  
  I am having the same issue. Have you found a way to fix the issue?
  
  Thanks
Christof March 6, 2013 at 18:27

Quick question, once integrated into my site the drop down does not move the rest of the page content down with it? Any ideas how to get this to work?
- Tom April 10, 2013 at 02:22
  
  Hi – did you find a fix for this?
  
  I’m having the same issue with the content not being pushed down when the menu’s open.
  Also some of the elements below the nav menu are displaying on top of the open menu (slider/ buttons). See: http://bit.ly/YbBCsf
  
  Thanks
- Tom April 10, 2013 at 05:50
  
  I wasn’t able to force the other elements down upon open, however I managed to get it to display over the top of them. If anyone else is wondering how to do this, you just need to add:
  
  z-index: 99999;
  
  to the following class:
  
  .cbp-hropen .cbp-hrsub {
- Adam April 19, 2013 at 12:17
  
  Hey have you found a fix for this? It would be amazing to bump the whole content down. I was thinking of using the Js from the slide and push menu but know very little about JS. Any ideas anyone?
- Tom April 19, 2013 at 19:09
  
  I haven’t I’m afraid.. I’ve stuck with adding z-index and allowing the menu to appear over the top of other content. I agree with you however, would be better if the content was pushed down
Sara Soueidan March 7, 2013 at 09:14

A life saver! needed the same logic for a similar menu am coding fro scratch, with minor differences 🙂 thank u 🙂
fred March 7, 2013 at 16:09

may help for hover seems much easier if you just do this….

$(“#cbp-hrmenu > ul > li”).hover(
function(){
$(this).addClass(“cbp-hropen”);
},function(){
$(this).removeClass(“cbp-hropen”);
}
);
- Michele June 19, 2013 at 17:13
  
  Where should I put this code?
- Lucille July 28, 2013 at 18:10
  
  Michele, Have you figured out where to put this code for hover?
- badass sasquatch August 16, 2013 at 01:37
  
  He’s saying you can replace the current script with this. It will achieve the affect but with hovering instead of clicking the links. I’ve not tested this on all browsers but it seems to work well in chrome.
- Valerio January 29, 2014 at 03:16
  
  Why should U change the original oop code? Isn’t easier to change this line from this
  $menuItems.on( 'click', open );
  to this
  $menuItems.on( 'mouseover', open );
  in order to get the mouse over effect? 🙂
Bradley March 11, 2013 at 16:20

How do you make the navigation clickable when it doesn’t have any sub items?
- sergio April 23, 2013 at 00:40
  
  I have the same restlessness, someone
  has accomplished, when you have sub items, that when clicking on the option to take me to the url indicated
  
  Thank you.
- Evin May 7, 2013 at 21:01
  
  I’m looking for this as well.
- Evin May 7, 2013 at 21:07
  
  Got it:
  
  I found a way.
  
  For any menu item I want to use as a drop-down, I gave it a new class:
  <a href=”#” rel=”nofollow”>Dropdown Link</a>
  
  Then changed this line in the js:
  var b=$(“#cbp-hrmenu > ul > li”)
  … to …
  var b=$(“#cbp-hrmenu > ul > li.dropdown”)
  
  This turns all top-level links into direct links unless specifically marked for drop-down.
Ivan March 22, 2013 at 16:00

Thank You !
Michael March 28, 2013 at 01:49

Hi, love the drop down. Is it possible to make a menu item a link to another page though, rather than a drop down menu?
- Michael March 28, 2013 at 02:25
  
  Hi, figured it out. Basically what I did was take out all the menu options that weren’t supposed to be a drop down and created another nav class that looked the exact same as the drop down menu one. Put that in a list with proper ul li properties and it’ll all line up and it’ll act like a normal menu!
- Tom April 10, 2013 at 06:07
  
  Hi Michael,
  
  Could you please explain what you done exactly? The only solution I see is to create a whole new nav menu that sits to the side of this one, but in doing so we’d then need to change the ‘width: 100%;’ to a fixed width in pixels. Eg if we’re using a 940px width, give the main nav menu 900px, then the remaining 40px can be used for the additional nav menu (with a clickable link). This means the menu’s no longer responsive.
  
  I’m guessing you’ve found a more suitable way around this.. would be great if you could share your solution with us 🙂
  
  Cheers
Rob March 31, 2013 at 14:04

Hey guys. Thanks for this!

I have a problem though. This does not seem to work in IE 7 or 8. Is there a fix I can apply to hack those browsers into a working state?
Franz April 4, 2013 at 22:27

Hello, how can i make it a vertical menu? and to reduce the drop box dimensions?
Sonny April 10, 2013 at 17:58

This is very helpful. Thanks a lot for sharing.
thehcd April 12, 2013 at 08:54

Hi,
I’m trying to add a jquery-ui effect to the dropdown, however, the .removeClass doesn’t seem to be working..
Can anyone shed any light on this!?
I’ve put together a to show the effect..
Pedro April 22, 2013 at 16:07

Good job, i love it, but…

…I have a question!

when user clicks somewhere outside of the menu area it closes instantly… i want to leave it always open and i’m trying but cant afford that yet. someone want to help me please?!
- Mary Lou April 22, 2013 at 16:12
  
  Hi Pedro, just comment/remove this line:
  $body.off( ‘click’ ).on( ‘click’, close );
  Hope it helps. Cheers, ML
Pedro April 22, 2013 at 16:19

yes u helped a lot =D thank you

keep the good work guys!!
Pedro April 22, 2013 at 16:38

im using it for an admin backoffice (for a school work) and when i do action on it it automatic close. i resolve it with some php, i turned off the jquery and do

if (!isset($_SESSION[‘menu’]))
$_SESSION[‘menu’]=1;

if (isset($_GET[‘m’]))
$_SESSION[‘menu’]=$_GET[‘m’];

and then

<a href=”principal.php?m=1″ rel=”nofollow”>Sobre Mim</a>

Problem solved it will be always open when working on the content of the tab!!!
jerome April 24, 2013 at 18:07

Hello,

First of all congratulations for this wonderful work and the valuable help you make the developer.

I have a question about this wonderful menu that I would like to integrate into a website project.

How to restrict the width of the menu placed in a wrapper 1200px?

Alas, I am not come, can you help me?

Thank you for all the resources and help.

Very good job.
Lucille May 9, 2013 at 00:26

Hi,
This is beautiful. Has anyone figured out how to keep top menu highlighted when child elements are hovered on?
Thank you,
Ad May 9, 2013 at 11:32

Hey..

I was just wondering.. How can I edit this in order to make it close when an element of the drop menu is clicked?

Is this possible?

Thanks in advance.
- Ad May 14, 2013 at 06:11
  
  Well I think I fixed it but im using the menu is two locations of the same page.. It works for one but the other one doesnt seem to be affected how ever I try and change the code.
  
  What I did,
  $mylistItems = $( ‘.cbp-hrsub-inner > ul li’ ),
  $mymenuItems = $mylistItems.children( ‘a’ ),
  
  Added the above code at the start so I can focus on the items that are been clicked and then gave an click event for them. $mymenuItems.on(‘click’ , close);
  
  I tried changing the elements around because I had an extra div in my second instance of the menu. This didnt actually help though.
  
  Month tag
- Ad May 14, 2013 at 06:11
  
  Month
  
  tag
- Ad May 14, 2013 at 06:12
  
  div class=”cbp-hrsub-inner fil”>
  Month
  
  tag
  
  </div
- Ad May 14, 2013 at 06:12
  
  Well I cant actually post my code. Just realized I cant delete any of those posts also .. sigh ..
Tian Fröhlich May 9, 2013 at 23:53

Hi,

when you set an z-index to .cbp-hrmenu .cbp-hrsub you will not have problems with absolute positioned elements on your side.
Kianna May 12, 2013 at 17:28

This is a great tutorial but I feel like the mock up is far too complicated for trying to teach a dog new tricks- would love to see this simplified into a more simple drop down for the sake of learning.
Metography May 17, 2013 at 00:33

This is great — does all that I want but… I have some top-level menu items that do not have sub menus. How can I get those links to ignore the js and go directly to the url link?
- Sunny July 19, 2013 at 23:12
  
  Change the $listItems selector in the JS to only attach the menu code to those with submenus. This should work:
  $listItems = $( '#cbp-hrmenu > ul > li' ).has('ul')
- Sunny July 20, 2013 at 01:12
  
  Actually, it would probably be better to use:
  $listItems = $( '#cbp-hrmenu > ul > li' ).has( '.cbp-hrsub' )
  
  That way, you can have a submenu that doesn’t have a ul in it.
- Lucille July 28, 2013 at 19:29
  
  Thankyou Sunny!
  This worked great, but now my styling is gone. Is that something that should be done in the js or the css.
  I’m trying to get the parent tabs to stay highlighted when a child page is active. I don’t know if this is something that worked initially and I broke it or it’s not coded in. Does this make sense to anyone?
Ben May 21, 2013 at 22:34

Would there be anyway this could be used with WordPress? I would love to add this to a WordPress site.

Thanks!
Ronan May 28, 2013 at 11:58

Hi,

I see a few people on here are wondering how to create the menu but have some of the top level menu items that don’t have drop down content as normal menu links that would take you away from the page.

Has anyone discovered how to do this yet? I was trying to follow Evin’s example in the comments but this was not working for me.

Any help would be greatly appreciated!

Thanks in advance.
- StevenCM May 30, 2013 at 12:57
  
  Hi Ronan,
  
  This could be done easily:
  
  In the JS, change $menuItems = $listItems.children( 'a' ), to $menuItems = $listItems.children( 'a.dropdown' ),
  
  In the HTML, change <a>MyHyperLink</a> to <a href="#" rel="nofollow">MyHyperLink</a> wherever you need a dropdown
  
  This will fix your issue and make nav items without subitems clickable and take you to the new page
  
  Regards,
  Steven
- StevenCM May 30, 2013 at 13:07
  
  Format gone, sorry for that!
  
  Just do as described for the JS part
  
  In the HTML, change a href to a class="dropdown" href wherever you have subitems and need a dropdown.
  
  Regards,
  Steven
- Ronan May 30, 2013 at 18:09
  
  Hi StevenCM,
  
  Thank you very much for that, apologies I am a beginner with JS, it worked perfectly!!
  
  Thanks again!
Michele June 10, 2013 at 21:20

Hello! I would like to put a fade in effect when click, how can I do this?
Aki June 17, 2013 at 10:22

I have litlle code that does same.

$( ‘#cbp-hrmenu > ul > li’ ).click(function(){
$( ‘#cbp-hrmenu > ul > li’ ).removeClass( ‘cbp-hropen’ );
$(this).addClass(‘cbp-hropen’);
});
Mike July 2, 2013 at 14:50

I’d like to insert an overlay effet as this:
http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/

Any ideas how to activate a dark background when the panel is open?
Mike July 2, 2013 at 15:02

I try with this code and works good, but…:
$(function() { var $oe_menu = $('#cbp-hrmenu'); var $oe_menu_items = $oe_menu.children('li'); var $oe_overlay = $('#oe_overlay'); $oe_menu_items.bind('mouseenter',function(){ var $this = $(this); $this.addClass('slided selected'); $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){ $oe_menu_items.not('.slided').children('div').hide(); $this.removeClass('slided'); }); }).bind('mouseleave',function(){ var $this = $(this); $this.removeClass('selected').children('div').css('z-index','1'); }); $oe_menu.bind('mouseenter',function(){ var $this = $(this); $oe_overlay.stop(true,true).fadeTo(200, 0.6); $this.addClass('hovered'); }).bind('mouseleave',function(){ var $this = $(this); $this.removeClass('hovered'); $oe_overlay.stop(true,true).fadeTo(200, 0); $oe_menu_items.children('div').hide(); }) });

CSS:
.oe_overlay{ background:#000; opacity:0; position:fixed; top:0px; left:0px; width:100%; height:100%; }

… it’s ok for desktop browser, but with touch screen (table, smartphone), not works… the dark background overlay remain open when close the panel.

Any tips/suggestions?
Mike July 2, 2013 at 15:14

I forgot in my previous post, that you must insert this code after tag:
- Mike July 2, 2013 at 15:16
  
  id=”cbp_overlay” class=”cbp_overlay
  
  insert above in a div tag
- Mike July 2, 2013 at 15:17
  
  I’m sorry… not “cbp_overlay” but “oe_overlay”
Mike July 2, 2013 at 15:15
Krzysiek July 5, 2013 at 14:05

Hey everyone.
I have big problem with this blueprint. Everythings looks work fine but when i try implement this in my website like this :
<a href="#" rel="nofollow">Products</a> Learning & Games <a href="#" rel="nofollow">Catch the Bullet</a> <a href="#" rel="nofollow">Snoopydoo</a>  Utilities <a href="#" rel="nofollow">Gadget Finder</a> <a href="#" rel="nofollow">Green Tree Express</a> <a href="#" rel="nofollow">Green Tree Pro</a> <a href="#" rel="nofollow">Wobbler 3.0</a> <a href="#" rel="nofollow">Coolkid</a>      
Nothing work and firebug dont show me any problems. Inside runmenu.js i put
$(document).ready(function() { cbpHorizontalMenu.init(); });

any help ?
Krzysiek July 5, 2013 at 14:08

sorry for mess
https://dl.dropboxusercontent.com/u/952312/testowe%20menu.zip here i have this what i want to do. Big thanks for any solution or advice
Sunny July 19, 2013 at 23:16

Note that the code to close the menu on a body click is destructive. If you have any other click events on the body, this code will break those other events.

By name spacing the click events on the body, this can be avoided.

Offending code: $body.off( 'click' ).on( 'click', close );

Fixed code: $body.off( 'click.cbphr' ).on( 'click.cbphr', close );
Vivek Arora July 20, 2013 at 00:31

To make this menu show and hide on hover. Give each #cbp-hrmenu > ul > li a unique id and then do the following jquery –
<script> var $listItems = $( '#cbp-hrmenu > ul > li' ); $listItems.hover(function() { var id = $(this).attr('id'); var t = setTimeout(function(){ $('#'+id).addClass( 'cbp-hropen' ); }, 200); }, function() { var id = $(this).attr('id'); var t = setTimeout(function(){ $('#'+id).removeClass( 'cbp-hropen' ); }, 300); }); <script>
- Hannah December 11, 2013 at 02:02
  
  Thank you! this worked
Mario Gonzales July 25, 2013 at 01:21

Hola Mary Lou, te agradezco mucho por iluminarnos con tus desarrollos, implementare este menú en un sitio web, si gustas luego te envió el link.

Buenas Noches!
Zyad Sherif July 28, 2013 at 13:58

This is a very neat drop-down menu, just one thing is essential
if there is a main menu item with no children it will need to be a link to some page

I recommend changing the code when defining the variables to only contain those with nested unordered lists like this

var $listItems = $( ‘#cbp-hrmenu > ul > li’ ).has(‘ul’),

Best
Lucille July 29, 2013 at 07:32

Mary Lou,
Kudos on the beautiful click and stick menu! I love it.
I would love to get it to work on my site. I’m having some difficulty with the active tab maintaining the blue background. The input for the zindex and how to get the parent without a child to work as a link, etc. was so helpful … thank you guys! I’m a newbie to query. So I’m wondering if there is a tutorial out there that walks through the code. Or a demo with more than just the index page since I can’t look at the code and know if the link is supposed to remain active or if it’s something I broke in the process of augmenting it. Or if someone that got it to work would post a link to their site? I would be most grateful. Thank you <3
Craig July 30, 2013 at 18:06

You work continues to be inspiring.

I want to combine this menu with your Quotes Rotator (http://tympanus.net/codrops/2013/03/29/quotes-rotator/) applet on the same web page. I see they both use modernizr.custom.js. The code in the two versions are slightly different. Any suggestions about how to handle this?
- Craig July 30, 2013 at 18:08
  
  Can I just rename the files, so they do not cancel each other?
Erica August 19, 2013 at 21:28

All I get after installing everything is this error – ReferenceError: $ is not defined. It looks fine but no menus open up.
Marco September 8, 2013 at 12:26

What I don’t understand is the reason why you put, in the default.css file, the following definition:

.icon-drop:before {
[…]
text-indent: 8000px;
[…]
}

This seems to work in Chrome and Firefox, but not in Opera, Safari etc…
Thanks for any explanations!
Marco
Ron September 9, 2013 at 01:02

Would someone please share the code with me for closing the submenu when a submenu link is clicked? Thanks!
Manuel September 15, 2013 at 10:45

Hi! Great job!

Could anyone tell me how to keep one of the drop menus (the first one, for example) open “on page load” so I can make it the first presentation page?

Thanks in advance.
- imitek November 12, 2013 at 14:36
  
  anybody have idea?
Molly September 25, 2013 at 23:02

Has anyone figured out how to display the menu drop on hover instead of on click?
- Chris November 8, 2013 at 10:57
  
  just change the onclick to mouseover in js file
- Hannah December 10, 2013 at 04:00
  
  Yes I would like to know how to do this too. I have switched click to mouseover however it needs more code than that like timeout..and how it mouses out.. I have a large subnav like the one shown on this demo. Please help!
Chris September 26, 2013 at 22:37

Hi,

How would I make the drop down menu slide open? With a transition?
- Chris September 26, 2013 at 22:40
  
  Or add a .animate function?
Kevin G October 1, 2013 at 19:54

I just installed this beautiful jquery responsive horizontal menu bar for my empty webpage. The menubar has not been altered with any style or modification by me.

Can anyone help me to:

Keep the submenu to the width of my blue border (horizontal rule)–container width in Deskview. Currently when the submenu opens it expands and fills the whole width of the screen across. I would like it to show only within my container. (Even with the blue border line).

When resizing the screen to mobile size, it looks great as it is (and thats how I want it exactly)–Like the mobile.–When you resize back to desk it has a different look (outside the container / blue boder-horiz rule)

When styling this menu bar previously, It would seem that every change I would make in deskview to fix the problem, would create a new problem in mobileview. Mobileview of this menubar is PERFECT!–I need Desk to look like the mobile (even with the blue border line).

Any help would be greatly appreciated. Thank you

Here is the site / code:

http://www.dothopper.com
- Yuvaraj December 16, 2013 at 06:53
  
  Great Code. I need Hover to display dropdown contents? Pls help me
Kevin G October 5, 2013 at 21:13

This is a beautiful menu btw, thanks very much Mary Lou.

When I view my menu on Android and iphone, the menu is in the full open position showing all parent and children list items. My menu will be somewhat large, so this could be an issue. When I am styling it with my WYSIWIG editor, it looks like it will only show the Parents (no child items), but when I view it live on browser, it is open, exposing all parent and child items, and will not close.

Is this the default? Am I doing something wrong? If so, is there a way to collapse the child items?

Also, I found this code to ‘toggle’ a responsive menu:

$(“.toggleMenu”).click(function(e) {
e.preventDefault();
$(“.nav”).toggle();
});
if (ww < 800) {
$(".toggleMenu").css("display", "inline-block");
$(".nav").hide();
} else {
…
}

I have tried to use this (unsuccessfully) to ‘toggle’ the menu trying to create a ‘hamburger-style’ icon to then reveal Parent items.

Is there any way to get this to work?

Thanks very much for any help
Chris November 8, 2013 at 10:57

Hi,
very good job, nice menu!
i changed the onclick event to onmouseover
is there a possibility to delay the mouseover event for lets say 0.5 secondes?
thanks in advance

The HTML

The CSS

The JavaScript

Manoela Ilic

Custom SVG Cursors with an Interactive Emitter Effect

3D Typing Effects with Three.js

Creating an ASCII Shader Using OGL

Stay in the loop: Get your dose of frontend twice a week

Feedback 111

Feedback ¹¹¹