• 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.

  • Posts

    • dBpoweramp Music Converter 2025-06-05

      By Copernic · Posted

      dBpoweramp Music Converter 2025-06-05 by Razvan Serea Audio conversion perfected, effortlessly convert between formats. dBpoweramp contains a multitude of audio tools in one: CD Ripper, Music Converter, Batch Converter, ID Tag Editor and Windows audio shell enhancements. Preloaded with essential codecs (mp3, wave, FLAC, m4a, Apple Lossless, AIFF), additional codecs can be installed from [Codec Central], as well as Utility Codecs which perform actions on audio files. After 21 days the trial will end, reverting to dBpoweramp Free edition (learn the difference between Reference and dBpoweramp Free, here). dBpoweramp is compatible with Windows 10, 8, 7, Vista, both 32 and 64 bit. dBpoweramp Music Converter features: Convert audio files with elegant simplicity. mp3, mp4, m4a (iTunes / iPod), Windows Media Audio (WMA), Ogg Vorbis, AAC, Monkeys Audio, FLAC, Apple Lossless (ALAC) to name a few! Multi CPU Encoding Support Rip digitally record audio CDs (with CD Ripper) Batch Convert large numbers of files with 1 click Windows Integration popup info tips, audio properties, columns, edit ID-Tags DSP Effects such as Volume Normalize, or Graphic EQ [Power Pack Option] Command Line Encoding: invoke the encoder from the command line DSP Effects - process the audio with Volume Normalize, or Sample / Bit Rate Conversion, with over 30 effects dBpoweramp is a fully featured mp3 Converter dBpoweramp integrates into Windows Explorer, an mp3 converter that is as simple as right clicking on the source file >> Convert To. Popup info tips, Edit ID-Tags are all provided. dBpoweramp Music Converter 2025.06.05 changelog: Darkmode added Core Converter Debug log dumps ID Tags written VST Effect Folders dialog fixed missing InitCommonControls would not show correctly FLAC/Ogg/Opus/etc - allows editing of CDTOC ID Tag CD Ripper secure ripping log where shows TOC was not showing CD Extra correctly CD Ripper was incorrectly setting data track length on main display (for certain drives) CD Ripper internally better handling of corrupt TOCs CD TOC to Tag was incorrectly adding 150 to CD Extra disc CD Ripper shows "AccurateRip Unconfigured" in rip status rather than "not in accuraterip" if unconfigured CD Ripper art paste accepts https CueSheet added as standard - log file written to same folder as cue and folder.jpg AIFF internal code merge (macos >> windows) Download: dBpoweramp Music Converter R2025.06.05 | 82.2 MB (Shareware) View: dBpowerAMP Music Converter Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • The official Funny Pictures thread

      By Nick H. · Posted

    • The official Funny Pictures thread

      By Slugsie · Posted

      Staged. It's a requirement that vehicles are strapped down to the bed. Usually wheel and/or chassis tie downs are used. That appears to just be on the winch.
    • Here's every new AI feature Apple rumored to announce at WWDC 2025

      By stevember · Posted

      I feel Apple's big problem is the lack of big data to train any AI LLM model. They have statistics on usage, but they don't have the written social media, messaging (they were early adopters of end-to-end encryption), they didn't scrape the Internet before the book companies and new sources were wise. So they have no choice but to use a third party LLM provider. Which ties them in knots with their own stance on security and privacy. In short, they are royally stuffed when it comes to developing an in-house AI.
    • Apple warns Australia against joining EU in mandating iPhone app sideloading

      By samw61 · Posted

      Nothing is black and white. Democracy can suck, just as communism can. The risk is people who blindly think one is vastly superior over the other. Democracy needs a lot to make it work well, and there are many examples around the world of it. Good education, mandatory voting, accessible voting, and removing money from politics are just a few elements that need to be sorted for a functional democracy. The USA is the playbook on what not to do with democracy.

  • Recent Achievements

    • Week One Done
      abortretryfail earned a badge
      Week One Done
    • First Post
      Mr bot earned a badge
      First Post
    • First Post
      Bkl211 earned a badge
      First Post
    • One Year In
      Mido gaber earned a badge
      One Year In
    • One Year In
      Vladimir Migunov earned a badge
      One Year In

  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      snowy owl
      255
    3. 3
      +FloatingFatMan
      252
    4. 4
      ATLien_0
      226
    5. 5
      +Edouard
      189
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!