Pop-out menu won't pop-out

Hi,

I’m working on a web project where I’m trying to implement a pop-up menu using CSS & jQuery. I’ve spent hours trying to get this working myself, but with my limited CSS knowledge I’m stuck at a point where I don’t feel I can progress any further. I don’t expect it’s difficult to do, I’m sure it’s probably reasonably routine, but my knowledge and experimentation has gone as far as it can with this one.

The menu is from a tutorial here:

Here’s how the menu should function:
http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/demo.html

Pretty neat.

Now here’s my website. It’s not the actual site the menu will be used on, I’ve knocked this up just as an example:

http://www.sextoypia.com/

Now the menu fuctions as it should EXCEPT it’s constrained within the confines of the left column.

Before we go any further, here’s the HTML and CSS used on the page for the menu.

HTML:

<div>
<ul id=“sliding-navigation”>
<li class=“sliding-element”><h3>Heading 1</h3></li>
<li class=“sliding-element”><a href=“#”>Link 1</a></li>
<li class=“sliding-element”><a href=“#”>Link 2</a></li>
<li class=“sliding-element”><a href=“#”>Link 3</a></li>
<li class=“sliding-element”><a href=“#”>Link 4</a></li>
<li class=“sliding-element”><a href=“#”>Link 5</a></li>
<li class=“sliding-element”><a href=“#”>Link 6</a></li>
</ul>
</div>

CSS: (also at http://www.sextoypia.com/navmenu/styles.css)

body#sliding-navigation
{
margin: 0;
padding: 0;
background: #1d1d1d;
font-family: “Lucida Grande”, Verdana, sans-serif;
font-size: 100%;
}

p#sliding-navigation
{
color: #ffff66;
margin-top: .5em;
font-size: .75em;
padding-left:15px;
}

#hide {
position:absolute;
top:30px;
left:-190px;
}

ul#sliding-navigation
{
list-style: none;
font-size: .75em;
margin: 30px 0;
padding: 0;
}

ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
display: block;
width: 160px;
padding: 5px 18px;
margin: 0;
margin-bottom: 5px;
}

ul#sliding-navigation li.sliding-element h3
{
color: #fff;
background:#333 url(heading_bg.jpg) repeat-y;
font-weight: normal;
}

ul#sliding-navigation li.sliding-element a
{
color: #999;
background:#222 url(tab_bg.jpg) repeat-y;
border: 1px solid #1a1a1a;
text-decoration: none;
}

ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

I want the menu to remain within the column, but I want the sliding-elements, i.e. each menu item to be able to move outside of the column whilst you mouse over it.

I’ve tried assigning z-index: +5 to

ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a

but that makes no difference. Anyone? :slight_smile:

We offer our services on the SitePoint forums for free. We don’t ask people to pay for our advice; in return, we don’t hold ourselves responsible for the use of any advice or suggestions we make for anyone’s sites, businesses, etc. If you want to recruit coders, designers, etc for paid services, I suggest you visit Marketplace. Thanks.

My advice:

  1. pitch that steaming bloated pile of manure known as jquery in the trash.

  2. ditch the cutesy animation. By the time you implement that you’ve blown 96k of javascript on a 502 byte menu.

It might be a “gee ain’t it neat” animated effect, but that minor a detail just isn’t worth that much bandwidth. You spread that type of technique across the page and is it any wonder so many nubes are churning out multi-megabyte websites.

I’d ditch that whole mess, and just change the padding on hover. Sure it will just ‘pop’ out - close enough and a hell of a lot faster loading.

But then I really don’t get this jquery for everything nonsense, most of it cutesy nonsense like animation that don’t really impress anyone when the resulting site with ten to twenty of these types of effects takes 30 seconds or more to load on a broadband connection.

You know, like the 407k of javascript you have on your page - COMPRESSED it’s bigger than your theme images! Honestly you end up having to ask… FOR WHAT? Making certain the page takes longer to load and a couple minor cutesy effects? that’s it? When you have more scripting than you do IMAGES, it’s time to back away from the javascript.

P.S. little tip on recognizing bad code - when every LI inside a classed UL has the SAME class on it - that’s bad code and you should ignore whoever wrote it. When a h3 is INSIDE the UL instead of BEFORE the UL, that’s bad code and you should ignore who wrote it. When a UL has a div around it for no good reason and BOTH have ID’s on them… Shall I go on?

Hi blindfury, your offer was against the rules and offended us all. But still, you are welcome to join.

Your problem: I wouldn’t have seen it, I normally have javascript off. :wink:

Assuming the code in the example site is from the actual site. It doesn’t look like a z-index issue. Try check if you have hidden the overflow on any ancestor to the slide-items.

(You could easily make a non-animated slide-move with pure css if you like. :))

Another good reason NOT to rely on a scripted solution.