This is based on the excellent example here.

If you get problems with the menu being hidden behind other screen elements below it, ensure that if whatever divs etc the menu is contained within have a z-index specified it is higher than the z-index of lower down screen elements.  Although the drop menu specifies a z-index of 1000 to float above anything else, if it is cotnainted within anything that has a lower z-index specified that  will wipe outs its z-index back down to the containing z-index value!

The HTML


<nav class="nav_my_menu">
	<ul>
		<li class="my_menu_button"><a href=".">Menu</a></li>
		<li class="my_menu_item"><a href="#">Page 1</a></li>
		<li class="my_menu_item"><a href="#">Page 2</a></li>
		<li class="my_menu_item"><a href="#">Page 3</a></li>
		<li class="my_menu_item"><a href="#">Contact Us</a></li>
	</ul>
</nav>

 

The CSS


/*----- RESPONSIVE MENU -----*/
.nav_my_menu ul {
	margin: 0;
	padding: 0;
}
.nav_my_menu li {
	list-style: none;
	display: inline-block;
	height: 40px;
	margin-right: 6px;
	margin-left: 6px;
}
.nav_my_menu a {
	text-decoration: none;
	color: #999;
}
.nav_my_menu a:hover {
	color: #000;
}
.nav_my_menu .my_menu_button a {
	display: none;
}
.nav_my_menu.right ul {
	text-align: right;			/*Set alignment*/
}

@media screen and (max-width: 600px) {
	/*----- CHANGE MENU TO DROP DOWN BUTTON -----*/
	.nav_my_menu {
		position: relative;
		min-height: 40px;
	}	
	.nav_my_menu ul {
		position: absolute;
		top: 0;
		left: 0;
		background: #ccc url('/images/header_menubar_dropdown_button.png') no-repeat;
		background-size: 33px 33px;
		background-position: top 5px right 5px;
		height: 44px;
		width: 220px;		/*Set width of drop down*/

		padding-top: 5px;
		padding-right: 0px;
		padding-bottom: 5px;
		padding-left: 0px;
		
		border: solid 1px #aaa;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav_my_menu li {
		display: none;
		margin: 0;
		
		/*Ensure its above other screen elements below the menu*/
		position: relative;
		z-index: 1000;
	}
	.nav_my_menu .my_menu_button {
		display: block;
	}
	.nav_my_menu .my_menu_button a {
		display: block;
		background: none;
		color: #666;
		padding-right: 42px;		/*Clear the drop down icon */
	}
	.nav_my_menu a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: right;		/*Set alignment*/
	}

	/* on nav hover */
	.nav_my_menu ul:hover li.my_menu_item {
		display: block;
		background-color: #888;
		margin: 0px;

		border: solid 1px #aaa;		
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav_my_menu.right ul {
		left: auto;					/*Set alignment*/
		right: 0;						/*Set alignment*/
	}
}

 

UK Electronic Designer
USEFUL?
We benefit hugely from resources on the web so we decided we should try and give back some of our knowledge and resources to the community by opening up many of our company’s internal notes and libraries through mini sites like this. We hope you find the site helpful.
Please feel free to comment if you can add help to this page or point out issues and solutions you have found, but please note that we do not provide support on this site. If you need help with a problem please use one of the many online forums.

Comments

Your email address will not be published.