/    Sign up×
Community /Pin to ProfileBookmark

Suckerfish menu issues

Hi,
I’m using the son of suckerfish methods ([url]http://htmldog.com/articles/suckerfish/dropdowns/[/url]) for my menus. Issue is I want the menu to pop-up instead of drop-down. I want the content of the menu to display above the main menu content. I want the second level stuff to display the same. I just can’t for the life of me what to edit in the css to change.

Here’s the basic bare-bones css for a suckerfish menu:

[CODE]
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a {
display: block;
width: 10em;
}

#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn’t read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
[/CODE]

Any ideas? Much thanks!

to post a comment
CSS

6 Comments(s)

Copy linkTweet thisAlerts:
@FangSep 26.2008 — #nav {position:relative;}
#nav li ul {top:-5em;} /* this value depends on the number of items in each list */
Copy linkTweet thisAlerts:
@bejitto101authorSep 26.2008 — Ok, now say I didn't know the number of elements in the list... what could I do then? Say the html is being created dynamically. Is there anything I can do?
Copy linkTweet thisAlerts:
@FangSep 26.2008 — Start working on a JavaScript method to find the number of items in each list and their height, then adding the css to each list.
Copy linkTweet thisAlerts:
@bejitto101authorSep 26.2008 — Ah hell, I was hoping there was an easier way than that, I figured that's what it would come down to though. So just something that gets each of the sublists (#nav > li), counts the number of child elements in the list and then updates the CSS accordingly?
Copy linkTweet thisAlerts:
@opifexSep 29.2008 — think i'm missing something here....

what is it that you want?

a vertical menu with flyouts that rise up--

or a horizontal menu with "drop-downs" that rise up???

either can be done easily and with out javascript and the li's can be generated dynamically.
Copy linkTweet thisAlerts:
@bejitto101authorNov 17.2008 — Sorry for reviving a dead thread, but I wanted a horizontal menu with "drop-downs" that rise up. How would you go about this without js?

I eventually went with this method: http://www.sitepoint.com/forums/showthread.php?t=568996
×

Success!

Help @bejitto101 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...