[DHTML] Slashdot's Menu

Printable View

Show 40 post(s) from this thread on one page

06-29-2006, 03:48 PM
DimX

[DHTML] Slashdot's Menu

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
06-29-2006, 04:00 PM
Twey

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">  <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; }
06-29-2006, 04:09 PM
DimX

Oh, of course, :) this is much simpler way.
06-30-2006, 12:06 AM
ddadmin

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?
06-30-2006, 07:11 AM
DimX

The images are from slashdot.org, but the code is written completly by me (slashdot's code is too heavy :p )
06-30-2006, 08:30 AM
ddadmin

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.
07-04-2006, 03:34 PM
Twey

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.
07-06-2006, 05:32 AM
ddadmin

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!
07-07-2006, 06:40 PM
dmurray14

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
07-07-2006, 08:09 PM
Twey

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.

Show 40 post(s) from this thread on one page