Mobile Friendly Website

CSSPLAY

Doing it with style

Snazzy Menu 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

marcgulinski:-
in safari 1.2.3, the words Turner and Constable are displayed under the first name, in the other buttons the names are displayed inline (so these buttons are less high)
(01.04.2005, 14:17)

Stu:-
Thanks, I think this should be ok now.
(01.04.2005, 15:06)

R6MaY89:-
now if only you could make this hybrid-dropdown... thanks for your work stu. between this and simplebits, i feel like a css master (although i know i am not...).
(02.04.2005, 04:10)

Stu:-
I'm still working on this from time to time, but don't hold your breath for an answer ;o)
(02.04.2005, 08:38)

Todd:-
Stu,
Both Snazzy Menu and Nifty Corners work in MacOS X 10.3.8 in Safari 1.2.3 and FireFox 1.0.2...IE 5.2.3 fails miserably, with no rounded ANYthing...what do we expect from Micro$haft?!
(02.04.2005, 18:01)

Stu:-
Thanks Todd. At least most browsers get it right.
(02.04.2005, 18:48)

Todd:-
Stu - By the way, I really dig what you are doing with CSS...push that envelope baby!
(02.04.2005, 19:36)

Paul:-
On Safari 1.2.4 at least, running the pointer right along the very bottom of a tab causes a "flicker" effect -- the tab switches rapidly between display states. It appears that when the pointer hot spot gets over any of the descenders of the tab text letters it switches from hover to normal state. Strange ...
(15.04.2005, 00:55)

Stu:-
Hi Paul, this is MY mistake :o( I will correct it this evening. On hover the bottom border should change colour to grey but it looks like it is vanishing. I will need to tweak the style a little to ensure that it remains at 1px solid #eee; (check back tonight to see the difference).
(15.04.2005, 08:00)

Stu:-
Flicker now fixed. CSS validates and new CSS navigation submenu in place.
(15.04.2005, 16:45)

Chirley:-
My english is very poor, but think this page wonderful!
Thank you
(19.04.2005, 15:57)

Rick:-
Hi Stu,
My iMac tested out fine in OS 10.2.8 with Camino 0.8.1, Netscape 7.1, Internet Exploder 5.2, Safari 1.0.3, and Firefox 1.0. Keep up the great work!
(19.04.2005, 23:16)

Stu:-
Thanks for the feedback Rick. I will add these to the list.
(20.04.2005, 00:08)

Richard v:-
Safari 1.3 works great as well. Truely inspiring work Stu..
(23.04.2005, 15:00)

Rich A:-
Awesome site! I used this code as a base to create a horizontal sub menu. I simply added a table to the end (but still within) the <li> tag. The effect I'm looking for works perfectly in the latest FF/mozilla. However, in IE, the main menu items move when the sub menu item next to it are displayed. (Please see http://www.rigami.com/1234.htm). Can you help sort out the issue?
(01.05.2005, 23:24)

Stu:-
Rich A, just add table {position:absolute;}
to your CSS.
(09.05.2005, 15:11)

goJunior8:-
Hey Stu,

Once again, incredible site... I am trying to move up the text on the tabs so that they are a little higher than center vertically. How/where would I do this?

Also and probably even more of an issue is how would I get these tabs to be centered between two points? I have a 3 column layout, with the center column being dynamic in width and I would like the tabs to stay centered with that column even if the window is resized. Is that possible?
(08.06.2005, 22:13)

Stu:-
goJunior8, to move the text up or down change the line-height of the text span. To center the menu enclose it in a div which has a width value equal to the width of the menu and then center that div.
(09.06.2005, 07:25)

Stu:-
OR you could give the #info ul a width equal to the menu width and center the #info ul.
(09.06.2005, 07:30)

doris:-
love it
(11.06.2005, 07:26)

Peter:-
The snazzy border menu works great on Safari 1.3 on OSX
(08.07.2005, 11:02)

Paul:-
Stu, thanks so much for sharing all this. I have a follow up of sorts to goJunior8's question. I have placed the snazzy menu in a div that is "position:absolute top:0; width:100%; height:50px". I was trying to get the menu centered (left/right) in the div and stuck to the bottom of it (something akin to what a "position: bottom center" would do were that available). As I said, I WAS trying ... I could get the tabs down there but they'd float off the bottom as soon as the text was resized. It seems that it would be easy to just absolutely position the menu with bottom:0 but then it appears using auto for the left/right margins won't center it. I finally flipped the tabs vertically and stuck them to the top of the div. Not what I wanted, but okay for now. Any suggestions?
(09.07.2005, 17:29)

Yaniv:-
Stu, your tabs work very well, a great solution to a table layout. I am curious if you have an idea for multi-row tabs. For example, when displaying 10 tabs, they wrap onto 2 lines, creating empty space on the bottom-right, which makes the content underneeth look unattached. Possibly having the second-row tabs stretch to fill the remaining space?
(15.07.2005, 17:26)

taval:-
Stu, this is a fantastic site! Thanks for sharing all this fantastic CSS, I hope this site grows and grows!
(28.10.2005, 11:15)

Shelly:-
Just thought I'd post a comment (and a question) - might as well give to receive, eh?

This "snazzy menu" looks good in Firefox on PC (haven't looked in IE or anything yet) - but comparing Mac OSX to what I'm seeing on my PC? Firefox looks the same, Safari 2.0 looks the same and ::gasp:: IE 5.2? Holy crap - looks exactly the same and functions perfectly.

What a wonderful thing - and you didn't even try! ;)

Now, for my question. I'd love to use this menu. However, I'm having an issue: I need a drop shadow on the "hover" and "selected" state. I know you don't *need* images, but I'm doing a site for someone who *wants* images. When the tab is selected, she wants the tab to have a drop shadow - so it looks like it's overlapping the images/menu tabs to the left and right.

Got any ideas on how I could accomplish that?
(29.11.2005, 16:58)

Stu:-
Shelley, shadows would be extremely difficult to add to this menu. I think that you would be better off using images for the normal and hover states. You could use something like the hover in the zero-dollar ads page. I may even look into this as another menu demonstration ;o)
(29.11.2005, 19:33)

Ambrose:-
re: Snazzy menus
You said you need feedback from Mac users, so here is one :-)
Works on Safari 1.3.2 and Firefox 1.5. Haven't tested IE.
(28.01.2006, 05:17)

Ambrose:-
Uh, sorry for being an idiot. I just found that this info is already on the page :-(
(28.01.2006, 05:21)

Bigdog:-
Stu: have you ever thought of creating demo form widgets for your site? It would interesting to see your creativity in action.
(24.02.2006, 03:26)

Chris Klaus:-
Hi Stu,

Realy nice! It also works well in IE 7 beta 2 on Win XP. =)

Thanks
(21.04.2006, 16:47)

Dave:-
Hi Stu-

Great Site!

Just a quick question,
I notice when I am in IE and I click from page to page there is a slight flicker in certain parts of the page, usually the header.
However in FF it is nice and smooth.
Any thoughts?
(23.04.2006, 23:26)

Stu:-
DAve, you could check your IE Temporary Internet Files setting to see if it is set to every visit to page, or automatically.
(23.04.2006, 23:53)

Jonas:-
When looking at your snazzy menu:
www.cssplay.co.uk/menus/snazzymenu.html

I remembered reading on the layout page introduction: "I hope to find layouts that are a bit more adventurous."

How about basing layouts off of your menus? An example I would love to see is in concept very simple and clean, but I think very difficult to actually make. Like a notebook:
www.home.no/jvelde/notebook.png

Is that even doable? The text direction isn't that important.
(13.05.2006, 14:57)

Stu:-
Jonas, I did something a couple of years ago that went like this:
www.cssplay.co.uk/book/index.html

This could easily be developed into what you want.
(13.05.2006, 17:00)

Jonas:-
Cool! You should put that under "layouts"... :)
(18.05.2006, 13:35)

Gordon:-
This almost exactly what I'm looking for - I just need it the other way up! i.e. the curve at the bottom.

Is that easy to do?
(17.11.2006, 14:13)

Stu:-
Take a look at the next demo :)
(17.11.2006, 14:54)

Susan:-
I'm with Gordon...this is perfect (in fact, I'm currently using it with the tabs up) but I need the tabs down now. I looked at the next demo and I don't see how to switch them. Might you have a moment to give me a clue?
(01.10.2007, 21:46)

Stu:-
Susan and Gordon, it doesn't take much to move the top curves to the bottom and reverse the order :)
I have added this to the demo.
(01.10.2007, 22:17)

Susan:-
Thank you so much, Stu. This is PERFECT!
(01.10.2007, 23:53)

Susan:-
One more question...is there a way to add a class current to this menu? I can't figure it out...
(17.10.2007, 22:46)

Susan:-
Nevermind. Got it. :)
(18.10.2007, 16:56)

rob:-
where is the code for this menu?
(07.11.2007, 23:27)

Tim:-
Hello:

I have this working great, and many thanks for that, but has anybody tried making these variable width tabs? Due to the required display:block tags the menus breaks miserably in IE6 et al. if you set width:auto instead of giving a fixed width.

Is this just a limitation of the way niftycorners works? In the past I have used CurvyCorners (similar to nifty) with variable width menus but no exp with niftycorners.

Thanks!
(03.03.2008, 04:59)



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