Jump to content
Sign in to follow this  
fear4me

CSS Menu

Recommended Posts

There is nothing you can do about this. Flash and Quicktime movies sit on top of everything. Adding z-index will not work.

 

This is THE ONLY solution I have found:

 

http://blog.deconcept.com/swfobject/

 

It also tackles the IE issue for flash.

 

Good luck,

Sheri

 

 

If you have a flyout menu that is going UNDER your Flash movie, just add a parameter to the flash in the html file... like this:

wmode = transparent

 

That fixes it. You have to add it in a couple of places in the Flash code... but you'll get it... and thats definitely the fix... I searched for it years ago and have been using it ever since. Hope this helps! Neil

Share this post


Link to post
Share on other sites
Hi,

 

First thanks to Roger for CSS_MENU contribution. I did install it to my website. However, I couldn't find cache.php in /catalog/includes/cache.php

 

I am using MS2, 2.2 .

 

I am not familiar with CSS code, I would like to change the category list's background color can anyone tell me which one to change?

 

 

I found it in the FUNCTIONS folder. Catalog/includes/functions/cache.php

Must have been a typo

Share this post


Link to post
Share on other sites
Thanks...excellent contribution! :thumbsup:

 

Only problem i've got :

When i enable sts, my categories is not displaying correctly anymore.

 

With STS enabled i've edited file : sts_column_left.php (categories.php to categories_css.php)

 

When i disable STS, everything displays 100% again!

 

Any help!

 

Thanks

As noted above... if using STS,

you have to copy all the CSS code out of the php file in this cotribution and paste it into your actual CSS file. Then copy the javascript part (right after the CSS in the same file) and paste that into ALL your templates for STS. So...if you have built any additional templates for categories, or whatever, make sure you add the javascript to each of them, Then it will work fine with STS...

 

It doesnt matter, then if you leave the new php file as is, since it just wont get used... and if you ever DO turn off STS, at least it will be there, and still function properly.

 

Hope this helps someone. I am using it with STS and it looks great. Thanks for the fantastic contribution...saved a ton of headaches tring to style that ugly side menu.

 

Neil

Share this post


Link to post
Share on other sites

Hey All,

 

Great contribution! Any chance someone would be willing to fix the products addition so that the products change name based on the language id?...That is, English name in English, Spanish name in Spanish - like with the category names....

 

Cheers,

Yosh

Share this post


Link to post
Share on other sites
Yep... I'm trying to manage that....

Can someone explain me How to?

 

I'll release version 0.3 today, which includes the count-function and also includes the Aguzi-addition to show products in the menu, which I made also language-dependend.

 

Both will be available through settings in the categories_css.php . :thumbsup:

 

Fear4Me

Share this post


Link to post
Share on other sites
I'll release version 0.3 today, which includes the count-function and also includes the Aguzi-addition to show products in the menu, which I made also language-dependend.

 

Both will be available through settings in the categories_css.php . :thumbsup:

 

Fear4Me

 

I've just uploaded v0.3, which includes an optimized (multi-language) version of Fugazi's function to show products in the menu. It is also possible to add the option to show productcounter in categories, like the default osCommerce behaviour. This setting is inherited from the osCommerce admin panel (Show Category Counts). I also included the STS-instruction posted in this forum.

Share this post


Link to post
Share on other sites
As noted above... if using STS,

you have to copy all the CSS code out of the php file in this cotribution and paste it into your actual CSS file. Then copy the javascript part (right after the CSS in the same file) and paste that into ALL your templates for STS. So...if you have built any additional templates for categories, or whatever, make sure you add the javascript to each of them, Then it will work fine with STS...

 

It doesnt matter, then if you leave the new php file as is, since it just wont get used... and if you ever DO turn off STS, at least it will be there, and still function properly.

 

Hope this helps someone. I am using it with STS and it looks great. Thanks for the fantastic contribution...saved a ton of headaches tring to style that ugly side menu.

 

Neil

 

Hi Neil,

 

Just tried to install CSS Menu v0.3 according the docs and your post for copying the

css-code to my stylesheet.css and the java-script in my html-template for STS v4.3

(i use only 1 template for STS). On what place in the template the java-script has to be

copied in? Did all you and the doc subscribed but still don't get the CSS menu to show up...

Did i miss something?

 

Thanks for your help ;-)

 

Eric :D

Share this post


Link to post
Share on other sites

Hi great contrib so easy to install

 

Only problem i am having tho is making the top level width small enough.

 

my left column is 158px and right is 125px but I can only get the menu down to a few pixles bigger than 158.

 

would separate_column_widths_V2.2.zip contribution effect this ?

Share this post


Link to post
Share on other sites

Hi Neil,

 

Just tried to install CSS Menu v0.3 according the docs and your post for copying the

css-code to my stylesheet.css and the java-script in my html-template for STS v4.3

(i use only 1 template for STS). On what place in the template the java-script has to be

copied in? Did all you and the doc subscribed but still don't get the CSS menu to show up...

Did i miss something?

 

Thanks for your help ;-)

 

Eric :D

 

 

You jusy copy the javascript code into the HEAD section like this:

<HEAD>
<TITLE>Your site title</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link href="/yourStyleSheet.css" rel="stylesheet" type="text/css">

$headcontent

<script type="text/javascript">

//SuckerTree Vertical Menu (Aug 4th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
 var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
 }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

</script>
</HEAD>

 

This worked fine for me. Remember to add it to ALL your templates...if you use multiple ones. Then upload them to your catalog/includes/sts_templates/mysite directory

 

 

You will also need to make sure the path to your CCSS file is correct ( I just called it

<link href="/yourStyleSheet.css" rel="stylesheet" type="text/css">

above... fill in your own file name and path...and add the CSS stuff from the post to your css file... like this:

 

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 200px; /* Width of Menu Items */
border-bottom: 1px solid #EADE9D;
font-family: arial;
font-size: 11px;
}

.suckerdiv ul li{
position: relative;
background-color: #EADE9D;
}

/*1st level sub menu style */
.suckerdiv ul li ul{
left: 199px; /* Parent menu width - 1*/
position: absolute;
width: 200px; /*sub menu width*/
top: 0;
display: none;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul{ 
left: 199px; /* Parent menu width - 1*/
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li a{ 
left: 199px; /* Parent menu width - 1*/
background-color: #ddd;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li a{ 
background-color: #bbb;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li ul li a{ 
background-color: #aaa;
}

/* menu links style */
.suckerdiv ul li a{
display: block;
color: black;
text-decoration: none;
background-color: #EADE9D;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
line-height: 2em;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: #663333;
color: white;
text-decoration: none;
}

.suckerdiv ul li ul li a:hover{
background-color: #663333;
color: white;
text-decoration: none;
}

.suckerdiv ul li ul li ul li a:hover{
background-color: #663333;
color: white;
text-decoration: none;
}

/* The main categories with sub-categories */
.suckerdiv .subfolderstyle{
background: url(images/arrow-list.gif) no-repeat center right;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul .subfolderstyle {
background-color: #ddd;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul .subfolderstyle {
background-color: #bbb;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul li ul .subfolderstyle {
background-color: #aaa;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

 

This is my version, I changed a couple of colors...etc.. but you get the idea... just paste this to the bottom of whatever CSS file you already use.

 

Then, of course you will need to upload the php file from the posting...

 

I think thats it? Should work.... if it worked for me... it will work for you... I'm sure of it!

 

Neil

Share this post


Link to post
Share on other sites

Hi great contrib so easy to install

 

Only problem i am having tho is making the top level width small enough.

 

my left column (menu side)is 158px but I can only get the menu down to a few pixles bigger than 158. Even if i change the column width.

Any suggestions?

 

would separate_column_widths_V2.2.zip contribution effect this ?

 

 

here's the link to my site http://www.beckdale.com/catalog

constuctive critisism welcome

Share this post


Link to post
Share on other sites
Hi great contrib so easy to install

 

Only problem i am having tho is making the top level width small enough.

 

my left column (menu side)is 158px but I can only get the menu down to a few pixles bigger than 158. Even if i change the column width.

Any suggestions?

 

would separate_column_widths_V2.2.zip contribution effect this ?

here's the link to my site http://www.beckdale.com/catalog

constuctive critisism welcome

 

Hi,

 

You could try changing

 

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 155px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
font-family: arial;
font-size: 11px;
}

 

to something like:

 

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 120px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
font-family: arial;
font-size: 11px;
}

 

Maybe you could experiment by changing the width to a %-value, but a numeric-value would be more precise.

 

:thumbsup: Fear4Me :thumbsup:

Share this post


Link to post
Share on other sites
Hi great contrib so easy to install

 

Only problem i am having tho is making the top level width small enough.

 

my left column (menu side)is 158px but I can only get the menu down to a few pixles bigger than 158. Even if i change the column width.

Any suggestions?

 

would separate_column_widths_V2.2.zip contribution effect this ?

here's the link to my site http://www.beckdale.com/catalog

constuctive critisism welcome

 

 

I think thats the way to go... you should make the width 100%... it looks crowded now. But also make sure that the flyouts are set to the distance = to 158px, or whatever your side menu width is. I think it comes set to 200, which is why they are floating farthur away than they should. At least thats my 2 cents. :rolleyes:

Share this post


Link to post
Share on other sites
Thanks for your help

 

i can change the flyout no probs ive attached another image for you too look at hopefully it will make my problem more clear.

 

http://www.beckdale.com/image/preview2.jpg

 

thanks for your help.

 

If you select your text, you will notice there is a white "1" just before your categories-image which is the cause of the space.

Share this post


Link to post
Share on other sites
I'll release version 0.3 today, which includes the count-function and also includes the Aguzi-addition to show products in the menu, which I made also language-dependend.

 

Both will be available through settings in the categories_css.php . :thumbsup:

 

Fear4Me

 

I tried this version. It has same problem in Firefox 2.0. It always show the first sub-menu in spite of which menu I pointed. Please visit http://www.kanzazhi.com/catalog/index_t.php. Thank you.

 

1.gif

Edited by tallwang

Share this post


Link to post
Share on other sites
You jusy copy the javascript code into the HEAD section like this:

<HEAD>
<TITLE>Your site title</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link href="/yourStyleSheet.css" rel="stylesheet" type="text/css">

$headcontent

<script type="text/javascript">

//SuckerTree Vertical Menu (Aug 4th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
 var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
 }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

</script>
</HEAD>

 

This worked fine for me. Remember to add it to ALL your templates...if you use multiple ones. Then upload them to your catalog/includes/sts_templates/mysite directory

You will also need to make sure the path to your CCSS file is correct ( I just called it

<link href="/yourStyleSheet.css" rel="stylesheet" type="text/css">

above... fill in your own file name and path...and add the CSS stuff from the post to your css file... like this:

 

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 200px; /* Width of Menu Items */
border-bottom: 1px solid #EADE9D;
font-family: arial;
font-size: 11px;
}

.suckerdiv ul li{
position: relative;
background-color: #EADE9D;
}

/*1st level sub menu style */
.suckerdiv ul li ul{
left: 199px; /* Parent menu width - 1*/
position: absolute;
width: 200px; /*sub menu width*/
top: 0;
display: none;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul{ 
left: 199px; /* Parent menu width - 1*/
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li a{ 
left: 199px; /* Parent menu width - 1*/
background-color: #ddd;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li a{ 
background-color: #bbb;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li ul li a{ 
background-color: #aaa;
}

/* menu links style */
.suckerdiv ul li a{
display: block;
color: black;
text-decoration: none;
background-color: #EADE9D;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
line-height: 2em;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: #663333;
color: white;
text-decoration: none;
}

.suckerdiv ul li ul li a:hover{
background-color: #663333;
color: white;
text-decoration: none;
}

.suckerdiv ul li ul li ul li a:hover{
background-color: #663333;
color: white;
text-decoration: none;
}

/* The main categories with sub-categories */
.suckerdiv .subfolderstyle{
background: url(images/arrow-list.gif) no-repeat center right;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul .subfolderstyle {
background-color: #ddd;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul .subfolderstyle {
background-color: #bbb;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul li ul .subfolderstyle {
background-color: #aaa;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

 

This is my version, I changed a couple of colors...etc.. but you get the idea... just paste this to the bottom of whatever CSS file you already use.

 

Then, of course you will need to upload the php file from the posting...

 

I think thats it? Should work.... if it worked for me... it will work for you... I'm sure of it!

 

Neil

 

Hi Neil,

 

I did exactly what you wrote.... but nope, no CSS menu...

I get a blank screen with only the word: categories in it.

It seems that STS doesn't capture the CSS menu output.

 

Any other suggestion?

 

Thanks,

Eric :(

Share this post


Link to post
Share on other sites
You jusy copy the javascript code into the HEAD section like this:

<HEAD>
<TITLE>Your site title</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link href="/yourStyleSheet.css" rel="stylesheet" type="text/css">

$headcontent

<script type="text/javascript">

//SuckerTree Vertical Menu (Aug 4th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas


function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
 var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
 }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

</script>
</HEAD>

 

This worked fine for me. Remember to add it to ALL your templates...if you use multiple ones. Then upload them to your catalog/includes/sts_templates/mysite directory

You will also need to make sure the path to your CCSS file is correct ( I just called it

<link href="/yourStyleSheet.css" rel="stylesheet" type="text/css">

above... fill in your own file name and path...and add the CSS stuff from the post to your css file... like this:

 

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 200px; /* Width of Menu Items */
border-bottom: 1px solid #EADE9D;
font-family: arial;
font-size: 11px;
}

.suckerdiv ul li{
position: relative;
background-color: #EADE9D;
}

/*1st level sub menu style */
.suckerdiv ul li ul{
left: 199px; /* Parent menu width - 1*/
position: absolute;
width: 200px; /*sub menu width*/
top: 0;
display: none;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul{ 
left: 199px; /* Parent menu width - 1*/
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li a{ 
left: 199px; /* Parent menu width - 1*/
background-color: #ddd;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li a{ 
background-color: #bbb;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li ul li a{ 
background-color: #aaa;
}

/* menu links style */
.suckerdiv ul li a{
display: block;
color: black;
text-decoration: none;
background-color: #EADE9D;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
line-height: 2em;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: #663333;
color: white;
text-decoration: none;
}

.suckerdiv ul li ul li a:hover{
background-color: #663333;
color: white;
text-decoration: none;
}

.suckerdiv ul li ul li ul li a:hover{
background-color: #663333;
color: white;
text-decoration: none;
}

/* The main categories with sub-categories */
.suckerdiv .subfolderstyle{
background: url(images/arrow-list.gif) no-repeat center right;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul .subfolderstyle {
background-color: #ddd;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul .subfolderstyle {
background-color: #bbb;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul li ul .subfolderstyle {
background-color: #aaa;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

 

This is my version, I changed a couple of colors...etc.. but you get the idea... just paste this to the bottom of whatever CSS file you already use.

 

Then, of course you will need to upload the php file from the posting...

 

I think thats it? Should work.... if it worked for me... it will work for you... I'm sure of it!

 

Neil

 

Hi Neil,

 

Have it working now, i just renamed categories_css.php to categories.php ;-)

And of course did all the changes you wrote.

 

Thanks again,

Eric :D :D :D

Share this post


Link to post
Share on other sites
I tried this version. It has same problem in Firefox 2.0. It always show the first sub-menu in spite of which menu I pointed. Please visit http://www.kanzazhi.com/catalog/index_t.php. Thank you.

 

Hi Tallwang...

 

I suppose you have setup ShowEmptyCategories to false?

 

I can reproduce the same error at our test-server.

 

To fix this problem, please search for:

 

	  if ($parentID == 0) $returnval .= "</div>";
  return $returnval;

 

And change this to:

 

	  if ($parentID == 0) $returnval .= "</div>";
  return str_replace("<ul></ul>", "", $returnval);

 

You just have to copy the second line, because there is no change in the first line, but I've copied it because there are two lines containing return $returnval;

 

This fix will be included in the next release.

 

Hopefuly this works for you...

 

:thumbsup: Fear4Me :D

Share this post


Link to post
Share on other sites
Hi Neil,

 

Have it working now, i just renamed categories_css.php to categories.php ;-)

And of course did all the changes you wrote.

 

Thanks again,

Eric :D :D :D

 

I thought i had it working, tested the menu in a old test-shop with a few categories

and STS 4.2... worked fine. Now i installed the css menu in my real shop with a lot

of categories/subcategories and STS 4.3 and nope, not working... :'( :'( :'(

Did exactly the same changes as in the old test-shop...

Only a blank page shows up with the word categories in the upper left of the screen, nothing more...

 

Has it something to do with STS 4.3 maybe? Strange...

 

Cheers,

Eric :D

Edited by Dynatech

Share this post


Link to post
Share on other sites
I thought i had it working, tested the menu in a old test-shop with a few categories

and STS 4.2... worked fine. Now i installed the css menu in my real shop with a lot

of categories/subcategories and STS 4.3 and nope, not working... :'( :'( :'(

Did exactly the same changes as in the old test-shop...

Only a blank page shows up with the word categories in the upper left of the screen, nothing more...

 

Has it something to do with STS 4.3 maybe? Strange...

 

Cheers,

Eric :D

 

Did you follow the CSSmenu-instructions? Or only the STS-instructions? Because you have to change the pointer to categories_css.php.

Share this post


Link to post
Share on other sites
Did you follow the CSSmenu-instructions? Or only the STS-instructions? Because you have to change the pointer to categories_css.php.

 

Hi Roger,

 

Yes i did follow all the instructions, only renamed categories_css.php to categories.php.

Works in STS 4.2, not in 4.3... maybe it has something to do with the extra code for

infoboxes added in STS 4.3?

 

Cheers,

Eric :D

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×