X-Cart forums

[Jarron]

Hi all,

I'm looking to create a rollover effect for the category menu whereupon the background behind each category changes colour upon mouseover.

I've seen a few javacscript examples on this board but I was hoping someone had done this using CSS.

I can easily edit the skin1.css to change the background colour on the text. However this effects only the text and not the width of the category menu.

Does anyone have any ideas or experience in creating this rollover effect in CSS.

Thanks

J

[dfawdon]

You could use http://www.xcartmods.co.uk/#v4menu
I am using this and pleased with the results.

[Jarron]

Thanks for the link the menu's are great. However I would prefer to learn how to create the rollover effect in CSS with x-cart.

As far as I can make out the categories each need a display: block style in the skin1.css under .CategoriesList.

This is what I have so far but it just adds the block to the bottom of the menu below the categories themselves.

.CategoriesList {
FONT-SIZE: 12px;
BORDER-BOTTOM: #68C1FF 1px solid;
DISPLAY: block;

This is my modified categories.tpl where I have added <div class="CategoriesList">.

{* $Id: categories.tpl,v 1.26 2005/11/17 06:55:37 max Exp $ *}
{capture name=menu}
{if $active_modules.Fancy_Categories ne ""}
{include file="modules/Fancy_Categories/categories.tpl"}
{assign var="fc_cellpadding" value="0"}
{else}
{if $config.General.root_categories eq "Y"}
{foreach from=$categories item=c}
<div class="CategoriesList"><a href="home.php?cat={$c.categoryid}" class="VertMenuItems">{$c.category}</a></font><br />
{/foreach}
{else} {foreach from=$subcategories item=c key=catid}
<div class="CategoriesList"><a href="home.php?cat={$catid}" class="VertMenuItems">{$c.category}</a></font><br />
{/foreach}
{/if}
{/if}
{/capture}
{ include file="menu.tpl" dingbats="dingbats_categorie.gif" menu_title=$lng.lbl_categories menu_content=$smarty.capture.menu cellpadding=$fc_cellpadding}


Am I on the right track?

Jarron

[inebriate]

you could use :hover

but IE needs additional work using expressions
have a look at http://lawrence.ecorp.net/inet/samples/css-ie-hover.shtml

[Jarron]

that helped - thx.

[n00bert]

you can use http://www.cssplay.co.uk as a css reference. Stu Nicholls has many examples of quite beautiful css menus and other demos. Most of the code is free to use and is labelled as such.

If you want something a little more slick, check out jquery, http://www.jquery.org, a free javascript library that allows for simple, unobtrusive javascript behaviours. You can have sliding menus, accordian effects, fades, highlights and other animation effects.

It's pretty easy to "wire up". Simply download the latest version of jquery and upload it to the /skin1 directory. Then include it in meta.tpl, like this:

 <script type="text/javascript" src="{$SkinDir}/jquery.js"></script>

you can then find extra libraries on the jquery site (plugins) which you install using the same method.

Then you write the javascript, or use the javascript provided with the plugins, and put this into a javascript file and name it anything you want. Again, use the above method to include it in meta.tpl.

This should make sense, once you've checked out how jquery works.

You can check out some of the effects at http://www.urban-kings.com

regards,
n00bert

[PhilJ]

Great resource here...
http://css.maxdesign.com.au/listamatic/vertical08.htm