PDA

View Full Version : Menu Item Hover Underline / Custom Icon / Two Line Horizontal Menu


equilter
10-18-2008, 04:06 PM
I have three questions:

1. Is there a way to set the Menu Item Hover be Underlined text, whereas the regular Menu Item NOT Underlined?

2. Is there a way to add a custom Icon to ONLY ONE Navbar Menu?

3. Can one specify where a 'line break' occurs on a Horizontal Menu to make two lines?
________
LAMBORGHINI URRACO SPECIFICATIONS (http://www.lamborghini-tech.com/wiki/Lamborghini_Urraco)

Admin
10-19-2008, 02:44 AM
Yes, you can easily do these things with UDM.

For 1), just create a new CSS style like this...


#udm li a.hover {
text-decoration:none;
}
#udm li a.hover {
text-decoration:underline;
}


For 2) add an id to the menu item in question...


<ul>
<li id='my_id'><a href='somewhere'>Link here</a></li>
...
</ul>


Then create a custom css rule...


ul li#my_id {
background-image: url("/path/to/image.gif");
background-repeat:no-repeat;
}



For 3) not 100% sure what you mean, can you elaborate?

Some other links that you may find helpful...

http://www.udm4.com/manual/development/css/#development-css-navexternal-imagenav

http://www.udm4.com/manual/customising/classes/

equilter
10-19-2008, 03:39 PM
Thanks for your reply.

1. In what file do I put the code, and where exactly???

2. Same question, where exactly do I put the code, and in what file???
And where do I specify the image file of the icon I wish to have displayed along with the text for this Menu ?

3. Elaborating on question #3, I want to have the navigation bar in TWO ROWS, and I want to be able to clearly specify where the line break occurs between the two lines of the navigation bar. Please advise.


Yes, you can easily do these things with UDM.

For 1), just create a new CSS style like this...


#udm li a.hover {
text-decoration:none;
}
#udm li a.hover {
text-decoration:underline;
}


For 2) add an id to the menu item in question...


<ul>
<li id='my_id'><a href='somewhere'>Link here</a></li>
...
</ul>


Then create a custom css rule...


ul li#my_id {
background-image: url("/path/to/image.gif");
background-repeat:no-repeat;
}



For 3) not 100% sure what you mean, can you elaborate?

Some other links that you may find helpful...

http://www.udm4.com/manual/development/css/#development-css-navexternal-imagenav

http://www.udm4.com/manual/customising/classes/
________
Lada niva (http://www.chevy-wiki.com/wiki/Lada_Niva)

nicoFio
10-22-2008, 03:19 PM
having same problem as in #3, would like to separate 2 <ul> or <dl> from each other...seems they want to stay on the same line perhaps b/c of the float:left; direction i have given. does anyone know how to fix this?

Admin
10-23-2008, 01:35 PM
For 1 and 2, you'll need to edit your HTML file and your external CSS file. These are independent of the UDM4 code.

For #3, one way to do this would be to specify a width on the entire menu that forces a wrap.

For example. Let's say your menu has 10 items. The first 5 have a total width of 480px. You could set your entire menu width to be 480px, then the remaining items would wrap to the next row.

To see an example of this, check out this link:
http://www.udm4.com/demos/horizontal-relative-center.php

Forum wraps onto a new row.

equilter
10-23-2008, 02:11 PM
Thanks for your reply. Is there any way to preview the #1 and #2 changes BEFORE I use the CSS Generator ? In other words, can it be done with the udm-custom.js file ???

For 1 and 2, you'll need to edit your HTML file and your external CSS file. These are independent of the UDM4 code.

For #3, one way to do this would be to specify a width on the entire menu that forces a wrap.

For example. Let's say your menu has 10 items. The first 5 have a total width of 480px. You could set your entire menu width to be 480px, then the remaining items would wrap to the next row.

To see an example of this, check out this link:
http://www.udm4.com/demos/horizontal-relative-center.php

Forum wraps onto a new row.
________
Cheap Dummy Hand Grenade Lemon (http://airsoft-shop.info/p/dummy-hand-grenade-lemon/)

equilter
10-28-2008, 02:03 PM
Is there any way to preview the #1 and #2 changes BEFORE I use the CSS Generator ? In other words, can it be done with the udm-custom.js file ???
________
GREY'S ANATOMY FORUMS (http://www.tv-gossip.com/greys-anatomy/)