Mobile Friendly Website

CSSPLAY

Doing it with style

sliding tabs COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

mrruben5:-
Hey stu i keep seeing those empty <b> whats up with them?
wouldnt <b /> work?
(01.06.2005, 21:03)

mrruben5:-
Oh and really nice though :P
(01.06.2005, 21:03)

Stu:-
mrruben5, try it with <b /> and see what happens, and thanks :P
(01.06.2005, 21:12)

Todd (todd@reidjazz.com):-
Stu, alas Mac IE 5.2 fails on this...I've pretty much given up on IE for the Mac...I think few Mac users are using it anyway.
(01.06.2005, 21:38)

Stu:-
Mac IE5.2 should now give a static tabbed menu the same as IE5.01 for PC
(01.06.2005, 22:24)

John:-
wow stu, this one is amazing!! very nice work here. I have 2 concerns though.. the first one is I saw that you have cursor:pointer; for the :hover element, wouldn't cursor:default; work for this incase someone has a different cursor for their computer? also, I might try to get this to work on a web site of mine, but they blocked the sign, would there be someway of getting it to work without that in the css? thanks Stu. this menu opens up a lot of ideas!
(02.06.2005, 02:38)

Stu:-
John, this one is intended to be a navigation menu with a 'taster' of the link page, so it would be appropriate for the cursor to be a link pointer. However, you are free to select whichever you like. As for the forward slash in the css, this is just for Mac IE5, without this hack Mac IE5 will not see the curved corners.
(02.06.2005, 07:59)

Renee:-
Hi Stu, I love your work. :) I was practicing with this one but discovered that the bottom tab doesn't close up completely so you just see the header words. The picture and the information paragraph peek out in Firefox and IE 6. Any fix for that?
(02.06.2005, 22:09)

Stu:-
Renee you need to adjust either the overall height of the menu (35em) or the height of the spans (15em).
(02.06.2005, 22:36)

Renee:-
Thanks Stu! :)
(06.06.2005, 18:43)

Mason:-
Very cool menu. Do you think that's a lot of code for just one element in a webpage though?
(14.06.2005, 21:01)

Stu:-
The CSS is small compared to using javascript, and it could be smaller if you didn't want the rounded borders. Have a look at the horizontal one (next) to see how small the CSS would be.
(14.06.2005, 22:28)

tim@sense-datum.org:-
Great little navigation/menu trick here... I was wondering, though... Is there a way to do this exact thing but put links in the body of each "tab"? I've tried and I just can't seem to get it to work.

Thanks!
(17.06.2005, 21:59)

Stu:-
Unfortunately IE would require nested links for this and that cannot be done. Other browsers could use :hover on the <li> then you could place the links in the content text.
(18.06.2005, 08:44)

jazzle:-
looks good, but it seems that the text for Constable (penultimate box) is too long and flows into the last tab.
(30.08.2005, 16:14)

Stu:-
jazzle, you probably do not have the font trebuchet ms or trebuchet on you system and it is defaulting to arial which is a little larger.
(30.08.2005, 17:10)

Stu:-
Reduced the text for Constable just in case anyone else has similar problems.
(30.08.2005, 20:49)

jay:-
hi Stu. hyper cool menu. but when i apply a real link (instead of the #nogo place holder) by some reason the text under the title disappears. any idea about what could be the problem here?
(02.09.2005, 23:46)

jay:-
Forgot to mention: the above mentioned problem only happens in the last spot (class one).
(02.09.2005, 23:50)

jay:-
forget the posts. i don't know what was the problem but now it seems work well again :) sorry.
(03.09.2005, 00:20)

Alex:-
Hello Stu,
Its seems like that this piece of css work only with #menu li a:hover?
I've tried to go for different option to get a on-off-mouse-click navigation but so far no result. Am I write of wrong?
Cheers
alex
(07.09.2005, 17:09)

Sendep7:-
I dig the menu, but it doesnt work in ie6 if its buiried in a layer div.
(12.09.2005, 21:55)

Henrik Thomsen:-
Hi. I love the "SLIDING TAB MENU". However, the link does not work if You click on the pictures. If You click anywhere everything is fine. Do You have a work around
(17.10.2005, 18:07)

Stu:-
Henrik, this is only a problem with IE. The answer would be to take the image out of the span and control it directly with css rather than include it with the span text.
(17.10.2005, 19:09)

Martin:-
I like your SLIDING TAB MENU, but could it be possible to add links within the expanded section so you could created a menu system. I've had a go but no luck, anyone else?
(02.11.2005, 10:56)

Travis:-
I only needed a 3 of the tabs so when I deleted the bottom 2 the picture and text isnt on the last slide unless you role over it. Any fixes?
(23.02.2006, 21:07)

Stu:-
Travis, you will need to delete the top two and decrease the overall height to suit.
(23.02.2006, 22:47)

Donna:-
Hi, Stu

Your work is truly unique and wonderful. I love it!
(06.04.2006, 01:57)

Serge:-
Hi, I would like to use this for a photo gallery, except that I need the tabs to slide out horizontally, and contain a bunch of thumbnails. Is that possible?
(08.04.2006, 17:52)

Kenny:-
Can this be done Horizontally as well?

Would really benefit me if it was.
(11.04.2006, 14:28)

Kenny:-
Sorry didn't read the post directly above mine.
(11.04.2006, 14:28)

DD:-
When you offer a code example, would it be possible to display it on a separate web page *without* using your site's template? It is so much easier to study and grab the code.
(27.06.2006, 22:45)

Stu:-
DD, if I were to do that then there would be little point in having a template at all as every demo would be on a blank page.
The code is easy to find, as is the css.
If I go to all the trouble of producing these demonstrations then it is not asking too much that you copy and paste the css (generally in the page < head> ..< /head > and the xhtml (always in the #info div).
(27.06.2006, 23:17)

Paul Godden:-
To begin with thanks for the work you're doing here Stu, good stuff. I notice someone else has come across my problem before but didn't see a solution. The menu works fine but the images fail to link in explorer (its an explorer only issue), any thoughts?
(19.07.2006, 16:26)

Rano:-
Hi
thank you for this great Homepage.wish you the best.
(25.07.2006, 20:41)

Nigel:-
Stu, came across your site tonight and it's great. I'm thinking of expanding the menu and using it as a homepage, so is there any way to expand the sections on click rather than on hover and for that section to remain open even if the mouse leaves the section?

Can this be done using CSS or will I have to use JavaScript?

Thanks Nigel

Email: quitepossiblymaybe@hotmail.com
(26.09.2006, 23:35)

Stu:-
Nigel, using this for a homepage that works on click will have severe limitations. The main ones are:
Any scrolling using the scroll bars will kill the click and the content will collapse.
You will not be able to have clickable links in the content as you have used the click to open the 'page'.
(27.09.2006, 19:45)

Georgia:-
Hello and congrats! I'm quite newbie to all this css stuff and I wanted to ask if it is possible to maximize the height and width of the above demonstration in order to cover all the page. I tried to enter width and height of 100% but this doesn't seem to work. Any advice would be greatly appreciated. Thank you very much and keep up the good work.
(02.11.2006, 16:38)

Matthew:-
Stu,

Is it possible to have the first tab open by default rather than the bottom one? And would it be possible to change the colour of each tab - or perhaps to have the first two one colour and the last three another background colour (to imply categorisation of items)?
(29.08.2007, 05:29)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page