Topic: Dynamic Categories Drop Down with CSS only... No HTML & No JS
In fact it is quite simple, Safari and Firefox like it. This drop down is good because it does not require you to include manually the categories url, as it is based on the categories loop, everything is automatized.
Opera not too much (any help would be appreciated), And i did not test it yet on IE.
Of course you need to modify the CSS following your needs.
For the CSS: Note that i put an absolute position, as you might include it in the div#box that got a relative position.
Code:
/* CSS Drop Categories ------------*/
#menu-cat {
left :...px;
top: ...px;
background:#FFFFFF none repeat scroll 0 0;
border:4px solid #D0CAB4;
font-family:Helvetica,Arial;
margin:0;
position:absolute;
width:250px;
}
#menu-cat ul .item{display:none;width:250px;}
#menu-cat ul:hover .item{display:block;}
#menu-cat ul .top {padding: 3px 10px;font-size:1.4em;background:#fff;}
#menu-cat ul .item a{display:block; color:#808080; padding:2px 0px 2px 10px;}
#menu-cat ul:hover .item a:hover{background:#ffffcc;text-decoration:none; color:#000;}
In the header.tpl
Code:
<!-- Drop Menu Categories -->
<div id="menu-cat">
<ul id="item1">
<li class="top">Select a Category </li>
{section name=tmp loop=$categories}
<li class="item" id="{$categories[tmp].var_name}" {if $current_category == $categories[tmp].var_name}class="selected"{/if}><a href="{$BASE_URL}jobs/{$categories[tmp].var_name}/" title="{$categories[tmp].var_name}">{$categories[tmp].name}</li>
{/section}
</ul>
</div>
<!-- End Drop Down -->
Last edited by fred (2009-06-13 17:16:19)