Quick Nav:  Online Store   |   Login | Register
Forums >Snapsis Product Support >CSS NavMenu

Drop down menu with different coloured text

Rate this topic:

Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.
AuthorMessages
JAZZYLILY
<20 Posts
Posts:11


04/21/2008 3:35 PM  

Sorry if this has already been asked here but I have been searching and cant quite find what I am looking for.

I want to create a menu that has different coloured text for each item but also has a drop down.  How can i do this?

I have tried a tab menu and setting the properties with the CSS for each ID but then I dont have the drop down menu.

I have tried with the hover menu but then I cant see the ID for each item.  I am sure I have missed something very simple here but i have been trying to do this for days now and dont seem to be getting very far.

Thanks for any help.

John Mitchell
Posts:3084


04/22/2008 7:41 PM  
I'm working on a menu for another customer right now, but as soon as that is finished I'll work up an example of how to do different color in the root menu. I should have it finished in the next day or two.
JAZZYLILY
<20 Posts
Posts:11


04/23/2008 5:14 AM  

Thanks John,

I have just about managed to get it working with a template menu and have just used images for the main menu items so i can have different colours.

You can see what i have so far here http://www.absolutewoman.co.uk/CONNECT/tabid/208/Default.aspx

Now I have the problem that it is only showing the submenus to 2 levels, there should be lots more.  Also, how can I get the submenu centred, on the second item it looks a little out of place.

Thanks Sarah

John Mitchell
Posts:3084


04/23/2008 8:55 PM  

That looks good. 

The positioning of the sub-menus is controled with this part of the CSS:

#nav li li:hover ul{left: auto;}
#nav li li li:hover ul{left: auto;}
#nav li.hover ul{left: auto;}
#nav li li.hover ul{left: auto;}
#nav li li li.hover ul
{left: auto;}
If you change the left:auto to left:50px (or what ever value is needed it will move it more towards center.
Right now the sub-menus are aligned to the left of the parent menu, but the parent menu has a lot of margin (probably from the image).

I think that section is probably why it doesn't go more than two levels also.
To get 4 levels you need something more like this:

#nav li:hover ul,
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul, 
#nav li.hover ul, 
#nav li li.hover ul, 
#nav li li li.hover ul , 
#nav li li li li.hover ul {
	left: 50px;
}
 
JAZZYLILY
<20 Posts
Posts:11


04/24/2008 8:20 AM  

Thanks for this.

I have tried what you suggested and have managed to work out how to move the submenus but i still have a problem with it only showing 1 level.  It does show 2 levels on one but only 1 level on the others.  Also the order seems wrong on the one with 2 showing.  The submenu down the side shows what should be in the dropdown menus.

Any ideas? I have been looking at this for hours now but just cant work it out.

I have attached my css file


Attachment: 1424204498271.txt

John Mitchell
Posts:3084


04/24/2008 3:18 PM  
Hi Sarah,
Could you attach the whole skin? I'm having trouble tracking down what may be the problem and it will be easier if I can do a little trial/error.
JAZZYLILY
<20 Posts
Posts:11


04/24/2008 4:59 PM  

I have attached.  Hope it is not too much of a mess for you to work out what I am doing!


Attachment: 1424592451371.zip

JAZZYLILY
<20 Posts
Posts:11


04/26/2008 11:22 AM  
Hi John,
Did you get a chance to look at this for me?
I have tried installing another skin. You can see here that it is the same. All of the submenu items seem to be over the top of each other.
http://www.absolutewoman.co.uk/EXPLORE/tabid/189/Default.aspx
Any ideas?

John Mitchell
Posts:3084


04/26/2008 12:07 PM  
Hi Sarah,
I'm looking at it now.
For the new link you need to make sure that the element containing the menu is wide enough so that the items do not wrap.

Setting the following rule in suckerfish.css (line 4) to have a fixed width will help:
#nav, #nav ul {
background:white none repeat scroll 0%;
border-color:#EEDDAA;
border-style:solid;
border-width:1px 0pt;
float:left;
font-weight:bold;
line-height:1;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt 0pt 1em;
padding:0pt;
width:700px;
}
JAZZYLILY
<20 Posts
Posts:11


04/26/2008 3:36 PM  
For my original skin, can you suggest another way I could try and do this? I need to have the different coloured main menu items with a drop down menu? The drop down items seem to be repeating over each other rather than down in a list.
John Mitchell
Posts:3084


04/26/2008 4:04 PM  

Sorry, I'm still having trouble figuring out what is wrong.  I have attached an image of what I see on the menu with the drop-downs.

Is this not what you expect?






JAZZYLILY
<20 Posts
Posts:11


04/26/2008 4:15 PM  
this menu item is ok (except for the overlap) if you click on explore there should be more items in the menu. I have put a child menu down the side so you can see the items that should be there. The dropdown on explore menu should have 9 items in it there is only 1.
John Mitchell
Posts:3084


04/26/2008 4:29 PM  
By overlap, I'm assuming you mean you would like to move the sub-menu down further.

I do see now that there are more items in the page source than what are showing up in the actual menu.
I'll try to figure that out now, and I'll also post back with the css you need to move the sub-menu down a little.
John Mitchell
Posts:3084


04/26/2008 4:40 PM  

Could you try putting the attached DLL in your /bin folder to see if it helps with the problem of missing items?

I would do it locally, but I'm not seeing the problem on my menu structure, so it may be faster to just try this on yours rather than me trying to recreate all those items.

JAZZYLILY
<20 Posts
Posts:11


04/26/2008 4:49 PM  
Great thanks. That seems to have done the trick.
John Mitchell
Posts:3084


04/26/2008 5:00 PM  

Excellent. It looks like you have moved the sub-menu down as well.

Let me know if you see any more problems.

Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.
Forums >Snapsis Product Support >CSS NavMenu > Drop down menu with different coloured text



ActiveForums 3.7
Powered by: Snapsis Software