|
|
|
Killersites.com Forum » List all forums » » Forum: CSS - Styling your pages with Cascading Style Sheets. » » » Thread: CSS Expanding Menu w/o Javascript? |
|
| Print at Sep 9, 2010 3:32:37 AM | |
| Posted by Susie at Jul 15, 2007 9:47:12 AM |
|
CSS Expanding Menu w/o Javascript? I've been searching for an expanding menu similar to this, but one that uses only CSS (NO Javascript). Surely it exists, doesn't it? Has anyone seen anything around like it? |
| Posted by tpattison at Jul 15, 2007 10:28:33 AM |
|
Re: CSS Expanding Menu w/o Javascript? Not with IE6 around, since it doesn't support :hover, :focus etc on anything by links, and you can't nest links.  So, Javascript it is! I will be accessible to those without JS only if the menus are "shown" by default. ---------------------------------------- Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen |
| Posted by Susie at Jul 15, 2007 10:51:07 AM |
|
Re: CSS Expanding Menu w/o Javascript? I will be accessible to those without JS only if the menus are "shown" by default. Does that mean that the sub menu items would always show and there would be no expanding of the whole menu? I suppose I should just do a fly-out menu, then. Hmmmm.... |
| Posted by LSW at Jul 15, 2007 12:35:49 PM |
|
Re: CSS Expanding Menu w/o Javascript? No, the idea is to create the menus expanded, then hide them with JS so that when JS is not available, it would show expanded. Many drop down menus start hiden and then make the links visible, when JS is not there, the links are hidden and worthless. Try Son of Suckerfish, I cannot find the link right now but a search here should show it. |
| Posted by Susie at Jul 15, 2007 2:29:05 PM |
|
Re: CSS Expanding Menu w/o Javascript? I just studied the Sons of Suckerfish, and I don't think it's what I'm looking for. Or maybe I'm reading it wrong. Here's something I put together this morning as a test: virg iniafre yermuth .com /temp/ test . php I'm trying to find a solution like this because my client wants the portion that's in the fly-out to only show in the Fine Arts section. I, however, want it to be visible/accessible from any part of the website...not just the Fine Arts. And I want the navigation to be consistent on all pages. I see that the test I have is not good because it excludes keyboard navigators. So, what should I do? She doesn't want the items in the fly-out to be in the "main" navigation. What would you guys recommend? |
| Posted by Susie at Jul 15, 2007 9:33:16 PM |
|
Re: CSS Expanding Menu w/o Javascript? This isn't exactly the look I was going for, but what do you think of something like this ? It's called FatFish. |
| Posted by leegao at Jul 16, 2007 9:09:54 AM |
|
Re: CSS Expanding Menu w/o Javascript? I'm not sure about this but can't you overlay another layer on top of the orriginal layer and when you hover on the overlayed layer you just change its height? of course, the problem still is with the IE not able to hover layers... |
| Posted by Susie at Jul 17, 2007 6:40:49 AM |
|
Re: CSS Expanding Menu w/o Javascript? No, the idea is to create the menus expanded, then hide them with JS so that when JS is not available, it would show expanded. How do you do this? *banging my head on the keyboard after hours of searching* |
| Posted by newseed at Jul 17, 2007 8:45:24 AM |
|
Re: CSS Expanding Menu w/o Javascript? No, the idea is to create the menus expanded, then hide them with JS so that when JS is not available, it would show expanded. How do you do this? *banging my head on the keyboard after hours of searching* Susie, just create a simple unordered list before you CSS style it. When you are happy that the root list, sublist, etc. are in the proper order, then you style it and then implement the javascript to do it's stuff. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
| Posted by Susie at Jul 17, 2007 11:06:22 AM |
|
Re: CSS Expanding Menu w/o Javascript? then implement the javascript to do it's stuff. I don't know how to do that. I was wondering...would it make sense to create a definition list for this type of thing? |
| Posted by newseed at Jul 17, 2007 11:47:51 AM |
|
Re: CSS Expanding Menu w/o Javascript? To get a grasp on how to do a list menu, just look at this CSS Play Menu and disable the CSS. According to the article, this should work without javascript however, it also stated that it does not validate. As per LSW, the layout of the menu list is basically the same concept. Lay it out with no CSS styling and then put it all together to make it work as desired. If you are trying to do something like a tree exandable menu, then you will need to use javascript. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
| Posted by Susie at Jul 17, 2007 12:41:49 PM |
|
Re: CSS Expanding Menu w/o Javascript? To get a grasp on how to do a list menu, just look at this CSS Play Menu and disable the CSS. According to the article, this should work without javascript however, it also stated that it does not validate. That's actually the menu I have right now. And I know how to create and style the menu, I just don't have the first clue about adding the javascript afterwards. If you are trying to do something like a tree exandable menu, then you will need to use javascript. I want to create the tree already expanded and then hide the submenu items with javascript. But I don't know how to do anything with javascript. Maybe I'll just do a definition list and call it a day. |
| Posted by newseed at Jul 17, 2007 1:19:08 PM |
|
Re: CSS Expanding Menu w/o Javascript? Take a look at this for expandable tree menus: Here .....another .....and another .. In all honesty, I don't particularly like expandable/collapsible menus. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
| Posted by Susie at Jul 17, 2007 1:27:48 PM |
|
Re: CSS Expanding Menu w/o Javascript? Thanks for those examples, Eddie. The more I research, the more I dislike the expand/collapse menu, too. Maybe you can think of a better solution? Here's what's going on. My client wants me to add two pages to the website. She only wants them in the "Fine Arts" section. She does not want them to be in the main navigation. I, however, know it's not good to hide pages in the website. I want them to be part of the main navigation and I figured a collapsing menu might be a good compromise. What do you think? |
| Posted by newseed at Jul 17, 2007 3:26:45 PM |
|
Re: CSS Expanding Menu w/o Javascript? She wants the menu link "Fine Art" to be in the main nav which will have a flyout showing 'link1' 'link2' 'link3' and so on but she does not want the these to special links appearing along with 'link1' 'link2' 'link3'...correct? Then why not create another sublist for the sublinks? Fine Arts ----'link1' ----'link2' ----'link3' ----'special' ---------'special-link1' ---------'special-link2' ----'link4' If she must have it done her way, then you will have to create multiple menus to achieve that effect. One for the main nav and then another for Fine Art that looks like the main nav except it has the submenus. The other option, (I don't know if this will work) but you might trying give each subsection it's own id and then use an embedded style to hide (display:none) certain submenus. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
| Posted by Susie at Jul 17, 2007 4:20:34 PM |
|
Re: CSS Expanding Menu w/o Javascript? If she must have it done her way, then you will have to create multiple menus to achieve that effect. One for the main nav and then another for Fine Art that looks like the main nav except it has the submenus. That's what she wants. But that kind of navigation irritates me as a user. I want all the options right up front. I don't want to have to remember where I saw a link. And as a designer, I don't like it when the navigation changes from page to page. I think I'm going to scrap the whole dropdown/flyout idea. It's just not worth the trouble because I want the menu to be accessible to everyone. |
| Posted by newseed at Jul 17, 2007 4:45:01 PM |
|
Re: CSS Expanding Menu w/o Javascript? That's what she wants. But that kind of navigation irritates me as a user. I want all the options right up front. I don't want to have to remember where I saw a link. And as a designer, I don't like it when the navigation changes from page to page. I think I'm going to scrap the whole dropdown/flyout idea. It's just not worth the trouble because I want the menu to be accessible to everyone. Then you need to explain that to her that from a user's perspective, consistancy is better. Also, why force users to click more than once to get to one page? It's not practical. Also, what about screen readers? Are they going to have to listen to the menu contents TWICE to get to the link they are needing? It's not about what she thinks is cool but it's about what her clients/potential clients has to do to view one page. If everybody did what she is requesting, it would double how many times we have to click and quite frankly, I would be upset about it. You just need to sell her on these facts. I am sure LSW and others can add a bit more as to why it just doesn't make sense. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
| Posted by Susie at Jul 17, 2007 6:00:16 PM |
|
Re: CSS Expanding Menu w/o Javascript? I agree. So, let me ask this question again...what if I just make a simple definition list? Have you ever seen one used for site navigation? |
| Posted by newseed at Jul 17, 2007 7:39:43 PM |
|
Re: CSS Expanding Menu w/o Javascript? I agree. So, let me ask this question again...what if I just make a simple definition list? Have you ever seen one used for site navigation? Yes but I cannot recall where. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
| Posted by Susie at Jul 17, 2007 10:08:30 PM |
|
Re: CSS Expanding Menu w/o Javascript? Okay, here's one last ditch effort.  I found this website just now. It has exactly what I want to do. Click on...say...Presse. You see how the menu expands to show sub menu items? That's what I want to do, daggone it! lol But I can't read a word of it (is this German??) so I can't figure out what they're doing here. I like that when you click on the item you are taken to a new page AND given more options to click in the navigation. So, everything has its use. Oh, but wait. I just tried to use my keyboard to navigate. No dice.  I officially give up. |
| Posted by newseed at Jul 17, 2007 10:48:19 PM |
|
Re: CSS Expanding Menu w/o Javascript? It looks like javascript is being used. It's kind of jumpy on my end. As I said before, you could create multiple menus and just display the part you want for a particular page. If Fine Art has 10 of those special links, then you need one type of menu style for those 10 pages. Otherwise, you need to convince her that a menu like that is not beneficial for variety of reason. Simplicity should be the norm. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
| Posted by Susie at Jul 17, 2007 10:54:05 PM |
|
Re: CSS Expanding Menu w/o Javascript? As I said before, you could create multiple menus and just display the part you want for a particular page. If Fine Art has 10 of those special links, then you need one type of menu style for those 10 pages. I think this is just now sinking in. Do you mean make it appear like the menu is expanding when really it's a whole "different" menu? For example, the special menu for the Fine Arts page could look like this: virg iniafreyer muth.com /temp /test2.php . And I would put this special menu on the Giclee Prints and Art for Good pages, too?  I need some sleep.Edit: Eddie, you get the prize! I think this solution makes the most sense of all! And to think all this time I've wasted. Ugh. Thank you!!  But it still makes that part of the navigation not visible from the rest of the website. In other words, if you're on the home page and you scroll through with the tab button, you won't see those two links.... |
| Posted by newseed at Jul 18, 2007 9:36:26 AM |
|
Re: CSS Expanding Menu w/o Javascript? As I said before earlier in one of my post, you could try the 'display:none' method. You would create your entire menu (yes, including the links that she wants to only appear on certain pages) and give each section of the menu a unique ID. Now when you come to a page such as the home page that need to hide a portion of the menu, then use an embedded style to hide it. In all honesty, I've never tried it and I really don't know if that will work. ?? billyboy?? LSW?? If I find the time, maybe I will take a crack at it. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
| Posted by Susie at Jul 18, 2007 9:51:37 AM |
|
Re: CSS Expanding Menu w/o Javascript? Thanks, Eddie. My client has decided to use this: virg iniafre yermuth.com /temp /test2.php . I may experiment with adding javascript to hide the submenus, but she says she likes the way this looks. Go figure. |
| Posted by JAMALDINI at Jul 20, 2007 5:57:01 PM |
|
Re: CSS Expanding Menu w/o Javascript? thanks |
| Posted by billyboy at Jul 21, 2007 2:43:09 AM |
|
Re: CSS Expanding Menu w/o Javascript? Susie, I understand your objection to not having all the links available from all pages and wanting consistency in navigation. But there is nothing wrong with having sub-links for different sections of a site. Consider a really large site with hundreds of pages. Breaking up the navigation into the sections may be the only practical solution. For example, the main nav may lead to 'news' or 'products', then once you're at the 'news' or 'products' page a second set of links leads to (possibly hundreds of) different articles or products. I don't think you would want or need all that available from your main nav. Now I know your site isn't that large, but that's just to show it is an acceptable practice. The rule of thumb is you should be able to access a page from any other page within three clicks. That's possible with the secondary links only available from the gallery pages. As far as using javascript, why hide anything if you don't have to? And I don't think you have to, there's nothing wrong with what you've got. I've mucked about with javascript for hiding sub-menus a fair bit and yet to come up with anything I'm happy with. The main problem is keyboard accessibility. Most don't work except via mouse over. The ones that have keyboard functionality run into problems of rehiding all sub-menus easily. There's also the issue of keeping your layout from breaking when js isn't available and all links are visible. Plus if you want to have the hidden sub-menus always available to screen readers with js support they need to be positioned off screen. But to avoid users who rely on keyboard navigation tabbing through a bunch of links that 'aren't there', you need to use display: none. Blah! There's no good solution, you're damned if you do and damned if you don't. ---------------------------------------- Quiquid latine dictum sit altum viditur |
| Posted by Susie at Jul 21, 2007 6:54:19 AM |
|
Re: CSS Expanding Menu w/o Javascript? Thanks for your input, Bill. It's much appreciated. I see what you're saying and I will take all of this into account.  |
|
Current timezone is GMT Sep 9, 2010 3:32:37 AM |