replace categories menu with ul/li

[zozzoozzz]

I am trying to replace the categories sidebox display with a 'proper' ul/li structure. I want to keep the standard functionality where subcategories open after a top level category has been selected.

 

when I move the mouse over the categories item , the background color will change to what i set

 

 

how to do that?

 

 

thanks

[playcraft]

I am trying to replace the categories sidebox display with a 'proper' ul/li structure. I want to keep the standard functionality where subcategories open after a top level category has been selected.

 

when I move the mouse over the categories item , the background color will change to what i set

 

 

how to do that?

 

 

thanks

'Category Box as Nested Unordered List for EZ(er) CSS & Dynamic menus v 1.00

[sharma.atul85]

yes its quite possible

use <ul > tag after <tr><td > and end before </td></tr> in categories.php under catalog>includes>boxes>

and then add like this '<li><a href="..

...

.

...

</a></li>'

in same file

actually I have modified my file a lot so thought better to post like this

[zozzoozzz]

yes its quite possible

use <ul > tag after <tr><td > and end before </td></tr> in categories.php under catalog>includes>boxes>

and then add like this '<li><a href="..

...

.

...

</a></li>'

in same file

actually I have modified my file a lot so thought better to post like this

 

 

 

Thanks sharma.atul85,

 

But how to set the style of the <ul> <li> tag of categories.php in stytlesheet.css

 

I want to make it likes this:

 

When i move the mouse over the item of categories , the background will change to what i set.

 

for example:

 

. background a hover {

background : # 333;

 

 

}

 

 

 

thanks a lot

[sharma.atul85]

add class like <li class="classname">

then in stylesheet do as

 

.classname

{

background : #000;

}

 

 

.classname:hover

{

background : #333;

}

hope it works for u as well

[bkellum]

You ignored the best solution in my opinion.

 

The Category Box as a Nested Unordered List is an excellent contribution that will do exactly what you are wanting to do.

 

http://addons.oscommerce.com/info/4201

[lindsayanng]

it was ignored because it wasn't a copy and paste solution.. even though it pretty much is..

[zozzoozzz]

You ignored the best solution in my opinion.

 

The Category Box as a Nested Unordered List is an excellent contribution that will do exactly what you are wanting to do.

 

http://addons.oscommerce.com/info/4201

 

 

 

 

Thanks Bill Kellum, i will try this Contribution later

[zozzoozzz]

add class like <li class="classname">

then in stylesheet do as

 

.classname

{

background : #000;

}

 

 

.classname:hover

{

background : #333;

}

hope it works for u as well

 

 

thanks again Atul Sharma

[zozzoozzz]

You ignored the best solution in my opinion.

 

The Category Box as a Nested Unordered List is an excellent contribution that will do exactly what you are wanting to do.

 

http://addons.oscommerce.com/info/4201

 

 

 

 

hello

 

 

I have installed this conbri, but I found that it have a little difficulty to set the CSS part.

 

 

I want to set the Category Box's Css part as below:

 

 

<style type="text/css">

#info {height:500px;}

 

#menu {margin-top:100px;}

#menu dl {width: 150px; margin: 0 auto; padding: 0 0 10px 0; background: #69c url(bottom.gif) no-repeat bottom left;}

#menu dt {margin:0; padding: 10px; font-size: 1.4em; font-weight:bold; color: #fff; border-bottom:1px solid #fff; background: #69c url(top.gif) no-repeat top left;}

#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; border-bottom:1px solid #fff; background: #47a;}

#gallery a, #gallery a:visited {color:#fff; text-decoration:none; display:block; padding:5px 5px 5px 20px;

background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;

}

#gallery a:hover {background: #258 url(arrowr.gif) no-repeat 11px 10px; color:#9cf;}

 

ol li {font-size:11px;}

 

</style>

 

 

</head>

 

 

<div id="info">

 

<h2>A Definition List Menu</h2>

 

<div id="menu">

<dl id="gallery">

<dt>Art Gallery</dt>

<dd><a href="#" title="Paul Cezanne">Paul Cezanne</a></dd>

<dd><a href="#" title="Henri Matisse">Henri Matisse</a></dd>

<dd><a href="#" title="Vincent van Gogh">Vincent van Gogh</a></dd>

<dd><a href="#" title="William Turner">William Turner</a></dd>

<dd><a href="#" title="John Constable">John Constable</a></dd>

<dd><a href="#" title="Claude Monet">Claude Monet</a></dd>

</dl>

</div>

 

 

</div> <!-- end of info -->

 

 

 

 

 

 

 

 

 

 

 

 

But i don't know how to start, could u give me some suggestions converting this above css style to my Category box .

 

 

 

 

 

 

thanks a lot

[zozzoozzz]

Please see the demo:

 

http://www.cssplay.co.uk/menus/definition.html

 

 

 

I want to make my catagories box style like above, It is possible to do that?

 

 

 

Thanks very lot!

[spooks]

Yes, its just css, looking through this thread u have all the answers here already, just put it all together!

[zozzoozzz]

Yes, its just css, looking through this thread u have all the answers here already, just put it all together!

 

 

 

Thanks Sam

 

I have put it all together, but it is not what i want, i don't know how to do next

[drofe1]

I have installed The Category Box as a Nested Unordered List and it still seems to have a closing tag bug in it, in spite of two fixes.

 

Closing Tags Fix 1 closes the parent category tag but does this for the one with nested sub-categories, and also duplicates the closing tag in the nested sub-categories:

 

ul id="nav">

<li class="cat_lev_0"><a class="link_lev_0" href="" class="daddy">Category</a></li>

<li class="cat_lev_0"><a class="link_lev_0" href="" class="daddy">Category</a></li>

<ul>

<li class="cat_lev_1"><a class="link_lev_1" href="">Subcategory</a></li></li>

<li class="cat_lev_1"><a class="link_lev_1" href="">Subcategory</a></li></li>

</ul>

</li>

<li class="cat_lev_0"><a class="link_lev_0" href="" class="daddy">Category</a></li>

<li class="cat_lev_0"><a class="link_lev_0" href="" class="daddy">Category</a></li>

</ul>

 

but Closing Tag Fix 2 leaves the closing </li> tag off all the top-level categories:

 

ul id="nav">

<li class="cat_lev_0"><a class="link_lev_0" href="" class="daddy">Category</a>

<li class="cat_lev_0"><a class="link_lev_0" href="" class="daddy">Category</a>

<ul>

<li class="cat_lev_1"><a class="link_lev_1" href="">Subcategory</a></li>

<li class="cat_lev_1"><a class="link_lev_1" href="">Subcategory</a></li>

</ul>

</li>

<li class="cat_lev_0"><a class="link_lev_0" href="" class="daddy">Category</a>

<li class="cat_lev_0"><a class="link_lev_0" href="" class="daddy">Category</a>

</ul>

This results in different behaviours in Firefox and IE when you try and configure the stylesheet.

 

Has anyone been able to fix this?

[bkellum]

Did you try Nate's version of the contribution? I've been using his with no issues at all.

 

 

[drofe1]

Nate's version gives the same result as Closing Tags Fix 2. The problem occurs when $show_full_tree is set to false and a category with sub-categories has been selected. In this case the parent doesn't get its closing </li> tag until after the nested unordered list for the children. That's fine, but what's missing is another bit of logic that specifies that the siblings of the selected category have closing /li> tags.

 

This is a problem because Firefox and IE treat the missing tags differently when styles are applied.

 

I've just found a discussion forum for this add-on, and probably should take this query over there!