...

View Full Version : CSS Menu Builder Tool



ubh
11-28-2008, 01:41 PM
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/menu_builder/index.html

millsi80
11-29-2008, 03:29 AM
Good stuff, very thorough and easy to use!

ubh
11-30-2008, 04:09 AM
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 (http://www.devinrolsen.com/tools/menu_builder/index.html)

oesxyl
11-30-2008, 04:20 AM
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/menu_builder/index.html

invalid markup, html:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.devinrolsen.com%2Ftools%2Fmenu_builder%2Findex.html

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

http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.devinrolsen.com%2Ftools%2Fmenu_builder%2Findex.html

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

regards

ubh
11-30-2008, 08:20 AM
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 ;)

oesxyl
11-30-2008, 09:21 AM
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

ubh
11-30-2008, 10:22 AM
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!

oesxyl
11-30-2008, 07:21 PM
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:


<?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:


#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):


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

ubh
12-01-2008, 02:46 AM
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.

Apostropartheid
12-01-2008, 05:46 PM
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.

ubh
12-02-2008, 09:31 AM
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?

gnomeontherun
12-02-2008, 09:47 AM
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.

ubh
12-02-2008, 09:58 AM
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??

gnomeontherun
12-02-2008, 10:04 AM
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!

ubh
12-02-2008, 10:16 AM
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.

gnomeontherun
12-02-2008, 10:43 AM
Ideas:

Any thought about transparency?
What about other CSS font features: line-height, letter spacing, etc?
What about having a first step: select your units. So people can have everything based off pixels, em, whatever.
What about sub-submenus? Any way to expand that? I think sometimes those can be appropriate.
Super cool feature would be the ability to create basic graphics, like gradients. This would most likely be a v2.0 feature.

Just some ideas!

ubh
12-02-2008, 11:14 AM
Awesome input jeremywilken,

[Q]Any thought about transparency?
[A]Good point. CSS3 opacity will be added to the roster now after a sucessful test of this CSS3 filter all the way down to IE6.

[Q]What about other CSS font features: line-height, letter spacing, etc?
[A]line height is already supported MENU / Link Vertical Spacing maybe I should name it appropriately. Letter spacing and possibly a few other font options I may left out will be now included in the next version.

[Q]What about having a first step: select your units. So people can have everything based off pixels, em, whatever.
[A]Unit setup is a must and will be incorprated in verison 1.3

[Q]What about sub-submenus? Any way to expand that? I think sometimes
those can be appropriate.
[A] Infant sub menus is on the back burner until all bugs and immediate features have been worked out, but yes this is the ultimate goal.

[Q]Super cool feature would be the ability to create basic graphics, like gradients. This would most likely be a v2.0 feature.
[A]Indeed until more browsers that carry a large portion of internet users are updated with proper CSS3, then things such as gradients and basic graphics (rounded corners) will not be supported in the near future. I have been however looking at JavaScript Vector based objects for rounded corners and maybe gradients but this seems to be a dead end cause the user would have a menu that would rely on JavaScript and LOTS of market up to support the vector objects.

Overall Great Idea m8!!

gnomeontherun
12-02-2008, 11:17 AM
[Q]Super cool feature would be the ability to create basic graphics, like gradients. This would most likely be a v2.0 feature.
[A]Indeed until more browsers that carry a large portion of internet users are updated with proper CSS3 things such as gradients and basic graphics like rounded corners will not be supported in the near future. I have been however looking at JavaScript Vector based objects for rounded corners and maybe gradients but this seems to be a dead end cause the user would have a menu that would rely on JavaScript and LOTS of market up to support the vector objects.

You could generate the images via PHP or some other server side system. I don't know much about JS vector objects, but you can most certainly create some images using PHP, even rounded corners I'm sure.

ubh
12-02-2008, 11:25 AM
Hmmm I have never used GD Library - PHP before. I would like to dig my hands into this. To be honest though, if you open this can of worms and you quickly become a image editing tool/creator as well as a menu builder..


AWESOME!!!


project.Mariah is in a whole a project that provides users with only the best and useful tools across all OS and browsers... sooo image editing sound like it right up its ally.

I will certainly be looking into this much further and try to product something via Ajax with the GD Lib.

Thanks again m8.

bini87
05-27-2009, 08:40 AM
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...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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum