|
|
|
Killersites.com Forum » List all forums » » Forum: CSS - Styling your pages with Cascading Style Sheets. » » » Thread: CSS Tabbed Menu |
||
| Print at Sep 9, 2010 3:37:05 AM |
|
|
| Posted by Susie at May 9, 2007 9:05:48 AM |
|
CSS Tabbed Menu Okay, I've searched through these forums and I've googled elsewhere and I'm confused. I want to create a large tabbed menu and I want to do it in the most accessible and correct way. There are all sorts of free examples out there, but I'm unsure if they are okay to use. For example, there are these . I've also read through the Sliding Doors examples, but this leaves me even more confused. Dynamic Drive offers the sliding doors method of creating these tabs, but #1 they are not tall/wide enough for me and #2 the corners are a smooth round like I want. So, what should I do? What's the best solution here? |
| Posted by cboudy at May 9, 2007 9:23:22 AM |
|
Re: CSS Tabbed Menu I want to do it in the most accessible and correct way. Sue, I believe the most accessible and correct way is to make sure your using some kind of list for your menu. It can be a <ul> or a <ol>. Also if someone is navigating with a keyboard, it is helpful to change the hover/focus/active to something that is easily distinguishable. The examples you found are good, you'll probably just have to tweak the CSS to make the LARGE. Also there are some CSS Menus @ WS . |
| Posted by Susie at May 9, 2007 9:27:40 AM |
|
Re: CSS Tabbed Menu I want to do it in the most accessible and correct way. Sue, I believe the most accessible and correct way is to make sure your using some kind of list for your menu. It can be a <ul> or a <ol>. Also if someone is navigating with a keyboard, it is helpful to change the hover/focus/active to something that is easily distinguishable. Well, yes, I knew that part.  Also there are some CSS Menus @ WS . I forgot to check Webshapes!  But you know what?? I like the tabs he used on there (the actual webshapes site)! I need to find out how to make those!  |
| Posted by cboudy at May 9, 2007 9:31:23 AM |
|
Re: CSS Tabbed Menu See you knew all along. I forgot to check Webshapes! Looks the Homer Simpson. I've messed around with a couple of tab menus before, and I believe all you have to do is messing with the padding settings to make then larger or smaller. There are also a couple of tabbed menus @ CSS Play . |
| Posted by Susie at May 9, 2007 9:32:51 AM |
|
Re: CSS Tabbed Menu I've checked there, too.  I just can't find that rounded look without the bevelling. I need to find out how Stef made the ones on Webshapes because that's exactly what I'm looking for. Only different colors, of course. |
| Posted by cboudy at May 9, 2007 9:36:52 AM |
|
Re: CSS Tabbed Menu I just can't find that rounded look without the bevelling. Yea your right, there are alot o f beveled ones. Not alot of flat ones like WS. I'm sure Stef wouldn't mine if you took a look at the code. |
| Posted by billyboy at May 9, 2007 10:58:20 AM |
|
Re: CSS Tabbed Menu The ones at exploding-boy.com and at Webshapes are available in CSS Tab Designer a small application for generating CSS menus. You should be able to find what you're looking for with that, there's a few non-bevelled samples and they hold up well when the text is resized a lot bigger. You could start with their code, bump up the text-size and/or padding if needed. And work from their bg images alter the colour, make them larger or whatever. ---------------------------------------- Quiquid latine dictum sit altum viditur |
| Posted by shelfimage at May 9, 2007 11:24:02 AM |
|
Re: CSS Tabbed Menu I've checked there, too. I just can't find that rounded look without the bevelling. I need to find out how Stef made the ones on Webshapes because that's exactly what I'm looking for. Only different colors, of course. Looking at the code, it looks like maybe those tabs are being influenced by a js and are just solid colors. Maybe...  You can use your paintshop to make a button. I don't use paintshop enough to say how. But in Photoshop I would make a wide button, maybe about 300px, and then cut it into 2 images. One for the left side and one for the right side of the tab. You'll then need to set you links using a span around the link text. So, <li><a href="" title=""><span>Link Text</span></a></li> Then the "a" will hold the background image for the right side, and the "span" will hold the image for the left side. So, for example, here are some rough images:  span { background: url(menu-left.gif) top left no-repeat; height:50px; }  a { background: url(menu-left.gif) top right no-repeat; height:50px; } Then using background positioning, you'll set the hover rules to use the bottom half of the image. a:active { background-position: bottom right; } a:active span { background-position: bottom left; } So, of course there will be padding rules to make it all line up. I think this is the "sliding doors" practice. ...so you may already know this... ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
| Posted by Susie at May 9, 2007 9:32:11 PM |
|
Re: CSS Tabbed Menu I appreciate all the input. Thank you so much. I am still very confused (graphics are my downfall), but I will press on tomorrow. Right now, I have a headache.  |
| Posted by newseed at May 9, 2007 11:23:12 PM |
|
Re: CSS Tabbed Menu I appreciate all the input. Thank you so much. I am still very confused (graphics are my downfall), but I will press on tomorrow. Right now, I have a headache. You might try this freeware that will help you create a list CSS tab menu. I just pick a style that I like and edit the image to colors that I desire. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
|
|
Current timezone is GMT Sep 9, 2010 3:37:05 AM |