Textpattern CMS

#1 2009-11-21 00:32:51

bootle

New Member

Registered: 2009-04-18

Posts: 6

Sections menu hover highlighting - how's it done?

This must be so simple, but spent ages trying to figure it out.

I have a simple vertical menu, and want the background to highlight as the mouse is hovered over it. So far works when mouse is over the text, but can’t get it to highlight (or clickable) when the mouse is over the rest of the menu item (i.e. over the <li>).

Yet the navigation at textpattern.net and (most) textgarden themes manage to work this way… but I seem to have a blind spot here.

Here’s the menu:

<div id=“sidebar-1”>
<txp:section_list sections=“vans,cars,suvs,contact,location,” include_default=“1” default_title=“Welcome” wraptag=“ul” break=“li” active_class=“active”/>
</div>

which generates (“view source” in browser):

<div id=“sidebar-1”>
<ul class=“section_list”> <li><a href=“http://localhost/highfieldvans/txp/”>Welcome</a></li> <li><a class=“active” href=“http://localhost/highfieldvans/txp/vans/”>Vans</a></li> <li><a href=“http://localhost/highfieldvans/txp/cars/”>Cars</a></li> <li><a href=“http://localhost/highfieldvans/txp/suvs/”>SUVs</a></li> <li><a href=“http://localhost/highfieldvans/txp/contact/”>Contact</a></li> <li><a href=“http://localhost/highfieldvans/txp/location/”>Location</a></li>
</ul>
</div>

and the css:

.section_list a:link
{ text-decoration: none; color: #3c6576;
}
.section_list a:visited
{ text-decoration: none; color: #3c6576;
}
.section_list a:hover
{ text-decoration: none; color: #f80;
}
.section_list a:active
{ font-weight: bold; text-decoration: none; color: #3c6576;
}

The result is the active menu item is highlighted correctly (entire <li>) but the hover only applies to the <a>, which of course, is the menu title, not the wrapping <li>.

Browsing txt_garden, and pretty much everywhere, menus work as I’d expect – i.e. hovering and clickabiity is applied to the entire <li> not just to the <a>.

Have tried a couple of plug ins (e.g. rob_ul_section_list), but with same result. Suspect it’s a CSS technique…

thanks in advance,

Colin

#2 2009-11-21 01:38:32

uli

Moderator

From: Cologne

Registered: 2006-08-15

Posts: 4,306

Re: Sections menu hover highlighting - how's it done?

• You should a definite background-color ;)
• a:link needs display: block;

---

_{In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links}

#3 2009-11-21 17:11:15

bootle

New Member

Registered: 2009-04-18

Posts: 6

Re: Sections menu hover highlighting - how's it done?

Thanks, absolutely right!

#sidebar-1 a
{ border: none; display: block;
}