Page 1 of 8 123 ... LastLast
Results 1 to 10 of 75

Thread: [DHTML] Slashdot's Menu

  1. #1
    Join Date
    Jun 2006
    Posts
    182
    Thanks
    0
    Thanked 14 Times in 14 Posts

    Default [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
    Last edited by DimX; 06-29-2006 at 05:13 PM.

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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;
    }
    Last edited by Twey; 06-30-2006 at 01:51 AM.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Jun 2006
    Posts
    182
    Thanks
    0
    Thanked 14 Times in 14 Posts

    Default

    Oh, of course, this is much simpler way.

  4. #4
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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?

  5. #5
    Join Date
    Jun 2006
    Posts
    182
    Thanks
    0
    Thanked 14 Times in 14 Posts

    Default

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

  6. #6
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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.

  7. #7
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. #8
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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!

  9. #9
    Join Date
    Jul 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •