Creating a Top Menu with Sub-Menus

[DoubleDee]

I am creating a complex website with numerous content areas - some related, others not - and looking for a way to tie everything together in a simple design.

It seems like following the design of online newspapers might be a good way to go, however one big concern I have is supportability.

I fear that if I use some fancy design that relies entirely on JavaScript, then if someone has that turned off in their browser, my website comes to a crashing halt?!

Is it possible to build a simple Top Menu with related Sub-Menus like the Chicago Tribune uses?

Or is it possible to have Drop-Down Sub-Menus coming from the Top Menu, sorta like USA Today does, but only a single column and not box?

I am hoping I can at least achieve something like the Chicago Tribune using pure HTML and CSS?!

Can anyone help me out?

Thanks,


Debbie

[ralph.m]

Yes, that's quite possible with CSS alone.

Paul O'Brien has some examples of this, such as:

http://www.pmob.co.uk/temp/dropdown-hoz-safe4.htm

[DoubleDee]

Yes, that's quite possible with CSS alone.

Paul O'Brien has some examples of this, such as:

http://www.pmob.co.uk/temp/dropdown-hoz-safe4.htm

Is that how the Chicago Tribune does it?

(BTW, what are the chances someone has JavaScript turned off in the first place or has a browser that doesn't work with Javascript?)


Debbie

[Stevie D]

(BTW, what are the chances someone has JavaScript turned off in the first place or has a browser that doesn't work with Javascript?)

Higher than you might think, when you take into account (i) paranoid but clueless corporate sysadmins, (ii) assistive technology, and (iii) mobile devices.

[ralph.m]

(BTW, what are the chances someone has JavaScript turned off in the first place or has a browser that doesn't work with Javascript?)

Paul's example demonstrates how to do it without JS. There are lots of ways to do this, though. The tribune site works pretty well with JS off (the drop isn't there initially, but appears on hover, and the tabs aren't highlighted), but still, you don't need it at all for this.

[DoubleDee]

Paul's example demonstrates how to do it without JS. There are lots of ways to do this, though. The tribune site works pretty well with JS off (the drop isn't there initially, but appears on hover, and the tabs aren't highlighted), but still, you don't need it at all for this.

How do they get the rounded corners on the tabs?

And how do they get that light blue that almost looks 3-D glass effect?



Debbie

[dresden_phoenix]

my own personal page does what you are saying, albeit I dont have as many sub categories and I center my menu items rather than placing them to the left ( which would have been easier)...

what you need is to nest the list keep the relative position to the main UL.

[PicnicTutorials]

Hi DoubleDee,

Here is one I made. http://www.visibilityinherit.com/code/drop-line.php

There also a bunch of nice links in there showing others. A while back another designer paid me to figure out how to make a "#current" tab on both levels. I thought it would be easy. It was not and took a lot of thinking. From memory I had to use some classes and it got very complicated. I probably should have saved it because Im never doing it again. I dont like to think that hard.

[DoubleDee]

my own personal page does what you are saying, albeit I dont have as many sub categories and I center my menu items rather than placing them to the left ( which would have been easier)...

what you need is to nest the list keep the relative position to the main UL.

Okay, but can you (or anyone) answer my questions above?

I would like to get a top menu that looks just like the Chicago Tribune's except maybe a slightly different color.

I'd like to know how they do it (e.g. use shapes).

Thanks,


Debbie

[samanime]

They do it with a background image: http://www.chicagotribune.com/images/nav_tab.gif

You can do it with some CSS3 properties which will work in most modern browsers. If the site is viewed with a browser that doesn't support those properties, it'll just ignore them and show square corners.

[DoubleDee]

They do it with a background image: http://www.chicagotribune.com/images/nav_tab.gif

You can do it with some CSS3 properties which will work in most modern browsers. If the site is viewed with a browser that doesn't support those properties, it'll just ignore them and show square corners.

Isn't a bad idea to use images for tabs?

Why does that image look all weird like an "L"

I am on a MacBook. Is there a *free* way to make images like that or at least simple rounded-corner ends?

Maybe a website that does it for you?

Or something like Gimp?

My goal is to make a top menu just like the Chicago Tribune this weekend, but it looks like I have a long ways to go - especially due to the images?

Can you help me out any?


Debbie

[samanime]

Something like Gimp should do the trick.

However, like I said, you could also use CSS3 to do it: http://www.css3.info/preview/rounded-border/

It's supported by most modern browsers. If they don't use a modern enough browser, they'll just stay square. That's something for you to decide if you're okay with. The image-based technique will work in just about anything.

However, the images/border-radius is only for rounding the corners. It has nothing to do with the actual tabbing. That portion is pretty simple.

You can create an unordered list, in which each list item has another unordered list (sub-menu).

<ul>
  <li>Top 1
    <ul>
       <li>Sub 1</li>
       <li>Sub 2</li>
       <li>Sub 3</li>
    </ul>
  </li>
  <!-- more items in the same fashion -->
</ul>

Then you add CSS to hide and show things as appropriate.

Unfortunately I don't have time right now to come up with the CSS, so hopefully someone else can step in and fill in that part.

[noonnope]

If your goal is to make one like the one on Chicago Tribune, you may thing again

It's broken, for one, it relies on JS to show the current main topic, for two, and it doesn't show the current subtopic.

As for graphics, you can start easy with Paint .Net.

The reason it looks weird to you it's because they use the same image for a number of elements (a sprite, an image containing several other images in it) to achieve a sliding doors technique with it, by using negative background positioning. And no, it's not a bad idea using images for tabs.

HTML
------
<a name="&amp;lpos=Main&amp;lid=Business" class="mainNav" href="/business/#&amp;lid=Business&amp;lpos=Main"><span>Business</span></a>

CSS
-----
ul#root li.highlight a {
    background: url("/images/nav_tab.gif") no-repeat scroll left 0 transparent;
    padding-right: 7px;
}

ul#root li.highlight a.mainNav span {
    background: url("/images/nav_tab.gif") no-repeat scroll right -12px transparent;
    color: #FFFFFF;
}

I don't know if you have stumbled upon a topic regarding Firebug, or any other Developer Tools browsers have, but learning to use one will make it easier to see, understand and replicate things you like in web dev.

[DoubleDee]

Something like Gimp should do the trick.

However, like I said, you could also use CSS3 to do it:

I'll pass on CSS3 for compatability reasons.


Debbie

[DoubleDee]

If your goal is to make one like the one on Chicago Tribune, you may thing again

It's broken, for one, it relies on JS to show the current main topic, for two, and it doesn't show the current subtopic.

So what is the alternative?

What is the difference between what Ralph recommended here at what the Chicago Tribune does?

As for graphics, you can start easy with Paint .Net.

I'm on a Mac.

The reason it looks weird to you it's because they use the same image for a number of elements (a sprite, an image containing several other images in it) to achieve a sliding doors technique with it, by using negative background positioning. And no, it's not a bad idea using images for tabs.

Can I just use a slice with a rounded corner instead?

I don't like those sprite thingies!

I don't know if you have stumbled upon a topic regarding Firebug, or any other Developer Tools browsers have, but learning to use one will make it easier to see, understand and replicate things you like in web dev.

I tried it but was causing crashes and stuff so I deleted it.


Debbie

[noonnope]

For once, the current main menu option is highlighted by CSS, so it will be clear (even w/o JS) where you are.

Apart from that, there is the issue of submenus being displayed correctly under the corresponding main entry, not just flushed left, that both lack.

On Mac... Can't help you there, never been there my self

You asked what is for, but you can do w/o sprites, though they have their reason. You'll find that reason when you're ready

You really should try a dev tool. If it crashes, it may be from other reasons. Fix those and try again.

[DoubleDee]

Yes, that's quite possible with CSS alone.

Paul O'Brien has some examples of this, such as:

http://www.pmob.co.uk/temp/dropdown-hoz-safe4.htm

Sorry, Ralph, but I'm getting lost here with everyone's comments and links which don't seem to address my original question...

I don't know what the Chicago Tribune stle top menu is called, but I wouldn't call it a "drop-down" which is exactly what the link on Paul O'B's page talks about.

Isn't a simple tutorial out there to do what I want to do using entirely CSS?

I'd like to get the "effect" but without being dependent on JavaScript.


Debbie

P.S. What is the name of the type of Menu/Sub-Menu that I want to create?!

[ralph.m]

I don't see the difference between the functionality of Paul's example and the Chicago one, apart from the CSS styling. You could take Paul's code, alter the appearance via CSS, and have the exact same menu, with no dependence on JS, as Paul's doesn't require it (except maybe for IE6).

[PicnicTutorials]

It's called a drop-line. The only tutorials you will find are all in the link I provided. Stu's, Paul's, and mine. You could buy the one from Project Seven's site (also link provided in mine) but it is js.

Pick one to emulate and try your best to put it together. When you get stuck post back with the link and/or code of your current menu and we will help you piece it together.

[DoubleDee]

I don't see the difference between the functionality of Paul's example and the Chicago one, apart from the CSS styling. You could take Paul's code, alter the appearance via CSS, and have the exact same menu, with no dependence on JS, as Paul's doesn't require it (except maybe for IE6).

But, Ralph, the example on Paul's demo goes here and that deals entirely with Drop-Down Menus.

Where is an explanation and code examples for the "Horizontal Main Men with Horizontal Sub-Menus" like Pauls was demoing???


Debbie

[DoubleDee]

It's called a drop-line. The only tutorials you will find are all in the link I provided. Stu's, Paul's, and mine. You could buy the one from Project Seven's site (also link provided in mine) but it is js.

Eric, I saw the example you did, but it didn't look anything like what I want, so I sorta skipped over it. (You example has boxes around each sub-menu item and doesn't have the unified sub-menu "drop-line" that I want.)

If it is just in how things are styled, then I will read your article, but I was under the impression it was different from what I want.



Debbie

[Rayzur]

Where is an explanation and code examples for the "Horizontal Main Men with Horizontal Sub-Menus" like Pauls was demoing???

Hi Debbie,
As Eric just pointed out, it is called a dropline rather than a dropdown.

The sub-menu is absolute positioned just like any other suckerfish menu, the difference with a dropline is that the sub-list gets the same width as the main UL. A dropdown has it's width confined so the list items stack upon each other.

EDIT: Another important point is that the main UL gets the position:relative; rather than each main LI. That way the parent UL becomes the contaiing block for AP sub-list, that allows the full width sublist to position to the far left of the main UL.

Generally speaking the space for the sub-list is preserved by either a bottom border on the main UL or a parent div. That is optional though and you can have it just drop into view without a landing pad.

I have some dropline examples too, but I don't write tutorials. It's just a view page source system with me.

[PicnicTutorials]

Opps sorry. ...and Ray's.

[DoubleDee]

sorry. ...and Ray.

Huh?


Debbie

[PicnicTutorials]

Yes DoubleDee it's just styled that way. But you mine as well use one that more closely matches what you want - like Paul's or Stu's. It's not a easy menu to make though. So expect some heart ache.