Create children in Superfish Nav

Permalink
I bought the Superfish Nav but I cant seem to find out how to create the second level or sub menus. For instance Underneath "Home" I would like another link that says "Team". At the moment "Team" is sitting right next to "Home" in the menu. I need it to be underneath "Home" as a sub as in the default "Examples" link.

It seems like it should be easy enough to do.

Also can I make my top level transparent?

Thanks Nige

nige
 
mario replied on at Permalink Reply
mario
5.3.2 was just released. I believe suckerfish is only compatible with that version.

if you have, i'd have you make sure that the page is under the parent page in the sitemap.
nige replied on at Permalink Reply 1 Attachment
nige
Hi Argie,

Yes I have upgraded to 5.3.2.

I have dragged "Team" underneath "Home" and it looks like the image attached.

Am I right in thinking that everything seems underneath home?

I want "Team" as a submenu of Home like "Eaxamples".

I see the "Examples" sitemap image looks correct but "Home" doesn’t.

Really appreciate your help. (Im also looking at your Zen layout for future stuff)

Nige
mario replied on at Permalink Reply
mario
hmmm... i'm an idiot. yes, i think Home exists on it's own as the root and thus the css header nav list plops all of it's children to the left of it automatically. According to the tree, everything is below it. Traditionally, Home stands alone, lol...

Off the top of my head, you could create a duplicate Home (call it Homepage, not sure if you can have two Home's using pretty URLs) and hide the Home link by turning it off by it's class (first). Then put Team under Homepage. You might run into some weird index pathing issues in the future. I'm not sure. put this into your css.

#headerNav ul li.first {
        display:none;
        visibilty:hidden;
}


Or you could just fold Team into the About Section or Company Profile.

I suspect that what you want to do is possible but would require a slight rewrite of the superfish PHP code. Something involving tagging certain pages with a custom attribute (subHome for example), taking them out of the tree flow and header nav list items and showing them under the Home page instead. That list is then generated and inserted into the Home superfish sublist.

I haven't tried the C5 superfish nav yet (i use my own awkward deployment of superfish) but it certainly looks easier to modify than mine that's for sure.
nige replied on at Permalink Reply
nige
mmm, I think you might be right.

what a bummer.

I think I’ll try loading into About.

Cheers for your help Argie.

Nige
nige replied on at Permalink Reply
nige
Hey Argie,

One more thing.

Do you think you can make the top level of the Nav transparent?

Ive tried in .css and cant get it to work although Ive done it with other Navs (spry).

I want it to be transparent or a background image.

Nige
mario replied on at Permalink Reply
mario
You just need to target the nav elements container and use child selectors. remember that opacity can be tricky to deploy across all browsers. what browser and OS are you testing in?

[edit] it could be a z-index issue too [/edit]
nige replied on at Permalink Reply
nige
Im building on a Mac in Firefox 3.012 and testing also in Vista Explorer 7 or 8 not sure.

Ive done it before but I couldnt crack it in Superfish.

What do you exactly mean by child selectors?

I wonder about the z-index thing because when I did remove the background color there was another color underneath it, which I just couldnt find.

Nige
mario replied on at Permalink Reply
mario
hi nige,

here's a good article on cross-browser transparency:

http://css-tricks.com/css-transparency-settings-for-all-broswers/...

Are you using this method?

You could also background-image via css a semi-transparent png onto the list items. However, you'll need to put in an IE6 png fix to cover those people if you want them to see the transparency.

http://www.twinhelix.com/css/iepngfix/...

It's possible to use the old-school "transparent checkerboard gif" trick too where you create a gif that has every other pixel transparent creating the illusion of transparency then set that as your background.

[edit to the edit]

child selectors is a fancy way of saying you want to select/affect specific tags or class that are only found with certain parents in a certain order.

good link:
http://www.westciv.com/style_master/academy/css_tutorial/selectors/...

edit to edit - you can use descendant selectors too which can have better cross browser/version support (which is what I generally use).

http://www.westciv.com/style_master/academy/css_tutorial/selectors/...

[/edit]

-mario
nige replied on at Permalink Reply
nige
Thanks Mario/Argie, (which one are ya)

Ill check that all out.

Nige
mario replied on at Permalink Reply
mario
sure thing :)
lol