Help w/ Suckerfish Drop Down Menu w/ Images

Hey there! This is my very first post on the forums and I’m very new to web development. I have been designing for a long time and finally figured it’s time to start teaching myself how to program these sites.

Right now I’m having a bit of an issue with constructing a Suckerfish Drop Down Menu with images. It’s going to be a bit complicated but I don’t think it’s too bad. The first level of the drop down menu is pretty much already in place and working as it should; however, I’m a little stuck when it comes to the 2nd level and styling it, etc.

The first level is simply rollover image buttons. Pretty simple. The 2nd level; however, I want to only be a BACKGROUND IMAGE that changes when it is rolled over. The CMS I plan on using will output text links on top of this background image. The text links will be static but if you mouse over them, the background image should change.

With what I have so far, the “main menu” of the rollover graphic buttons displays just fine but the 2nd level will not hide. How do I get it to hide and only display once the parent is hovered over?

Have a look:

HTML:

<ul class="menu">
	<li class="home"><a href="#">Home</a></li>
	<li class="dancers"><a href="#">Dancers</a></li>
        	<ul id="nav">
        	<li>Profiles & Pics</li>
            <li>Schedules</li>
            <li>VIP</li>
        </ul>
	<li class="gallery"><a href="#">Gallery</a></li>
    	<ul>
        	<li>Club Prebiew</li>
            <li>Dancers</li>
            <li>Girls At Play</li>
            <li>VIP</li>
        </ul>
	<li class="specials"><a href="#">Specials</a></li>
    <li class="party"><a href="#">Private Party</a></li>
    <li class="contact"><a href="#">Contact</a></li>
    <li class="employment"><a href="#">Employment</a></li>
</ul>

CSS:

.menu {
	list-style: none;
	background: #000;
}
.menu li {	
	height: 43px;
	list-style: none;
	background-repeat: no-repeat;
}
#menu li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}
#menu li:hover ul, #nav li.sfhover ul {
	left: auto;
}
.menu li a, .nav li a:visited {
	display: block;
	text-decoration: none;
	text-indent: -9999px;
	height: 43px;
	background-repeat: no-repeat;
}
.home {background-image: url(images/m_home_ro.gif); width: 115px;}
.home a {background-image: url(images/m_home.gif);}
.dancers {background-image: url(images/m_dancers_ro.gif); width: 115px;}
.dancers a {background-image: url(images/m_dancers.gif);}
.gallery {background-image: url(images/m_gallery_ro.gif); width: 115px;}
.gallery a {background-image: url(images/m_gallery.gif);}
.specials {background-image: url(images/m_specials_ro.gif); width: 115px;}
.specials a {background-image: url(images/m_specials.gif);}
.party {background-image: url(images/m_party_ro.gif); width: 115px;}
.party a {background-image: url(images/m_party.gif);}
.contact {background-image: url(images/m_contact_ro.gif); width: 115px;}
.contact a {background-image: url(images/m_contact.gif);}
.employment {background-image: url(images/m_employment_ro.gif); width: 115px;}
.employment a {background-image: url(images/m_employment.gif);}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

ANY help at all would certainly be appreciated. Thanks!

Hi djhile. Welcome to the forums. :slight_smile:

Do you have a live link to this? That makes it much easier for (some of) us to help. :slight_smile:

Unfortunately, I have not uploaded a live working version yet. I may go ahead and set it up if it helps!

I have uploaded a live working version here:
http://go2workonline.com/cvt/home.html

You can see that the “Profiles & Pics, Schedules, VIP” is supposed to be a drop down of the parent “Dancers”.
Same with “Club Preview, Dancers, Girls At Play, VIP” under the parent “Gallery”.

At this point, I’m just trying to figure out how to actually get them to “drop down” after hovering over it’s parent.
After that, I’d like to style it so that behind the text is a specific background and when rolled over, the background changes.

Hope this helps! Thanks in advance for your replies!

Cool, that makes life easier. :slight_smile:

The first problem I see is in your HTML. The sub ULs need to sit inside your top level LIs. For example, instead of this:


<li class="dancers"><a href="#">Dancers</a>[COLOR="#FF0000"]</li>[/COLOR]
<ul id="nav">
    <li>Profiles &amp; Pics</li>
    <li>Schedules</li>
    <li>VIP</li>
</ul>

you need this:


<li class="dancers"><a href="#">Dancers</a>
<ul id="nav">
    <li>Profiles &amp; Pics</li>
    <li>Schedules</li>
    <li>VIP</li>
</ul>
[COLOR="#FF0000"]</li>[/COLOR]

So that’s the first change you need to make on any sub ULs.

Thanks Ralph! While I was awaiting your response, I was already in the process of cleaning up the code.

I think I have a pretty good working version now if you’d like to take another look?

Maybe you could help me out with why the “Employment” link also shows on the left side of the page as a text link in addition to the graphical button on the navigation bar? I can’t seem to track it down for anything!!!

Also, if you rollover the “Dancers” or “Gallery” buttons, you can see that it cuts off my gold bar. When I had it set to drop directly below that gold bar, it would break the navigation between the parent button and the sub-menu. I could not actually access the drop down menu because it would go away in the transition, as I am no longer hovering over the “button”. Is there any way to correct this and allow the sub-menu to stay active?

Thanks again for your help!

Instead of


#nav li a b {
  margin-left: -[COLOR="#FF0000"]999[/COLOR]px;
}

go for


#nav li a b {
  margin-left: -[COLOR="#FF0000"]9999[/COLOR]px;
}

-999px isn’t enough to move the text off many wide screens.

it cuts off my gold bar

That’s what a dropdown does: a list of links appears over the other content. I think you need to let go of this one. All I can think of is perhaps make the background of the drop list semi-transparent, but then the page text would show through as well, so it would probably look horrible.

Ahhhhh, I should have caught that!!! And I agree, I was just being a little picky. Thank you so much for your help!

Glad I was able to help. Hope to see you around again. :slight_smile:

I’ll definitely be around. I hope I don’t bug you guys too much but I am learning!

As a matter of fact, I have another small issue that you could possibly help with.

You will see that in the header I have added a “dancerbox”. This dancerbox will contain images that will scroll with marquee unless you have a more modern suggestion… lol

Here is my CSS:

#dancerbox{width:510px; height:155px; background:url(images/dancerbox_bg.gif) no-repeat center; position:absolute; z-index:200; right:320px; top:80px;}

In the HTML, I have the image in the div, but it will not display. When I set the marquee, it makes the WHOLE bottom half of the page scroll.

<div id="dancerbox"><img src="/images/girl.jpg" /></div>

Is this happening because I have the background image set via the CSS? Any way around it if so? I thought about possibly solving it with z-index but shouldn’t it inherit that it’s a child of the parent element?

I don’t see any kind of dancerbox on the page you gave a link to. I’m also not sure what you mean by a marquee.

If you want a rotating gallery of images. it’s worth checking out jQuery Cycle. There are lots of options there, from very simple to quite complex. :slight_smile:

You might press Control + F5 to refresh… it’s a box at the top that says “Select A Dancer” that’s a background image for the div set in the css. There’s an image that’s supposed to show up inside that div also thats about 100px * 100px but it won’t display. By marquee, I mean the <marquee> html

[FONT=Verdana]Are you sure you updated the on-line version linked to above, because there is no #dancerbox there that I can see. :slight_smile:

I agree with ralph’s suggestion of using JavaScript for this. There was a recent discussion on the use of the marquee tag, which might interest you.[/FONT]

Off Topic:

Blimey, I’ve spent several years on the web now, and had never come across that element. It sure doesn’t get talked about a lot … probably for good reason.

You guys are right… I’m very sorry about that.

Could you check now? Here is how the site header is supposed to look but it looks like it’s getting all out of whack for some reason AND my footer wont even show UP in IE but it does in Firefox.

What am I missing here? Do I have too many dividers inside the Header div?

Hi,

You can’t absolutely place those header elements without creating a stacking context otherwise your point of reference is the viewport and will therefore not keep track with your centred layout. If you put position:relative on the main_container and then the absolutely placed children will take the left top corner of the main_container as their starting point. An absolute element is positioned in respect of its nearest positioned ancestor (e.g. one with either position:absolute or position:relative defined), if none exists then it is placed from the viewport.

However you could simply float those elements also.

e.g.



#dancerbox,#socicons{
float:right;
position:static;
clear:right;
margin:0 5px 0 0;
}
#dancerbox{margin:20px 15px 20px 0}

If you are creating a new site then use a strict doctype as transitional is meant for older legacy sites. Don’t use breaks to make paragraphs - use the p element because that’s what its for. Don’t use the center tag either as that is deprecated in strict as it is presentational and CSS should be used for the presentation (just use text-align:center on a parent to center text).

I would also ditch the menu and revert back to the suckerfish as they are easier to manage and don’t need all that extra conditional commented code. The body text is also a little small to read.

Why is that footer image 604k? It should be about 6k (or less). 604k is bigger than a lot of whole sites.

Hope that helps:)

Thank you for your reply, Paul. You are absolutely right about the footer image. Rookie mistake. I accidentally left it as working CMYK color when making the image to place. Thank you very much for catching that… I have already corrected it.

As far as the positioning… you are in simpler terms saying that I should only use absolute positioning if I have set that particular element’s containing divider with the position: relative tag? Otherwise, just float and use proper margins? I think I went wrong by just trying to pad in each element. I just want to make sure I understand you correctly. I have set it up how I think you are telling me, but you can check the live version and tell me if I am wrong or not.

Concerning the menu, how can I ditch this menu and go back to suckerfish but still be able to use the images for the main buttons and the backgrounds for the drop downs that will have text links placed on top of them? I ran into so much frustration trying to do so, that’s why I pieced this together. I have also increased the body font size.

I still can’t get my “girl.jpg” image to show up in my “dancerbox” element for some reason :-\

hi,

The girl.jpg has the wrong path. Remove the leading slash.

The logo element should also be floated into position as it is wandering around the screen at the moment.:slight_smile:



#logo{
float:left;
position:static;
height:240px;
width:245px;
margin:25px 0 0 25px;
}

The position:static isn’t needed as I was just using it to over-ride your position:absolute (static is the default).

Absolute position is ok in small doses or on situations where the height is controlled such as you header otherwise you lose the flow of the document as absolute elements are removed from the flow. You could have absolutely placed those inner elements as long as the position:relative was on the parent to tie them all together.

The menu you are using is no different from the suckerfish menu as the structure is basically the same apart from all that extra code which is just for ie6 support and you don’t really want to be putting that in your pages these days as everyone is dropping support for ie6 anyway. A small js snippet will provide the same function if needed and is only given to ie6 rather than all browsers parsing your existing code. However, if you have it working as you want then you may as well leave it for now and maybe revisit when you understand it’s workings a little better.

Got it. Thanks again for all of your help everyone!