Web Analytics Made Easy -
StatCounter A New Generation of Tree Menu - CodingForum

Announcement

Collapse
No announcement yet.

A New Generation of Tree Menu

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • A New Generation of Tree Menu

    I think that this is probably the only worthwhile project that I have ever worked on. Unlike a lot of heavily laden javascript tree menus, mine relies on a tiny bit of javascript (130 bytes, 390 bytes with image preloading). I could list a bunch of things about it, but I'll just let you guys take a look and play with the source code.

    As far as comments go, I couldn't care less what you have to say about it, just say something. Well, if you start flaming me I will be forced to string you up by your toenails and inform George of your imminent banning, but other than that, please comment. For those who can see past the source code, this is a wishlist, so feel free to buy me as much as you would like.

    At the moment, the urls of some of the places are really, really, really (repeated 500 times) long. I'm gonna have to jump over to [tinyurl] one of these days and take care of those. Amazon.com should be crucified for its lack of intelligible urls.

    Anyway, here are the goods.
    Tree Menu [http://null.ithium.net/andrew/NewGen...wishlist2.html]
    CSS [http://null.ithium.net/andrew/NewGen.../wishlist2.css]
    Javascript [http://null.ithium.net/andrew/NewGen...ee/linkMenu.js]

    Tested in:
    Windows
    • Firefox 0.9.2
    • Firefox 0.8
    • Internet Explorer 6.0*
    • Internet Explorer 5.5*
    • Netscape 7.1
    • Netscape 4*

    Mac
    • Safari
    • Opera
    • OmniWeb
    • Mozilla
    • Chimera
    • Firefox


    *Known Issues:
    - The <del> tag doesn't work in Netscape 4.
    - Weird extra spacing when a section of the tree is closed in Win IE.
    Last edited by Antoniohawk; Jul 22, 2004, 03:19 AM.

  • #2
    Holy @#$, that's cool I like it!! You did a great job!! I have no idea how it works, but I think it's cool -- very small loading, what browsers don't handle it? My Mac ones do, but their modern.

    Great job
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

    Comment


    • #3
      A hell of a lot of browsers should support it. I shortened the javascript by like half by removing some DOM and that probably added a bunch of browsers to the list. I've only checked it in Firefox and IE6 on Windows, so who knows. Thanks for the comments Brady, I'm glad that we both like it.

      Comment


      • #4
        I've seen them before on a couple websites, but this version seems much more efficent.

        Comment


        • #5
          Thanks. I had seen a lot of other menus like this that had a lot of extra markup, plus they used <div>s instead of lists which is a big no-no.

          Edit: I take back what I said about IE6. It's not showing up at all. As for IE 5.5, it has some padding-left/margin-left issues. It looks like I have some more work ahead of me.
          Last edited by Antoniohawk; Jul 21, 2004, 12:55 AM.

          Comment


          • #6
            Have you tried the script in IE6 Win XP? For me the page appears blank. However, Firefox works just fine, and very nice indeed!
            - George
            - JavaScript Kit- JavaScript tutorials and 400+ scripts!
            - JavaScript Reference- JavaScript reference you can relate to.

            Comment


            • #7
              I guess that withholding the javascript's ending tag just didn't sit too well. We now have liftoff in Firefox, IE6, and IE5.5. Now to figure out why IE is packing on the weight on the left.

              Comment


              • #8
                That's strange. http://null.ithium.net/andrew/NewGen...wishlist2.html still returns a blank page for me in IE6 Win XP...
                - George
                - JavaScript Kit- JavaScript tutorials and 400+ scripts!
                - JavaScript Reference- JavaScript reference you can relate to.

                Comment


                • #9
                  Sorry about that George, I guess that I didn't upload the new version. It should work now, with the exception that there are definite padding/margin issues still. If anyone knows what's causing that, please tell me.

                  Edit: We are up and running ladies and gentlemen. It seems that IE likes to tack on a huge left margin to <ul> elements, so setting it to zero did the trick.
                  Last edited by Antoniohawk; Jan 12, 2005, 04:50 PM.

                  Comment


                  • #10
                    Originally posted by Antoniohawk
                    A hell of a lot of browsers should support it. I shortened the javascript by like half by removing some DOM and that probably added a bunch of browsers to the list. I've only checked it in Firefox and IE6 on Windows, so who knows. Thanks for the comments Brady, I'm glad that we both like it.
                    Me three. Wow. That is impressive.

                    Running Win2K at 800x600 screen resolution, I looked in Firefox0.8, IE6, Opera7, NS7.1, and NS4 (CSS enabled AND disabled). Have I already said that the page is impressive?

                    The only thing that doesn't work is the <del> in NS4 - because, of course, the bozos people who deprecate tag names decided for some strange reason that they didn't like <strike> or <s> anymore. But it isn't a big deal to have the strikeouts missing on the ancient browser. If you really care about the ancient browsers, you could use a CSS hack and put a small note beside any of the titles that have been struck through that would only be visible in ancient browsers. (Heh heh, perhaps easier said than done - the note(s) would show up in any browser with CSS disabled)

                    Comment


                    • #11
                      Excellent piece o' work

                      Those are some very impressive menus, Sir!
                      Way to go, man: zippy, lightweight, standards compliant, and based around lists; what else could we wish (besides a total absence of JS... )?
                      Regards,
                      Ronald.
                      ronaldvanderwijden.com

                      Comment


                      • #12
                        Thanks for the comments everyone. llizard, I added the browsers that you mentioned, but I still need someone with a Mac to check it out and tell me what works and doesn't. Hey Brady, if you get the chance, tell me what browsers it was working in for ya.

                        Comment


                        • #13
                          Works perfect in:
                          Safari, Opera, OmniWeb, Mozilla/Chimera/Firefox for Mac.

                          Mac IE only has the issue that it doesn't allow you to click on the + or - sign to minimize the tree, you have to click on the name. That doesn't seem major, though.
                          // Art is what you can get away with. <-- Andy Warhol
                          ...:.:::: bradyjfrey.com : htmldog : ::::.:...

                          Comment


                          • #14
                            Thanks Brady. That's really weird that you can't click on the plus/minus signs. They are background images of the <a>, so they should work.

                            Comment


                            • #15
                              is the <a> a display: block property? IE mac gets weird with background image links.
                              // Art is what you can get away with. <-- Andy Warhol
                              ...:.:::: bradyjfrey.com : htmldog : ::::.:...

                              Comment

                              Working...
                              X