Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    CSS Menu Builder Tool

    Anyone want to review my new menu builder tool I just put up?
    It builds pure CSS site navigation menus for you!!

    http://www.devinrolsen.com/tools/men...der/index.html

  • #2
    New Coder
    Join Date
    Jun 2008
    Posts
    93
    Thanks
    12
    Thanked 1 Time in 1 Post
    Good stuff, very thorough and easy to use!

  • Users who have thanked millsi80 for this post:

    ubh (12-02-2008)

  • #3
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Thanks for the great review millsi80!

    I am still looking for some more reviews / beta testing or feature requests to make this a truly useful tool for others so please feel free to add your thoughts.

    I have worked out some bugs and added some new features to this tool.

    CSS Menu Builder Bugs

    •IE6 - IE8 had issues with typing in color and dimension variables and would alert errors. (Now Fixed)
    •IE6 had issues with the menu links aligning to a vertical instead of a horizontal fashion. (Now Fixed)
    •Sub Menu Links Vertical Position Problem Is Now Fixed. (Now Fixed)


    CSS Menu Builder v1.1 New Features

    •Link Hover Background Color - In this release of the CSS menu builder you now have the ability to declare a background color for your links hover states.
    •Link Height Support - Declare your main menu link height dimensions.
    •Link Border Support - The CSS menu builder now has border support for your main menu links.
    •Link Divider Support - You can now divide your main menu links with our new link divider support.

    CSS Menu Builder Tool

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by ubh View Post
    Anyone want to review my new menu builder tool I just put up?
    It builds pure CSS site navigation menus for you!!

    http://www.devinrolsen.com/tools/men...der/index.html
    invalid markup, html:

    http://validator.w3.org/check?verbos...r%2Findex.html

    this is not relevant until you fix html but probably you have also some css errors:

    http://jigsaw.w3.org/css-validator/v...r%2Findex.html

    remove the blink from "Menu Live Preview" is very annoying.

    regards

  • Users who have thanked oesxyl for this post:

    ubh (12-02-2008)

  • #5
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Thanks oesxyl!

    I have cleaned up all W3C errors in sites CSS and XHTML markup and I am kind of embarrassed by it..

    Of course after cleaning those two areas I wanted to run a menu built with the css menu builder through the W3C validation.

    The CSS was getting parse errors because of styles with missing property's from fields a users has not filled out yet.
    After tweaking a few things the CSS Menu Builder is now producing W3C standard XHTML1.0 markup and CSS level 2.1.

    Result is a few more bugs in IE that need to be ironed out, besides that I feel this tool is back on the track to having a bright future.

    ps: blink gone

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by ubh View Post
    Thanks oesxyl!

    ps: blink gone
    you are welcome and thank you for blink,
    there are few things that don't work well but I'm not sure what is the source, I susspect is javascript.
    - your message overlap the second input field in form:
    I hope this helps someone out as much as it has helped my out. So enjoy!!

    Devin R. Olsen
    - is a problem with hover if you move the mouse over the generated item.
    - css code for the generated menu have some validation problem.

    best regards

  • Users who have thanked oesxyl for this post:

    ubh (12-02-2008)

  • #7
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    oesxyl I have been working on a few more bugs, I might have been working on the menu builder while you tested it.

    Are these problems still occurring on your end? If so what is the the browser you are using and what is the CSS you are trying to validate?

    Let me know cause I want to clear up these issues before I release Menu Builder 1.2 that's going to have color picker support and hopefully image support, more hover capability's and sub menu features.

    Thanks m8!

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by ubh View Post
    oesxyl I have been working on a few more bugs, I might have been working on the menu builder while you tested it.

    Are these problems still occurring on your end? If so what is the the browser you are using and what is the CSS you are trying to validate?

    Let me know cause I want to clear up these issues before I release Menu Builder 1.2 that's going to have color picker support and hopefully image support, more hover capability's and sub menu features.

    Thanks m8!
    this is the html I used:
    Code:
    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="test.css"/>
      </head>
      <body>
        <div  id="newMenu">
          <ul>
    	<li  >
    	  <a href="#i1" >
    	  item1</a>
    	</li>
          </ul>
        </div>
      </body>
    
    </html>
    this is the generated css:
    Code:
    #newMenu{width:50%; height:3.0em; background-color:#00f; }
    #newMenu ul{display:block; margin:0px; position:relative; height:100%; min-height:100%; padding-right:0px; padding-top:0px; padding-bottom:0px;padding-left:0.5em; }
    #newMenu ul li{display:inline; float:left; position:relative; min-height:100%; height:100%;border-right:#ddd thin solid; }
    #newMenu ul li a{display:block; text-align:center;font-family:Georgia, "Times New Roman", Times, serif; color:#f00; text-decoration:none; font-size:12pt; width:10.0em; height:100%; margin-left:0.5em; margin-right:0.5em; line-height:5px; background-color:#fff; border-left:; border-right:; border-top:; border-bottom:; }
    #newMenu ul li a:hover{font-family:Arial, Helvetica, sans-serif; color:#000; text-decoration:none; font-size:; background-color:; }
    
    
    #newMenu ul ul{display:none; margin:0px; padding:0px; position:absolute;background-color:; width:150px; left:0.5em; }
    #newMenu ul ul li{list-style:none; display:block; float:left; width:100%; border-left:none; border-right:none;padding-left:15px; background-color:; }
    #newMenu ul li:hover ul{display:block;}
    #newMenu li li:hover a{background-color:transparent; }
    #newMenu li li a{display:block; text-align:left; width:100%; float:left; border:none;background-color:; margin:0px; }
    #newMenu li li a:hover, #newMenu li li:hover{background-color:; }
    this was before 11-30-2008 10:21 AM, when I post previous replay, probably is not relevant but maybe could help you.

    browser is Firefox 2.0.0.18, modified for debian( AFAIK no render difference or javascript behavior):
    Code:
    Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.18) Gecko/20081030 Iceweasel/2.0.0.18 (Debian-2.0.0.18-0etch1)
    Now if I disable javascript, the input for the first part of the form work normal, first 3 input, then I can't continue of course. Probably is something wrong in javascript.

    regards

  • Users who have thanked oesxyl for this post:

    ubh (12-02-2008)

  • #9
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    I see.

    Yes the CSS now runs through a scrubbing process removing all un-used styles to prevent parse errors in validating. In addition I think I might have cleared up a few more bugs. Here is a complete list of the fixes.

    • Link and Sub Link Delete Problems.
    • IE Sub Link pop out issue.
    • XHTML 1.0 Strict and CSS2.2 Validation.
    • Sub Menu Hover Problems.
    • JavaScript Notice for the 5% out there who have it turned off.
    • Sub Menu Link Void for development fix.


    Menu Dividers is still not active for IE users so I am still trying to work the bugs out of this before adding more features.
    I decided to add the color picker for all the color related variables before calling it 1.2.

  • #10
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    The notice flicks in and out of existance when I load the page (IE8b2).

    The little tabs should stay till I click onto another one, as it's majorly irritating if I accidently do it. Not fun.

    Also, the massive Firefox 3 sign is of questionable taste. You're appealing to web designers, most of which use Firefox anyway. Those who use IE probably do so out of choice, which may grind their nerves a little (like mine, for example.) It's pretty redundant.

  • Users who have thanked Apostropartheid for this post:

    ubh (12-02-2008)

  • #11
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    Menu Builder v1.2 updates

    Awesome thanks CyanLight!! I really appreciate all this beta and suggestions guys its really help full!

    I think I have fixed up everything you were talking about.

    • The tool tabs now are static when you click on them and much easier to work with until told other wise.
    • JavaScript notice has been fixed and only is visible with browsers who have JavaScript turned off.
    • JavaScript notice still retains the Firefox recommendation but is removed from the menu builders page.


    v1.3 will have the following support and is going to be released soon so I know I will need some more beta testing once its released.

    • Cursor Type Support
    • Hover Border Support
    • Sub Menu Link Height
    • Sub Menu Vertical / Horizontal Positioning
    • Sub Menu Link Divider Support
    • Image Support


    I need some advice though with the last one (Image support).

    Obviously I don't want to allow everyone in the world to upload images to my web server via the menu builder. So I am thinking about making v1.3 be user registration based while leaving the 1.2 available for demo purposes.

    What do you think the percentage of people who will be turned off by a registration process is going to be?

  • #12
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    When I open a tab in the menu builder, I have to double click to get it to close? It made me think it didn't work since normally links require one click.

    My opinion on the registration is that if you aren't saving user data then don't use registration. If you want image support, allow uploads but delete them after creation. There have to be multiple methods of doing this, maybe like having a cron job delete every # hours, or associating each image with a session and then deleting after session is over, etc.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • Users who have thanked gnomeontherun for this post:

    ubh (12-02-2008)

  • #13
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Hi jeremywilken,
    Close button is now fixed.

    My approach on the user registration for image support is in deed one of storing information and being able to retrieve previous menus you have built under your account.

    Maybe that is the feature that would make the whole registration process not so pain full or the version 1.3 more desirable??

  • #14
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Well you could still offer the service without an account, and then have things reset for non registered users. But registration would come with perks, so some people might do it. Honestly I can't predict since my crystal ball was due to unforeseen events, but how much of a need do you think there is to have saved menus? If I were using it, I think I wouldn't care about the last menu I made, because that project is probably over and I have a copy of the code already saved somewhere. I suppose there might be a few people, but I don't see a large demand for it. I think you'd be better off putting your resources into the tool itself rather than a user system. Thats just my thoughts though!
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • Users who have thanked gnomeontherun for this post:

    ubh (12-02-2008)

  • #15
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Good point, the gen code button is there for a reason. What the user douse with the code after that point is up to them. Looks like I will go with the session based route for the image support. Guess from here on out the tools direction is clear and that's to finish adding these last few features and fix the last few bugs.

    Oh and I think in version 1.3 the tool will be moved to its own page... lol have you seen the loading times in v1.2 due to all the site elements that are not relevant to the tool its self.

    If there are features you think I might have missed or lacking I would like to hear them and I will try to incorporate them into the tool.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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