Drop line navigation bar with images

Hi everyone,

I have a problem to code drop line navigation bar for the web site with images. I have found example online how it can be done using jQuery but the problem is that buttons are not made out of images but pure HTML and CSS.

Does anyone know how can I achieve the same result using just images as buttons?

Here’s the link towards example I mentioned:

http://www.stunicholls.com/menu/jquery-dropline-7.html

You can see that drop line in the above example is made in 4 levels which I don’t really need. Just one drop line in submenu will work for me.

As a matter of fact I did manage to achieve this effect with just pure HTML and CSS but can’t force it to keep buttons active once someone clicks to access page. I want that when chosen page loads up I have active button in Main Bar and submenu seen, so user can clearly see where he/she is. Just the way its been done with this jQuery example.

Just to make it clear I can make those buttons visible but then navigation bar won’t work at all. Just stands there as static image and you can’t make any choices in order to navigation to another page.

In the attachment you will find my code so you can see what I have done so far and hopefully it will help you to provide me with adequate solution.

Since the example I listed above has been done using jQuery, maybe I need to that using jQuery too, no?

Does anyone have clue who this can be achieved?

Thanks a lot!!!

Hi Hal,
Welcome to SitePoint.

h Aesthtically am not so sure it’s is a good decision to keep the drop line menu’s open in their target pages. A drop down is there for that specific reason. But that’s Art Direction and UX, not web design so on to your Q.

You dont need jQuery ( or .js) for this. As you may have figured out you can create drop line menu by placing the position:relative in a container element (the UL as opposed to the LI) and giving the child UL width:100% ( but left:0; right:0; is also effective and allows for padding!)

Simplified example:


ul.nav { position: relative;}/* your root  UL. DO NOT  give LIs positioning!!*/
ul.nav  ul { position:absolute;  left:-9999; right:auto; top:-9999em; } /*bonus!!! positioning the UL absolutely alows you to hide it w/o relying on display:none;*/
.nav li:hover ul { left:0; right:0; top:100%; margin-top:-1px}/*note how i move the UL back up slightly so that there is AT LEAST  a pixel of overlap with the parent LI*/

as far as keeping the sub menus open w/o .js, it would rely on the same technique comonly used when having highlighted tabs. You would need an identifying class on the page or page container and a matching class on the LI; if you are using a CMS you could also just have the LI of the current have a class=‘current’ and plly the same styles to .current as to :hover.

Not relying on CMS you could do as follows:


ul.nav { position: relative;} 
ul.nav  ul { position:absolute;  left:-9999; right:auto; top:-9999em; } 
.nav li:hover ul, .contact .nav .contact>ul ,  .sevices .nav .sevices>ul { left:0; right:0; top:100%; margin-top:-1px}/*and so forth*/

Hope that helps!

Huh tried it didn’t work out. Still can’t implement this technic into my code :frowning:

You may want to look at this, I found it useful http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

Yeah that’s what I’m saying. It’s not a problem to do that when hover just changes color of the letters as in your example. I can do that easily. If you saw my attachment you noticed that I did make drop line menu but cant make it stay open with active buttons turned on when someone chooses particular page.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
			ul, li {margin:0; padding:0}
			#pageWrap {margin:0 auto; width:960px;}
			.hNav {float:left;   font:120%/1  arial, sans-serif; position: relative ; background: pink; width:100%; position: relative; }
			.hNav li { float:left;  list-style:none; }
			.hNav a { padding:.5em; text-decoration:none; display:block}
			.hNav ul { position: absolute; left:-999em; top:100%; font-size: 80% }
			.hNav li:hover , .hNav ul{background: orange}
			.hNav li:hover ul,.services .hNav .services>ul{ left:0; top:100%; right:0; left:0; top:100%; right:0; z-index: 15}
			
			 .services .hNav .services>ul, .services .hNav li.services, .services .hNav li.services:hover, .other .hNav .other>ul,.other .hNav li.other, .other.hNav li.other:hover, .segment .hNav .segment>ul, .segment .hNav li.segment, .segment .hNav li.segment:hover { background: yellow; z-index: 5}
 			.hNav li li+li a { border-left: 1px solid cyan;}
			.hNav li li  a { padding:0 .5em; margin:.5em 0}
			.hNav li li a:hover { text-decoration: underline}

		</style>
	</head>
	<body >
	<div id="pageWrap" class="services">
	 <div>headers stuff</div>
<ul class="hNav">
		<li><a href="#">item</a></li>
		<li><a href="#">item</a></li>
		<li class="segment"><a href="#">item</a>
			<ul>
				<li><a href="#">item</a></li>
				<li><a href="#">seg</a></li>
				<li><a href="#">item</a></li>
			</ul>
		</li>
		<li class="services"><a href="#">item</a>
			<ul>
				<li><a href="#">item</a></li>
				<li><a href="#">serv</a></li>
				<li><a href="#">item</a></li>
			</ul>
		</li>
		<li class="other"><a href="#">item</a>
			<ul>
				<li><a href="#">item</a></li>
				<li><a href="#">other</a></li>
				<li><a href="#">item</a></li>
				<li><a href="#">item</a></li>
			</ul>
		</li>
	</ul>
	 <div>content</div>
	 <div>footer</div>
	</div>	
	</body>
</html>

This is an example of what I was talking about. It also solves a problem you would have run into after this, that being taht if you kept your dropdown open in subsequent pages then the dropdown from the main menus would have been obscured… navigational nightmare!

Hope this is clearer now.