Drop-Down Menu Customisation

[tmhai]

I dont know who did it again (this is the second time), but I had posted a thread about a custom template I wanted but It was deleted, and I dont know why. Could the person who keeps deleting it send me a valid reason as to why, Im getting annoyed, and I dont think Im doing anything wrong.

I want to use the horizontal drop-down menu that is provided with CMSMS and i want to make the buttons a set width and height and I want an image as a background and a hover image.
An example is found here: http://whats-up.uni.cc/ercwebsite

How do I do this, preferably detailed instructions would be nice, or a link to something specific.
Thanks, - Bobby.

[tsw]

you left irc few minutes before I had a solution for you

you remember we started with identifiying the li:s with id number?

now you can style each menuitem seperately and this might work with straight copy paste..

my first link has id="i15" second i="i30"

first image for the link and some size settings

Code: Select all

li#i15 {
background: url('http://themes.cmsmadesimple.org/uploads/images/tsw/image_replacement_menu.png');
position: absolute; 
height:50px;
width:100px;
left:0;
}

li#i30 {
background: url('http://themes.cmsmadesimple.org/uploads/images/tsw/image_replacement_menu.png') -100px 0px no-repeat;;
position: absolute; 
height:50px;
width:150px;
left:100px;
}

then set a to fill the height also (this will push the dropdown under the link)

Code: Select all

li#i15 a , li#i30 a {
height:40px;
}

then hover states

Code: Select all

li#i15:hover {
background: transparent url('http://themes.cmsmadesimple.org/uploads/images/tsw/image_replacement_menu.png') 0 -50px no-repeat;
}

li#i30:hover {
background: transparent url('http://themes.cmsmadesimple.org/uploads/images/tsw/image_replacement_menu.png') -100px -50px no-repeat;
}

repeat these for every link you want to have an image as a bg

(didnt test with IE though)

and there's still problem trying to hide link text..

Code: Select all

li#i30:hover a {
text-indent:-9999px; 
}

affects dropdown links also (afaik it shouldnt)

Ill try to dig into it with better time

[Dr.CSS]

that sounds the same maybe easier than what I did here
and discussed here  http://forum.cmsmadesimple.org/index.ph ... 699.0.html

  mark

[tmhai]

that doesnt work, in ie the dropdowns dont work and they dont show the hover image, in firefox they just overlap each other.... its pretty much just a whole mess.

[Dr.CSS]

Do you have a link so we can look at what you do have?
there is a hidden link on that page, can you find it?

  mark

[tmhai]

no, im doing it on my localhost

I found the link, Site Design, its where the frill is at the end of the bookmark thingo.

[Dr.CSS]

Thats too bad,, we can't see it to help you,, it makes it easier to check. any screenshots?

  mark

[tmhai]

I totally forgot about scrren capture:


[attachment deleted by admin]

[Dr.CSS]

Thanks
that looks just like the standard menu it has a style sheet called Default CSSMenu Horizontal.
if you look at your page source you will see,,


Home
Content Types
Products


Pricing


Templates

Rounded w/o Images


1colRound no images
2colRound no images
3colRound no images


Then none

Philosophy
Image Map Menu
Simple Site?
Blue Oak Ayurveda
MulTi BoX
MulTiBox no bottom

niftyCubes
stefman



those and are what you are going to style it will show up in the CSS like so,,

#primary-nav li a {
border-right: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
}                                               
#primary-nav li li a {
border: 1px solid #C0C0C0;
}
#primary-nav li, #primary-nav li.menuparent {
background: url(uploads/images/grey.jpg);
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
background: url(uploads/images/grey.jpg);
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth {
background-image: url(modules/CSSMenu/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
background: url(uploads/images/grey.jpg);
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background: url(uploads/images/grey.jpg);
}

the,, li a{    and the,,  li li a{    are the "tree" as it goes down if you just style the first one and not the second it will take the style of its "parent" see if you can id the very top level and give it img.'s and all else below, colors with,,
border-left:{ 5px solid #'some numbers for color of border'}
something like that,,

  HTH    mark

[tmhai]

I followed this tutorial: http://themes.cmsmadesimple.org/Image_menu.html
and then did what that other dude said to do in the second post.

[Dr.CSS]

Well that should get it then hope it works out,,, fun aint it!

  mark

[tsw]

Code: Select all

li#i30:hover a {
text-indent:-9999px;
}

This is the line thats cousing the trouble.

It makes link text move -9999px left of view area for top links (so that the image wont be affected) BUT it seems to cascade down to other links also.

you could try this:

first tell every li a element to have text by default

Code: Select all

li a {
text-indent:0px !important;
}

then force selected texts to move out to the left

Code: Select all

li#30 a {
text-indent:-9999px;
}

[tmhai]

Ok now I get the following:
- the text appears in the drop-down menus now
- the text also appears on top of the button
- if the button has a drop-down it will not hover (like in the image)
- they are still overlapping each other

[attachment deleted by admin]

[Dr.CSS]

you lookin for something like this http://www.multiintech.com/cmsite/index ... =imap_menu

      mark

[tmhai]

OMG, YES! HOW DID YOU DO IT!?