CSS Menu Designer vs. DHTML Menu...

User 2034657 Photo


Registered User
64 posts

Hi all,

I am new to developing websites, and I know enough to be dangerous, but I do have an impression that may be unfounded. I would like somebody else's opinion. I have used the DHTML Menu Designer, and I am now exploring the CSS Menu Designer. My initial presumption was that the CSS designer would be a major improvement over the DHTML designer because CC discontinued the DHTML designer, and decided to include the CSS designer with the Editor. Now that I have used both tools, I have concluded that the DHTML designer is much easier to use. Here are at least three examples of how, in my opinion, the DHTML designer outperforms the CSS designer:
    1. It was extremely easy to center an horizontal menu with the DHTML designer, while after 3 days, I still have not come to a satisfactory solution using the CSS designer.
    2. It was extremely easy to have different widths of the root menu items and submenu items using the DHTML designer; however, I have not yet been able to accomplish this using the CSS designer.
    3. The DHTML designer had distinctive arrows that appeared in the root menu item boxes that indicated there were submenu items.

I have discovered these differences after three days. I was able to achieve the results I wanted in a matter of minutes using the DHTML designer, but after three days, I have not been able to do the same with the CSS designer. The CSS designer does not appear to have an option for centering an horizontal menu. It also does not appear to have an option for different widths of root and submenu items. I don't see any way of indicating visually that a menu item has a submenu.

I am sure that the three issues mentioned above can be solved with CSS but how? Am I missing something simple and obvious? I'm thinking of going back to the DHTML designer for the reasons mentioned above, but being a neophyte, I don't want to make a poor decision for the wrong reasons.

I welcome your opinions regarding the merits of CSS vs. DHTML.

Thanks, in advance, for your consel and advice,
John H.
________________________________
A good mind is like a sponge in water.
User 38401 Photo


Senior Advisor
10,951 posts

Hiya John,

Very astute findings for sure. The major 2 differences between the 2 systems are visual vs. code and SEO friendly vs. not.

To explain that more. The CC's DHTML Menu Maker is graphically based. It's ok, it has a lot of potential in my mind, but not real complete as far as features. Although that is true, it's doable and not a bad setup for the most part. The main thing about this menu is it's pretty much a visual based menu setup. Most everything is done visually and spits out code that is pretty much not editable unless you know java (which I don't lol). All in all it will do the job. But....

The DHTML Menu is not Search Engine Friendly. This is because it's java based rather than HTML/CSS based and for some reasons, which I don't pretend to understand myself, they don't like that and can't find the links on the menu as they would in a CSS menu. This can be a major drawback, but.. sitemaps do come into play here to help out so it's not a super major drawback, just a choice.

The CSS menu on the other hand is not a visual setup. It most definitely is editable in every way the same as the DHTML menu is and even much more. The major difference is you have to find the code areas and know what to change to do it. I too have been working on trying to match my current business site's menu and getting there, have a few more things to figure out on it yet.

The main parts of this is to find where the buttons are actually setup because they aren't graphical they are color fill ins not images so it's not as easy to find in the CSS. Once you find the section in the CSS that goes with the button or part of your menu you are trying to change you edit the CSS for it. You can make that color fillin into a button image or whatever you like once you track down all the parts and pieces. The key here is to understand the code language for the parts and know which part goes with which section of the menu, and that's not always easy to do.

Although the CSS menu is highly editable, very very SEO friendly, and can do a wonderful job for sites, it is NOT user friendly to a new CSS user or even one like myself that isn't brand new but not super seasoned either. (not just meaning the CC CSS menu maker, but CSS menus in general). It would be best for you to learn the CSS code structures a bit more or just play with the menu settings in the CSS and see how things are affected.

What I do to try to learn the CSS stuff other than reading things too which I try to do that as much as I can, is I play with a setting, see if it changes something and if it does I add a comment after that setting to say what changing it does. This way I can always see what is where and I don't have to try to "remember" lol as if!

Play with it, read on it, it will eventually work for you, and me too hehe. In the meantime there is absolutely nothing wrong with using the DHTML menu maker or any other java based menu maker (which I use a lot myself). Whatever way you want to go, just be sure to have a good sitemap going if you choose the DHTML menu so your links are all accounted for on search engines. :)
User 562592 Photo


Registered User
2,038 posts

One of the great features of the html editor is that it gives you the centering options. You do not have to use CSS to center your code. You can use html.

Before your menu put this:

<div align="center">

at the end of your menu add a closing division tag:

</div>

This will center your menu relative to the container that it is in, not the window size (unless of course the container is the same size as the window).

Hope this made sense. Let us know if it worked.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com

User 2034657 Photo


Registered User
64 posts

Hi Eric,

Jo Ann has convinced me to continue using CSS. I will just have to jump in and lear a lot more to make better use of the technique.

I have tried the <div align="center"> but I woould like the menu to be centered in the window. I need to do more research to learn about what would be a suitable container (e.g. div, span, or table or ???), and how to set the width of the container and the page.

Thanks, Eric, for your good suggestions.
John H.
________________________________
A good mind is like a sponge in water.
User 562592 Photo


Registered User
2,038 posts

Let me help you narrow it down. I would not use a table for your site, unless your actually going to place data in it. And I would use a div over a span for a menu. Here is a sample skeleton of a css:

#container (used for the whole window)
Then within the container you have:
#header
#left
.nav (these are called classes)
#middle
.content
#right (if you want a three column layout)
.news (or whatever)
#footer

Hope this gives you some guidance.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com

User 92156 Photo


Registered User
272 posts

John wrote:
    3. The DHTML designer had distinctive arrows that appeared in the root menu item boxes that indicated there were submenu items.

It was this that made me hesitate to change over to CSS Menu from another product at first.

I wanted a bulleted vertical list of links and adding my own graphic bullet to the left of each link using <img> tags was easy, but adding graphic arrows to the right using <img align="right" etc> didn't work as well - the arrows placed themselves on a new line instead of alongside the link item - but that would be my hamfisted editing.

Once I realised how CSS Menu worked I decided to stick with it as I like the ability to directly edit the links inside CC Editor without going through the whole process of rebuilding an include javascript file like I was doing with the other program ("fiddle under the hood" vs. "black box").

I keep my menu code in a separate temporary file and play with it there, then copy & paste changes to the actual working file.
This way I can make changes to the link names and href's without disturbing the *.js side of things.
CSS Menu is perfect for a hands-on fiddler like myself, I just wish i was more competent.
User 364143 Photo


Guest
5,410 posts

The biggesst difference for me is that the CSS menu is 100% sure to display on all browsers no matter what. DHTML menus require javascript to be enabled in the browser. If you are using DHTML or Flash menus, always use a secondary menu option. For instance, whenever I use a Flash header with a menu incorporated, I always used SWFObject to display a mapped static image of the same thing if flash was either turned off or not installed. You coulld also just use a footer menu or site map but not quite as good as the other in the way of presentation.
CoffeeCup... Yeah, they are the best!
User 562592 Photo


Registered User
2,038 posts

I do the same thing as Tom.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com

User 92156 Photo


Registered User
272 posts

@John, re arrows to indicate existence of submenu items:
I've given up trying to use an arrow shaped graphic in CSS Menu Designer, but I've considered using the right angle quote
&#187;
or
&raquo;
like this...
menu item name &nbsp;&nbsp;&raquo;


It's not as elegant as an actual arrow and I in my case I would prefer the character to be justified to the right, but it follows the convention used with crumb-trail page navigation.
User 562592 Photo


Registered User
2,038 posts

Very creative zipper.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.