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?! :-/
Higher than you might think, when you take into account (i) paranoid but clueless corporate sysadmins, (ii) assistive technology, and (iii) mobile devices.
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.
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.
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.
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.
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.
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="&lpos=Main&lid=Business" class="mainNav" href="/business/#&lid=Business&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.
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.
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?! :-/
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).
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.
