Simple pull-out menu Options

[scoobysnack]

Hi everyone, this is my first post here, and I predictably need help.

I was just thrown into a Web Design position for an educational non-profit organization, and I designed a complete website for it using a program called Dreamweaver, assuming I would be able to create a pull-out menu for it at the end. Well, now the website is completely done except for the menu, and I have been trying unsuccessfully for weeks trying to make one on my own. I found dozens of tutorials, and for the life of me, I could not seem to follow them.

Recently, I have been creating images of JPG menus and then using Fireworks to make hotspots for sub-menus, but the PNGs triggered errors in Internet Explorer (ActiveX), and while the menu DOES show up after enabling the ActiveX, it's just not user-friendly at all, so I need another option. I am 99% sure that what I need is a DHTML menu, however, I only know a little HTML, and as I said earlier, I cannot seem to follow tutorials that I have found.

I even have tried downloading programs that claimed to be "pull-out menu code generators" -- they were great, until I learned that I would have to pay for the "full version" -- not possible with this non-profit's limited budget.

So -- what I need from YOU, please -- is for you to advise me on the easiest way for someone like me to get the end result of a pull-out menu, complete with sub-menus. Is there an open-source software that I can use to do the dirty work for me, that I am somehow not finding with my Google searches? Is there a template that I can "fill in the blanks" with?

I will have much gratitude for any tidbits of advice you can give me at all, HTML masters. Thank you so much.

[pandy]

There are lots of ready made menus. Here's a popular one with minimal dependency on JavaScript.
http://www.htmldog.com/articles/suckerfish/dropdowns/

[scoobysnack]

There are lots of ready made menus. Here's a popular one with minimal dependency on JavaScript.
http://www.htmldog.com/articles/suckerfish/dropdowns/

I've actually spent a lot of time looking at that page. It would be considered a tutorial, correct? I couldn't figure out how to edit the code and carry out the steps the author was explaining. Is that really considered ready made?

[Christian J]

I've actually spent a lot of time looking at that page. It would be considered a tutorial, correct?

To understand the explanations it's assumed the reader knows about HTML, CSS and javascript. But if you just want to use it without learning exactly how it works you should be able to copy the full code examples (see links to demos at the bottom) and replace the links in the nested HTML lists with your own.

[Brian Chandler]

There are lots of ready made menus. Here's a popular one with minimal dependency on JavaScript.
http://www.htmldog.com/articles/suckerfish/dropdowns/

Is this supposed to be good? It says "The Best Practice Guide To XHTML and CSS" (which should sound a warning, since the obvious Best Practice for XTHML is not to use it), but the menus start with stuff like

<li><a href="#">Remoras</a></li>

meaning no navigation without Javascript. Never mind the end usability of pull-down menus (which are great for applications with which the user can be asssumed to be familiar, but pull websites down to the Mystery Meat level), I can't see much to recommend it.

And is it supposed to be easy to understand/implement for a nonexpert? I hardly think so, being full of the arcane jargon that necessarily accompanies the hack-kludgery needed to get CSS 'working'. It really is not "ready made", since there are no instructions on where all the bits need to go.

[Brian Chandler]

Well, now the website is completely done except for the menu

Hmm. Let's try to be positive. What do you actually have? A number of pages? And are there no links anywhere connecting these pages?

How many pages? Where is the "menu" going to go? Do you just intend to have one page which is esssentially a list of links to all the other pages? Or is this "menu" supposed to be added to the top[?] of every page? Unless you have more than 20 pages, I would recommend avoiding any 'pull-down' or otherwise obscured links. For maintenance purposes you need to learn one way or another of including a standard navigation element on every page (a question which gets asked here about every 36 hours).

HTH

[scoobysnack]

Well, now the website is completely done except for the menu

Hmm. Let's try to be positive. What do you actually have? A number of pages? And are there no links anywhere connecting these pages?

How many pages? Where is the "menu" going to go? Do you just intend to have one page which is esssentially a list of links to all the other pages? Or is this "menu" supposed to be added to the top[?] of every page? Unless you have more than 20 pages, I would recommend avoiding any 'pull-down' or otherwise obscured links. For maintenance purposes you need to learn one way or another of including a standard navigation element on every page (a question which gets asked here about every 36 hours).

HTH

Well, I hope this isn't too much detail but, I wanted the menu to be something like this:

Home
Join!
Calendar
Publications (submenu with Newsletters, Press Releases, Flyers)
Resources (submenu with Scholarships, Internships, Jobs, Links)
Blog
Leadership (submenu with Officers, Committees)
T-shirt
History
Supporters

(The current version of the website is at ***, to give you somewhat of an idea. Someone else designed it. I have designed something much different, but have not uploaded it to the Internet yet. I wish I could, but we have very limited space on the server, and both would not fit at the same time.)

I want it to go on the left hand side near the top. I will put it on the template, so it will show up on all pages. Is "menu" the wrong term to be using here? With the pages with our publications and such, the entire site will consist of around 30 pages. So pull-down menus are considered to be obscured? There are links connecting the pages, for example, there are links to all the internships on the Internships main page. But as for the "menu" items being linked to each other, not so much. They are very separate areas that don't have a whole lot to do with each other.

By saying "lets try to be positive," you're not implying that there's not much to be positive about, are you?

This post has been edited by Christian J: Dec 29 2012, 07:56 AM

[Christian J]

the menus start with stuff like

<li><a href="#">Remoras</a></li>

meaning no navigation without Javascript.

You're expected to replace the "#" with your own URLs (except for the top level, where I don't think you need links at all except for styling, so if you replace the pseudo-links there with say a <span> you must add a span selector in the style sheet as well).

The links are meant to work without javascript in modern browsers (including IE7?), but alas in IE6 you need either both JS and CSS or none, which is a pity since it wouldn't have been that hard to make the menu stay open in IE if JS is disabled.

Never mind the end usability of pull-down menus (which are great for applications with which the user can be asssumed to be familiar, but pull websites down to the Mystery Meat level)

That's true. Unless the nature of the hidden content is obvious even for a first-time user, these menus are best avoided.

It really is not "ready made", since there are no instructions on where all the bits need to go.

What bits? All you need to do is replace the # with your own URLs + link texts: http://www.htmldog.com/articles/suckerfish...ple/bones1.html

[Christian J]

Well, I hope this isn't too much detail

Not at all.

I wanted the menu to be something like this:

In this case I don't think it's a good idea to hide the sub menus, 1) because the sub menus are not that long, so there's no real need to hide them in order to save space (except with a horizontal menu layout); 2) because the main labels "Publications", "Resources" and "Leadership" may not explain their sub menu content well enough for inexperienced readers. E.g. if I'm a newcomer looking for scholarships I'll not know if there is such a site section at all, and if so that it's located in the Resources sub menu.

(The current version of the website is at ***, to give you somewhat of an idea.

That version seems to be organized completely different, e.g. the Resources link goes to a page containing many more sub categories than the four listed above (Scholarships, Internships, Jobs, Links).

I want it to go on the left hand side near the top. I will put it on the template, so it will show up on all pages.

In that case you'll have plenty of vertical space, so why not let all menu items stay visible? The visual layout might look something like this:

CODE

Home
Join!
Calendar
Publications
      submenu
      Newsletters
      Press Releases
      Flyers
Resources
     Scholarships
     Internships
     Jobs
     Links
Blog
Leadership
     Officers
    Committees
T-shirt
History
Supporters

Is "menu" the wrong term to be using here?

No it's fine.

This post has been edited by Christian J: Dec 29 2012, 07:56 AM

[scoobysnack]

Thank you SO much for looking at this and all your help. In your example you use the word submenu... I'm not sure I understand how your example is different from what I had wanted. Are you saying that there is a way to use submenus that is still visible?

It's true that they're not very long, but with all those extra links that are so similar to each other, I feel like it really clogs up that navigation bar area.

Well, I hope this isn't too much detail

Not at all.

I wanted the menu to be something like this:

In this case I don't think it's a good idea to hide the sub menus, 1) because the sub menus are not that long, so there's no real need to hide them in order to save space (except with a horizontal menu layout); 2) because the main labels "Publications", "Resources" and "Leadership" may not explain their sub menu content well enough for inexperienced readers. E.g. if I'm a newcomer looking for scholarships I'll not know if there is such a site section at all, and if so that it's located in the Resources sub menu.

(The current version of the website is at ***, to give you somewhat of an idea.

That version seems to be organized completely different, e.g. the Resources link goes to a page containing many more sub categories than the four listed above (Scholarships, Internships, Jobs, Links).

I want it to go on the left hand side near the top. I will put it on the template, so it will show up on all pages.

In that case you'll have plenty of vertical space, so why not let all menu items stay visible? The visual layout might look something like this:

CODE

Home
Join!
Calendar
Publications
      submenu
      Newsletters
      Press Releases
      Flyers
Resources
     Scholarships
     Internships
     Jobs
     Links
Blog
Leadership
     Officers
    Committees
T-shirt
History
Supporters

Is "menu" the wrong term to be using here?

No it's fine.

This post has been edited by Christian J: Dec 29 2012, 07:56 AM

[Christian J]

In your example you use the word submenu... I'm not sure I understand how your example is different from what I had wanted. Are you saying that there is a way to use submenus that is still visible?

Maybe "sub menu" was a poor term, "sub category" might be better.

It's true that they're not very long, but with all those extra links that are so similar to each other, I feel like it really clogs up that navigation bar area.

That's why you might use some left margin on the sub category links, at least if the labels ("Publications", "Resources" and "Leadership") are links themselves, otherwise you might omit the labels.

Organizing site content is a difficult thing, worth spending time on.