• 0

Java/CSS/DHTML Menu?

Asked by TheLegendOfMart,

 Share

Question

Grand Master

TheLegendOfMart

Posted
Posted

Ok ive been looking and ive spotted a few but i cant seem to find any that work similar to the one im looking for.

If you go to www.computerandvideogames.com and look at the navbar at the top, its similar to the thing i want to use, ie you mouseover an image and then the menu drops down just below it with links on.

Like this:

Untitled-1.jpg

Link to comment
https://www.neowin.net/forum/topic/248904-javacssdhtml-menu/
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Enthusiast

kingpuka

Posted
Posted

I'm pretty sure Flash MX has a built in template that is close to what you are looking for. If it isn't quite what you are looking for, you could always look at it to see how it works. :D

Good luck on your search!

PS. If you find something good, let me know! :whistle:

  • 0
Grand Master

ACTIONpack

Posted
Posted

CSS can't do that type of menu. Javascript will be the way to go or DHTML but I dont know how to do it with that. Flash is a way you can go but takes up more bandwidth.

  • 0
Mentor

Michael_C

Posted
Posted (edited)

You can do it with a little javascript and CSS. By setting the display style value with javascript on mouseovers it can be done quite easily.

Edit- Heres the proof-of-concept I just wrote to show it can be done quite easily.

<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function toggleMenu (id) {
	document.getElementById(id).style.display = 'block';
	if(id != 'menu1') { 
  document.getElementById('menu1').style.display = 'none';
	}
	if(id != 'menu2') { 
  document.getElementById('menu2').style.display = 'none';
	}
	if(id != 'menu3') { 
  document.getElementById('menu3').style.display = 'none';
	}
	if(id != 'menu4') { 
  document.getElementById('menu4').style.display = 'none';
	}
}
</script>
<style type="text/css">
<!--
#menu {
	text-align: center;
	color: black;
	background-color: silver;
	height: 20px;
}
#menu ul {
	margin: 0px;
	padding: 0px;
}
#menu ul li {
	display: inline;
	outline: inset thin;
}
#menu ul li a {
	padding: 0px 10px 0px 10px;
}
#menu ul li a:hover {
	background-color: grey;
}
.submenu {
	background-color: #000000;
	color: #CCCCCC;
	width: 100%;
	height: 20px;
}
-->
</style>
</head>
<body>
<div id="menu">
	<ul>
  <li><a href="javascript: void(0);" onmouseover="toggleMenu('menu1')">Menu 1</a></li> 
  <li><a href="javascript: void(0);" onmouseover="toggleMenu('menu2')">Menu 2</a></li> 
  <li><a href="javascript: void(0);" onmouseover="toggleMenu('menu3')">Menu 3</a></li> 
  <li><a href="javascript: void(0);" onmouseover="toggleMenu('menu4')">Menu 4</a></li> 
	</ul>
</div>
<div class="submenu">
	<div id="menu1" style="display: none">Menu 1 links</div>
	<div id="menu2" style="display: none">Menu 2 links</div>
	<div id="menu3" style="display: none">Menu 3 links</div>
	<div id="menu4" style="display: none">Menu 4 links</div>
</div>
</body>
</html>

Edited by flightmike1
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.