css horizontal menu ...any idea?

[StroiX]

 

Website: http://bit.ly/Mb4WG

 

Currently, all the categories are displayed in the "sidebar," I would like to use sidebar to bring visitors attention to other things and as you can see, a lot of the space gets taken by categories and visitors would have to scroll down to see other sidebar items.

 

I would like to move the categories inside the "topbar" and I can later move "home, login, register" and etc.. elsewhere.

 

This is the code which generates the categories:

 

<h3>{#KB_Visual_Category_Title#}</h3>
<div id="categories">
{checkActionsTpl location="tpl_widget_categories_start"}
        {section name=thecat loop=$cat_array start=$start}
                {if $lastspacer eq ""}
                    {assign var=lastspacer value=$cat_array[thecat].spacercount}
                {/if}
            {if $cat_array[thecat].spacercount lt $lastspacer}{$cat_array[thecat].spacerdiff|repeat_count:'</ul></li>'}{/if}
            <li{if $cat_array[thecat].principlecat neq 0} class="dir"{/if}>            
            <a href="{if $pagename eq "upcoming" || $groupview eq "upcoming"}{$URL_queuedcategory, $cat_array[thecat].safename}{else}{$URL_maincategory, $cat_array[thecat].safename}{/if}">{$cat_array[thecat].name}</a>
            {if $cat_array[thecat].principlecat eq 0}</li>{else}<ul>{/if}                        
            {assign var=lastspacer value=$cat_array[thecat].spacercount}
        {/section}
{checkActionsTpl location="tpl_widget_categories_end"}
</ul></div>  

 

And following is the CSS for it:

 

#categories {margin:0 0 15px 0; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:12px; background: rgb(243, 243, 243); border-bottom:1px solid #525b6e;}
#categories li {list-style:none;}
#categories li a {text-decoration:none; font-weight:bold; color:#000;}

#categories li li {list-style:disc; padding:0 0 0 3px; margin-left:8px;}
#categories li li a {color:#03C;text-decoration:underline; font-weight:normal;}
#categories li li a:visited {color: #03C;}
#categories li li a:hover {color: #03C;}

 

The CSS would probably need to be trashed, but wanted to show you how I did this. Something like this would be great if it won't break in IE6 (http://woork.blogspot.com/2008/01/di...using-css.html), it doesn't need to have anything fancy if this would create problems. Just a simple horizontal list of categories, when clicked on, would show the sub categories underneath.

 

Any guidance on this would be nice

 

Thank you very much!!!

Jacklyn

[Dorky]

you would need php or javascript for this

[seanlim]

Your link to the IE6 article does not seem to work..

 

But yes, the closest you can probably get is the :hover pseudo-class for your drop down menu (incompatible with IE6 if i'm not wrong).

 

The only other way for IE6 compatibility seems to be with the use of Javascript minimally.

 

Oh wait, you could also use an ugly looking <select> drop down menu with an ugly looking submit button together with PHP *shudders*

[Chezshire]

What if you implimented Peter Nederlof's csshover.htc hack? I think that hack will resolve the issue your having with internet exploder 6. You can download it at www.xs4allnl/~peterned/hovercraft.html. If you try this, you add your css as follows:

 

Body { font: 1em "TREBUCHET MS", Verdana, Arial, sans-serif;

          behavior: url(css/csshover.htc);

        }

 

 

I hope this helps you, keep in mind that  css/html newb so...