[DHTML] Slashdot's Menu

DimX · #1 06-29-2006, 04:48 PM

1) CODE TITLE: Slashdot's Menu

2) AUTHOR NAME/NOTES: DimX

3) DESCRIPTION: A DHTML menu that looks much like the one in slashdot.org but is a lot simpler and has a better browser support.
--// Ok, no validation problems anymore.

When changing width of the menu, the width of titles and submenus must also be changed and some (2) pictures must be resized (MS Paint is just fine)

4) URL TO CODE: http://roboweb.awardspace.com/sdmenu/sdmenu.zip

5) URL TO DEMO: http://roboweb.awardspace.com/sdmenu/index.html

Twey · #2 06-29-2006, 05:00 PM

Quote:

can't be validated (this can be corrected using php)

But to do so would totally defeat the point of validating

It's quite possible to validate this.

index.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>
	<title>Slashdot's Menu</title>
	<link rel="stylesheet" type="text/css" href="menufiles/menu.css">
	<!--[if IE]><link rel="stylesheet" type="text/css" href="menufiles/menuie.css"><![endif]-->
	<script type="text/javascript" src="menufiles/menu.js"></script>
  </head>

  <body>
	<div class="sdmenu">
	  <span class="title" id="top"><img src="menufiles/expanded.gif" class="arrow" alt="-"> Online Tools</span>
	  <div class="submenu">
		<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
		<a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
		<a href="http://tools.dynamicdrive.com/emailriddler/">Email Riddler</a>

		<a href="http://tools.dynamicdrive.com/password/">.htaccess Password</a>
		<a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
		<a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
	  </div>
	  <span class="title"><img src="menufiles/expanded.gif" class="arrow" alt="-"> Support Us</span>
	  <div class="submenu">

		<a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
		<a href="http://www.dynamicdrive.com/link.htm">Link to Us</a>
		<a href="http://www.dynamicdrive.com/resources/">Web Resources</a>
	  </div>
	  <span class="title"><img src="menufiles/expanded.gif" class="arrow" alt="-"> Partners</span>
	  <div class="submenu">
		<a href="http://www.dynamicdrive.com">FlamingText</a>
		<a href="http://www.dynamicdrive.com">Marketing Find</a>
		<a href="http://www.dynamicdrive.com">01webdirectory</a>
		<a href="http://www.dynamicdrive.com">AnfyJava</a>
	  </div>
	</div>
  </body>

</html>

menuie.css:

Code:

.sdmenu .title, .sdmenu .titlehidden, .sdmenu .submenu a {
  width: 150px;
  height: 25px;
}

DimX · #3 06-29-2006, 05:09 PM

Oh, of course,

this is much simpler way.

ddadmin · #4 06-30-2006, 01:06 AM

Very nice, and of course, made even better with Twey's validation changes. Can I assume that while the menu style is inspired by Slashdot, the code/images are all original?

DimX · #5 06-30-2006, 08:11 AM

The images are from slashdot.org, but the code is written completly by me (slashdot's code is too heavy

)

ddadmin · #6 06-30-2006, 09:30 AM

Thanks for the info. I'll definitely consider featuring this script on DD after reviewing it more closely in various browsers. I'll also need to come up with original images, as I'm sure you're aware things like images are copyrighted.

Twey · #7 07-04-2006, 04:34 PM

Quote:

I'll also need to come up with original images, as I'm sure you're aware things like images are copyrighted.

Not on Slashdot, I wouldn't think. I don't see an explicit copyleft anywhere, but I'm sure if someone asks them they'd say the images are Free.

ddadmin · #8 07-06-2006, 06:32 AM

Ok, script now posted to DD: http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

I've made some minor changes to the images, plus cleaned up the CSS so to remove the extra IE only CSS file.

If you do make any updates/ improvements to the script, it'd be great if you could do so off the zip file posted on DD, just so we're all on the same page.

Thanks!

dmurray14 · #9 07-07-2006, 07:40 PM

Thanks for the nav bar, I love it. However I do have two requests, if I may...

1) is it possible to make it so all the menu items are closed on page load?

2) Possible to have other open menu items close when another is selected? Ie, I select menu item one, it expands. I select menu item 2, and it expands and closes menu item one.

Thanks a lot, much appreciated!

Dan

Twey · #10 07-07-2006, 09:09 PM

Code:

var n = navigator.userAgent;
if(/Opera/.test(n)) bypixels = 2;
else if(/Firefox/.test(n)) bypixels = 3;
else if(/MSIE/.test(n)) bypixels = 2;

This script still uses browser detection, I see.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search