Cross Browser Horizontal Menu

Cross Browser Horizontal MenuIn this article I’m going to kill a bunch of birds with a small pile of code.

Not only is this a cross browser horizontal menu that works on browsers all the way back to Internet Explorer 5.5. This menu works without JavaScript on all browsers except for IE 6 & 7.

On top of that the menu works with WordPress themes. In fact list used below is the automatically generated by WordPress.

See the Cross Browser Menu Here

Why Use JQuery to Solve IE Issues

I chose to use JavaScript, or rather JQuery for IE 6 and 7 because I found it was the most straight forward way to solve the problems IE 6 & 7 have with hover. I could have defined a custom htc file so that IE 6 & 7 worked without the included JQuery, but I thought that was overkill.

The JQuery code as you will see below is extremely short and very straight forward.

Well enough talk. If you know of a better way to create a cross browser horizontal menu post the link below. If you like articles like this, share it with others

Here is the Code

crossbrowsermenu.js

$(function(){

    $("ul.dropdown li").hover(function(){
    
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    
    }, function(){
    
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    
    });

});

ie.css

ul.dropdown ul li { 
	display: inline; 
	width: 100%; /* Width depends on the size of containing block */
} 

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>Cross Browser Horizontal Menu</title>
	
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->
			
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	
	<script type="text/javascript" language="javascript" src="js/crossbrowsermenu.js"></script>
	
	<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
</head>

<body>

<div class="art-bar art-nav">
	<div id="navigation" class="menu-menu-container">
	
	<ul id="menu-menu" class="dropdown">
		<li id="menu-item-720" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-720">
			<a href="#" >Home</a>
		</li>
		<li id="menu-item-734" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-734">
			<a href="#" >Products/Services</a>
				<ul class="sub-menu">
					<li id="menu-item-740" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-740">
						<a href="#" >Social Media Audit</a>
					</li>
					<li id="menu-item-891" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-891">
						<a href="#" >Social Media Consulting</a>
							<ul class="sub-menu">
								<li id="menu-item-753" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-740">
									<a href="#" >Social Media Audit</a>
								</li>
								<li id="menu-item-754" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-740">
									<a href="#" >Social Media Audit 2</a>
								</li>
							</ul>
					</li>
					<li id="menu-item-733" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-733">
						<a href="#" >Online Reputation</a>
					</li>
					<li id="menu-item-743" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-743">
						<a href="#" >Strategic Marketing Plan</a>
					</li>
					<li id="menu-item-729" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-729">
						<a href="#" >Mobile Marketing</a>
					</li>
					<li id="menu-item-836" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-836">
						<a href="#" >Real Estate Text Marketing</a>
					</li>
					<li id="menu-item-749" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-749">
						<a href="#" >A La Carte Services</a>
					</li>
					<li id="menu-item-1131" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1131">
						<a href="#" >Affiliate Products</a>
					</li>
				</ul>
		</li>
		<li id="menu-item-752" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-752">
			<a href="#" >Available Workshops</a>
				<ul class="sub-menu">
					<li id="menu-item-737" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-737">
						<a href="#" >Facebook Business Page</a>
					</li>
					<li id="menu-item-890" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-890">
						<a href="#" >LinkedIn Business</a>
					</li>
					<li id="menu-item-742" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-742">
						<a href="#" >Goals that Stick</a>
					</li>
					<li id="menu-item-745" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-745">
						<a href="#" >Affirmations for Life</a>
					</li>
					<li id="menu-item-750" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-750">
						<a href="#" >Clear the Clutter</a>
					</li>
				</ul>
			</li>
			<li id="menu-item-726" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-726">
				<a href="#" >Industry Articles</a>
		<ul class="sub-menu">
			<li id="menu-item-721" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-721">
				<a href="#" >Small Business Marketing</a>
			</li>
			<li id="menu-item-728" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-728">
				<a href="#" >Local Online Presence</a>
			</li>
			<li id="menu-item-732" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-732">
				<a href="#" >Mobile Marketing</a>
			</li>
			<li id="menu-item-741" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-741">
				<a href="#" >Social Media Marketing</a>
			</li>
		</ul>
	</li>
	<li id="menu-item-723" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-723">
		<a href="#" >Upcoming Events</a>
			<ul class="sub-menu">
				<li id="menu-item-724" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-724">
					<a href="#" >Are You LinkedIn</a>
				</li>
				<li id="menu-item-738" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-738">
					<a href="#" >Facebook Business/Fan Page</a>
				</li>
				<li id="menu-item-747" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-747">
					<a href="#" >Optimize LinkedIn Workshop</a>
				</li>
			</ul>
		</li>
		<li id="menu-item-744" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-744">
			<a href="#" >About Us</a>
				<ul class="sub-menu">
					<li id="menu-item-917" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-917">
						<a href="#" >About Social Voice Marketing</a>
					</li>
					<li id="menu-item-725" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-725">
						<a href="#" >Cindy&#8217;s Profile</a>
					</li>
					<li id="menu-item-731" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-731">
						<a href="#" >Barry&#8217;s Profile</a>
					</li>
				</ul>
			</li>
			<li id="menu-item-746" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-746">
				<a href="#" >Contact Us</a>
			</li>
</ul></div>
</div>

</body>

</html>

style.css

body { 
	/* Use em for IE and added custom google font*/
	font: 1.0em/1.4em 'PT Sans Narrow', sans-serif; 
	color: #fff;
} 

.menu-menu-container * { /* Everything starts out with no margins or padding */
	margin: 0; 
	padding: 0; 
}

.menu-menu-container { 
	width: 1000px; 
	margin: 0px auto; /* Top Bottom 25px / Left Right auto */
	border: 1px solid #3B88B4;
	float: left;
	background: #3B88B4;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3B88B4', endColorstr='#295D7C'); /* for IE */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3B88B4), to(#295D7C)); /* for webkit browsers */
	background-image: -moz-linear-gradient(top,  #3B88B4,  #295D7C); /* for firefox 3.6+ */
} 

/* Remove underlines for all anchor tags in .menu-menu-container */
.menu-menu-container a { 
	text-decoration: none; 
}

/* Remove bullets for all ul tags in .menu-menu-container */
.menu-menu-container ul { 
	list-style: none; 
}

/* Styling for menubar */
ul.dropdown { 
	position: relative; 
}

ul.dropdown li { 
	font-weight: bold; 
	float: left; 
	zoom: 1; /* Forces IE to follow layout rules with the float */
	background: #3B88B4;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3B88B4', endColorstr='#295D7C'); /* for IE */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3B88B4), to(#295D7C)); /* for webkit browsers */
	background-image: -moz-linear-gradient(top,  #3B88B4,  #295D7C); /* for firefox 3.6+ */ 
}

ul.dropdown a:hover { 
	color: #fff; 
}

ul.dropdown a:active { 
	color: #fff; 
}

ul.dropdown li a { 
	display: block; 
	padding: 6px 10px; /* Top Bottom 6px / Left Right 10px */
	border-right: 1px solid #3B88B4;
	color: #fff; 
}

ul.dropdown li:last-child a { 
	border-right: none; 
}

ul.dropdown li.hover,  /* Add hover class in JQuery so it works in IE */
ul.dropdown li:hover { 
	background: #295D7C;
	color: fff; 
	border: 1px solid #295D7C;
	position: relative; 
}

ul.dropdown li.hover a { 
	color: fff; 
}


/* First Drop Down Styling */
ul.dropdown ul { 
	width: 200px; 
	visibility: hidden; /* Hide Menu */
	position: absolute; 
	top: 100%; /* Sets top to the bottom of the containing box */
	left: 0; /* Sets left equal to the containing box */
}

ul.dropdown ul li { 
	font-weight: normal; 
	background: #3B88B4;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3B88B4', endColorstr='#295D7C'); /* for IE */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3B88B4), to(#295D7C)); /* for webkit browsers */
	background-image: -moz-linear-gradient(top,  #3B88B4,  #295D7C); /* for firefox 3.6+ */ 
	color: #fff; 
	border-bottom: 1px solid #fff;
	float: none; 
}
									  
/* IE requires Inline Block */
ul.dropdown ul li a { 
	border-right: none; 
	width: 100%; /* Width depends on the size of containing block */
	display: inline-block; 
} 

/* Second Drop Down Styling */
ul.dropdown ul ul { 
	left: 100%; /* Positions item to the right of containing block */
	top: 0; /* Sets top to the top of the containing box */
}

/* Set styling for all uls that are children of li */
/* Makes menu appear on hover on all browsers since IE 7 */
ul.dropdown li:hover > ul { 
	visibility: visible; 
}

7 Responses to “Cross Browser Horizontal Menu”

  1. supprof1 says:

    it works even internet explorer 5.5!!! you definitly made an impact!!
    thank you derek very mutch
    i’m sure taht i’ll use after reading it and understading it. and if there will be any question i’ll not hesitate. i know that there is a lot of debuging techniques witch will make my life easyer.
    for the last tutorial. how to design a website. thank you for the
    thank you very mutch for calling me us your best fan. i realy am fan but i know there are and there will be better than me.
    what i liked about that tutorial is taht ishowed me a diffrent way to design and mainly how you addapt your qualifications to made it.from artisteer to illustrator!! good
    thank you very mutch derek.

  2. supprof1 says:

    i nerver see before a video taking care of IE6 and IE7 and old browsers bugs and showing the triks to fix themes.
    i think it’s a pretty good idea.
    thank you very mutch derek

  3. Ds1admkt says:

    Thank you so much, this was exactly what I needed. Your comments in the code helped as I had to customize it, and they made it easy to understand. You have done many people a great service!!

Leave a Reply

Your email address will not be published.

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

Google+