CSS: Cross Browser WordPress Horizontal CSS Menu

Cascading Style Sheets (CSS) is becoming so powerful that we no longer need to use javascript for the mouse hovering events, nor we need to use images to make our web beautiful. With the new CSS3, There are number of properties that adds very cool look to our websites. Some of those are transitions, gradients, shadows and rounded corners. Although, none of these are supported in older versions of Internet Explorer but they do die gracefully.

This snippet lets you add a simple CSS menu to a default WordPress generated menu. You do not need to add any custom CSS class or menu walker class to make it compatible.

For those who do not know how to add a menu in WordPress. You need to do following three steps to add menu that can be managed from WordPress Admin

1. Add “register_nav_menu( ‘primary’, ‘Primary Menu’ );” to your functions.php
2. Add “wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) );” where you want to show your menu.
3. Go to WP-Admin > Appearance -> Menu, Add a menu with sub menus and press “Save Menu”
4. Under “Theme Location”, Select your menu in “Primary Menu” dropdown. thats it.

Your menu area should look like this.

Snippet

/* reset */
.menu,
.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

/* menu style */
.menu {
	box-shadow: 1px 1px 10px #333;
	-moz-box-shadow: 1px 1px 10px #333;
	-webkit-box-shadow: 1px 1px 10px #333;
	height: 40px;
	color:#FFFFFF;

	background:-moz-linear-gradient(top,#545454 1px,#363636);;
	background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#545454),color-stop(1,#363636));

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background:#363636;
}

.menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 40px;
}

/* css of navigation links */
.menu li a {
	display: block;
	padding: 0 14px;
	margin: 6px 0;
	line-height: 28px;
	text-decoration: none;

	border-left: 1px solid black;

	font-weight: bold;
	font-size: 13px;

	color: #fff;
	text-decoration:none;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #ccc; }

/* css of submenu block */
.menu .sub-menu {
	position: absolute;
	top: 40px;
	left: 0;
	width:200px;

	background:#363636;
	box-shadow:2px 2px 10px #333;
	-moz-box-shadow: 2px 2px 10px #333;
	-webkit-box-shadow: 2px 2px 10px #333;

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;

	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
	opacity: 0;
}

.menu li:hover > .sub-menu { opacity: 1;  }

.menu .sub-menu li {
	height: 0;
	overflow: hidden;
	padding: 0;
	width:100%;

	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}

.menu li:hover > .sub-menu li {
	height: 36px;
	overflow: visible;
	padding: 0;
}
/* css of submenu links */
.menu .sub-menu li a {
	padding: 4px 0 4px 14px;
	margin: 0;

	border: none;
	border-bottom: 1px solid black;
}

.menu .sub-menu li:last-child a { border: none; }

One Response to CSS: Cross Browser WordPress Horizontal CSS Menu

  1. Thanks to you We have changeԁ оurthoughtѕ and opinions onthis.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>