Drop-Down Menu Customisation

[tmhai]

I can answer that (I know what im doing now that I have a working example )

Download the latest file from above then import the template. In one of the css files you should find something similar. The number after #pic is the id number of the menu item like 30. Now the first one of these should look the same, the next one after these must have the height of the first one, and the next one is to have the height of the first and second and so on. All the heights are to be inputted into the Top section. (Ill see if I can get a working version for you.)
#imap #pic30 {
left: 0px;
top: 0px;
z-index: 20;
}

[Dr.CSS]

Yes i have here what you have there are images of words used as an Imap menu.

  mark

[Greg]

Mark when I add:

Code: Select all

#primary-nav a { 
text-indent:-9000px;}

It kills the menu in IE 6 -- any ideas?

Works great in FF and IE 7.

look here ---> test page

[chipus]

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.

Hi there,

I have a vertical menu like the link above.

And i want to change the background color, or the text color of the current active page ( active menu).

Example: in the link. The active menu will have the white background.


Could anyone help me?

Thx a lot.

^_^

[Dr.CSS]

Greg
is the menu you have an image or just words?
that bit of CSS,,
#primary-nav a {
text-indent:-9000px;}

primary-nav is the name of the menu the 'a' is the link part
text-indent:-9000px is pushing the words from the 'a' to the left 9000 pixels.
that CSS comes from an Imap stylesheet, if you are using actual words for your menu, don't use it.

    mark

[Dr.CSS]

chipus

Got Link if your menu comes out looking something like this,,

Templates

Rounded w/o Images

1colRound no images
2colRound no images

you should be able to use this as in,,

#primary-nav li.menuactive { some style here for the  li class="menuactive"
}

#primary-nav a.menuactive { some style here for the  a class="menuactive"
}

try that

    mark

[chipus]

hi Mark,

Thx for your help,

Actually, i want my menu have the same effect as the below attachment:

It's just plain Text, no image or picture is used
The current active menu background color should be changed to White.

However, the code that u gave me, it's not work

Code: Select all

#primary-nav li.menuactive {
font-weight: bold;
background-color: #000000;
   }

#primary-nav a.menuactive { 
font-weight: bold;
background-color: #000000;
   }

Could u give me some more help?

Should i attach the my stylesheet for the menu here?

Thx a lot ^_^


[attachment deleted by admin]

[Greg]

Hi Mark,
What I am trying to accomplish is to have a graphic top level menu  and  flyouts for the sublevels. On the main level I do want the text to not show as I want the graphic to show. The moving of text to -9000px works in Firefox and IE 7 but in IE6 only the one Home link shows.

This should look like any CSSMenu but with the top level replaced with an image.

[Dr.CSS]

Greg
see if it works by putting the background image here,,

#leftnav {background: url(uploads/menu/all.gif) no-repeat;
position: absolute;
left:10px;
top: 140px;
height: 450px;
width: 170px;
color: #fff;
}

  mark

[Dr.CSS]

chipus
post you CSS if you don't have a link that i can view your site directly,,
#000000 is the number for black,  #FFFFFF is white

    mark

[Greg]

Hey Mark,

Getting closer - at least the graphic image shows up now in IE6. Unfortunately the only active link is still only the home link.  I'm at work right now so will have to try some more tweaking later.

If IE6 had a CSS editor that worked on the fly like Firefox this would be much easier.

The good news is that it works properly in IE7 which is only about 1 year away from a public release that isn't considered beta. 

Thanks again ...

[tmhai]

OK, I just ran the IMAP stylesheet through W3C CSS Validator and I got the following error:

Line: 63 Context : #imap li li

Property loat doesn't exist : none

Except when I remove it, the menus skrew up, so how can I fix this to get a 'validated message'?

I made my first valid XHTML 1.0 Transitional website! (The W3C servers got a beating from me, I was refreshing every 10 seconds, to see if I fixed all my 400 errors! [mostly repetative errors - stupid bobby!])

Anyway, what's property loat?

[Dr.CSS]

if you can find it in the style sheet just eliminate that line,,

#imap li li {
margin-left: 0px;
margin-top: 1px;
loat: none;
position: relative;
}

  mark

[Greg]

IE6 Problem resolved 

I moved the CSSMenu.tpl to the database and added a span tag around the link text.
Then I added this to my cssmenu.css file:

Code: Select all

#primary-nav a span{ 
visibility: hidden;
}
#primary-nav li li a span{
visibility: visible;
}

Changed the main blocks to floats from absolutely positioned divs added a few clearing divs and it all works in IE 6, IE 7, and Firefox.

I now have a graphic image for the main menu with flyouts for sub-menus. However, I see there is a lot of controversy on the net regarding the hiding of text (screen readers, phishing etc.).

Now when I look at this it seems to be a simple solution. 

Thanks Mark and tmhai !!

[tmhai]

if you can find it in the style sheet just eliminate that line,,

#imap li li {
margin-left: 0px;
margin-top: 1px;
loat: none;
position: relative;
}

  mark

thankyou, resolved.