Expanding menu

[Daimz]

does anyone know how I can make and expanding menu like this one.

http://www.phatfusion.net/imagemenu/index.htm

But with one difference. From what I have found this menu requires that all images are the same width. If the image is smaller it will repeat the image rather than only expand to the size of the smaller image. Now I have a few images that are of different widths so I was wondering if anyone knew a way that I could achieve that or how I could edit this code to do that?
Thanx:beer:

[Ubik]

Take a look a this, maybe you can the size of the images (in the css, i didn't tried)

http://ldbglobe.fried-rice.net/public/2007/06/jQuery.imageMenu/ (http://ldbglobe.fried-rice.net/public/2007/06/jQuery.imageMenu/)

[simplistik]

the reason that the image doesn't expand is because it's a background image as opposed to an <img />. there's no attribute in css that can expand a background image 100% of it's container. if you could modify the script a little to allow you to add an <img /> into the container you can then force that image to always be 100% height and width of the parent. the images in the current setup they have don't HAVE to be the same size, but if you wanted them to stop tiling you'd just have to find the element that has the background images in them and do a no-repeat in the css.

[Daimz]

Sweet so it is possible to do.
@ Simplistik:
I am going to give this a go and try the image thing like you said because the even if i do tell the background not to repeat in the background the box will still expand to a set size(I am guessing here) and that would leave extra space around the image where it perviously would have just tiled the image. I am not very good a at CSS and Coding in general so Im am going to give it a try but if I get suck would it be ok if I got some assistance from you....but I would prefer to try it by myself first.

[Daimz]

I had a thought after looking at that jQuery website with the menu.

it has the javascript.
and the html looks like so:

<ul id="menu">
<li id="menu-1" class="menuOption"><a href="#menu1"><span class="menuOptionHover">Menu 1</span></a></li>
<li id="menu-2" class="menuOption"><a href="#menu2"><span class="menuOptionHover">Menu 2</span></a></li>
<li id="menu-3" class="menuOption"><a href="#menu3"><span class="menuOptionHover">Menu 3</span></a></li>
<li id="menu-4" class="menuOption"><a href="#menu4"><span class="menuOptionHover">Menu 4</span></a></li>
</ul>

could I change that to:


<ul id="menu">
<li id="menu-1" class="menuOption"><a href="#menu1"><span class="menuOptionHover"><img src="http://"></span></a></li>
<li id="menu-2" class="menuOption"><a href="#menu2"><span class="menuOptionHover"><img src="http://"></span></a></li>
<li id="menu-3" class="menuOption"><a href="#menu3"><span class="menuOptionHover"><img src="http://"></span></a></li>
<li id="menu-4" class="menuOption"><a href="#menu4"><span class="menuOptionHover"><img src="http://"></span></a></li>
</ul>

and change the css from:


#menu {
margin:0;
padding:2px;
height:100px;
width:400px;
background:#000;
list-style:none;
overflow:hidden;
}
#menu li {
float:left;
width:98px;
height:100px;
border-right:2px solid #333333;
}
#menu li .menuOptionHover{
display:block;
width:100%;
height:100px;
text-indent:-8000px;
}
#menu-1 { background:url(1.blur.jpg); }
#menu-2 { background:url(2.blur.jpg); }
#menu-3 { background:url(3.blur.jpg); }
#menu-4 { background:url(4.blur.jpg); }
#menu li#menu-1 .menuOptionHover { background:url(1.jpg); }
#menu li#menu-2 .menuOptionHover { background:url(2.jpg); }
#menu li#menu-3 .menuOptionHover { background:url(3.jpg); }
#menu li#menu-4 .menuOptionHover { background:url(4.jpg); }

to:


#menu {
margin:0;
padding:2px;
height:100px;
width:400px;
background:#000;
list-style:none;
overflow:hidden;
}
#menu li {
float:left;
width:98px;
height:100px;
border-right:2px solid #333333;
}
#menu li .menuOptionHover{
display:block;
width:100%;
height:100px;
text-indent:-8000px;
}
#menu-1 { width:50%; }
#menu-2 { width:50%; }
#menu-3 { width:50%; }
#menu-4 { width:50%; }
#menu li#menu-1 .menuOptionHover { width:100%; }
#menu li#menu-2 .menuOptionHover { width:100%; }
#menu li#menu-3 .menuOptionHover { width:100%; }
#menu li#menu-4 .menuOptionHover { width:100%; }

is that kinda what you were meaning by adding <img> tags and then controlling them using the css?

[simplistik]

ummm sorta, your markup is right... but you'll still have to "force" the images to be the same height and width as the containers,

[Ubik]

Correct me if i'm wrong but i don't think you can specify width properties for a span element because it's not a block element.

[simplistik]

Correct me if i'm wrong but i don't think you can specify width properties for a span element because it's not a block element.

you can easily


span { display: block; }

[Ubik]

umm, yeah... of course :blush:

[Daimz]

ummm sorta, your markup is right... but you'll still have to "force" the images to be the same height and width as the containers

I am not sure exactly what you mean?

Are you meaning:

<li id="menu-2" class="menuOption"><a href="#menu2"><span class="menuOptionHover"><img src="http://"></span></a></li>

and then in the "menuOptionHover" I add the "display: block;" ?