By ncswi on

Sandbox site: http://sandbox.ncswi.com

Note the side Navigation menu.

I would like to know if anyone has experience in customizing the DHTML menu bullets. My customer would like to have a different bullet on the expandable menu items to better reflect to visitors that there are submenus below.

Can this be done in the dhtml_menu.css file? If so, can you provide hints/tips/tricks to get me going?

Thanks in advance.

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

For each list with a sublist/menu the li element has a class of expanded or collapsed so you can apply css to li.expanded and/or li.collapsed to change the bullet and/or image.

ncswi’s picture

ncswi commented

Thanks for the quick response. While I am a Linux guy, I don't have much exposure to CSS. I added code to my dhtml_menu.css file, but it is changing the submenu bullets rather than the parent bullets. I only want the arrow bullet to be displayed next to menus that have submenus.

Here is my code from dhtml_menu.css file:
BOC
ul, li {padding:0; margin:0;}
ul li.expanded ul li {padding-left: 15px; background-image: url('http://sandbox.ncswi.com/images/arrow.png');}
ul li.collapsed ul li {padding-left: 15px; background-image: url('http://sandbox.ncswi.com/images/arrow.png');}

.fake-leaf
{
font-size:8pt;
font-style:italic;
}

li.start-collapsed ul
{
display:none;
}
EOC

Thanks in advance.

================
Northern Computer Service, LLC
P.O. Box 1367
Woodruff, WI 54568
715.892.0530
715.358.9806
info@ncswi.com
www.ncswi.com

nevets’s picture

nevets commented

You have ul li.expanded ul li but you only want ul li.expanded

ncswi’s picture

ncswi commented

I'm sorry. I'm just not getting it. Can you explain in better detail?

Thanks much.

J.R.

================
Northern Computer Service, LLC
P.O. Box 1367
Woodruff, WI 54568
715.892.0530
715.358.9806
info@ncswi.com
www.ncswi.com

sraborg’s picture

sraborg commented

I think you are getting mixed up with the CSS syntax. Here's a quick run down

li {...}
Any definitions here will apply to all li elements

li ul {...}
Any definitions here will apply to all ul elements that are inside an li element

li.example {...}
Any definitions here will apply to any li element that has a class called example.

Drupal does some wonderful things for us by default. It adds a class of either collapsed or expanded to any li element that contains another list. Therefore, the following CSS selectors would apply to you.

li {...}

li.collapsed {...}

li.expanded {...}