[Addon} Superfish Categories Box

[♥kymation]

In osCommerce, the first line of index,php (or any page for that matter) is in includes/template_top.php.

 

Regards

Jim

[Digibooks]

Thanks Jim .. I see your point so I moved the include to the first line of template_top.php but exactly the same thing is happening in Firefox and Chrome! I did even clear all the cookies and caches first. The weird thing is tha the links from the old site which did not use superfish but the standard oscommerce links did not do this. Going crazy here lol!!!!

[♥kymation]

Sorry, but that's the best I can do from here.

 

Regards

Jim

[Digibooks]

Thanks Jim .... what is now confusing me also is that an .htaccess/.htpassword on the directory has exactly the same effect ... superfish really does not like being protected!

[♥kymation]

That's likely a problem with the Superfish Javascript. I have no idea why that would happen, and I've never heard of anything like this before. Sorry, but I'm out of ideas.

 

Regards

Jim

[♥Tsimi]

i have a "vertical category box" in the left column and at the same time a "superfish horizontal menu", with tabs like "home", "products", "contact us" inside the header.

i would like to have 2 independent changable superfish menus. can i just copy "everything" that comes with kymations add-on and rename it to

something like xxxx2.php or xxxx2.js? would that alone work?

 

what i got so far is this:

i installed kymations add-on (Superfish Categories Box) and created a file called sf-horizontal.php and put that file inside the catalog/includes/modules folder.

i copied the superfish.css and called it superfish2.css (css files are inside the same folder)

 

my template_top.php looks like this (the superfish part)

<?php // Start superfish VERTICAL categories box ?>
<script type="text/javascript" src="ext/jquery/superfish/js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="ext/jquery/superfish/js/superfish.js"></script>
<script type="text/javascript" src="ext/jquery/superfish/js/supersubs.js"></script>
<link rel="stylesheet" media="screen" href="ext/jquery/superfish/css/superfish.css" />
<link rel="stylesheet" media="screen" href="ext/jquery/superfish/css/superfish-vertical.css">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('ul.sf-menu').superfish({
animation: {height:'show'}, // slide-down effect without fade-in
//animation: {opacity:'show', height:'show'}, // slide-down effect with fade-in
speed: 'fast', // speed of the opening animation.
speedOut: 'fast', // speed of the closing animation.
delay: 100 // 0.1 second delay on mouseout
});
});
</script>
<?php // End superfish VERTICAL categories box ?>

<?php // START superfish HORIZONTAL MENU ?>
<link rel="stylesheet" media="screen" href="ext/jquery/superfish/css/superfish2.css" />
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('ul.sf-menu sf-horizontal').superfish({ //remove the sf-horizontal to show arrows inside the menu
animation: {height:'show'}, // slide-down effect without fade-in
//animation: {opacity:'show', height:'show'}, // slide-down effect with fade-in
speed: 'fast', // speed of the opening animation.
speedOut: 'fast', // speed of the closing animation.
delay: 100 // 0.1 second delay on mouseout
});
});
</script>
<?php // END superfish HORIZONTAL MENU ?>

 

inside the header.php file i inserted following code:

<div class="clear"></div>
<?php
if ( file_exists(DIR_WS_MODULES.'sf_horizontal.php') ) {
require(DIR_WS_MODULES.'sf_horizontal.php');
}
?>
<div class="clear"></div>

 

and the sf-horizontal.php looks like this:

<ul class="sf-menu2">
<li>
<a href="mylink"><?php echo '' . TOP . ''; ?></a>
</li>
<li>
<a href="#"><?php echo '' . PRODUCTS . ''; ?></a>
<ul>
<li>
<a href="mylink"><?php echo '' . HARDWARE . ''; ?></a>
</li>
<li>
<a href="mylink"><?php echo '' . SOFTWARE . ''; ?></a>
</li>
<li>
<a href="mylink"><?php echo '' . DVD_MOVIES . ''; ?></a>
</li>
<li>
<a href="mylink"><?php echo '' . GADGETS . ''; ?></a>
</li>
</ul>
</li>
<li>
<a href="mylink"><?php echo '' . WHATS_NEW . ''; ?></a>
</li>
<li>
<a href="mylink"><?php echo '' . CONTACT_US . ''; ?></a>
</li>
</ul>

 

with the codes above the arrows won't show inside the horizontal menu or they show up but the style/design of the arrows is connected to the vertical menu .css.

right now i either "have" arrows but for that i can't change the design of the menu separately or i have "no" arrows but i can change the design of the menus separately.

[♥joli1811]

Hi Lambros,

 

Download the various example css

 

http://users.tpg.com.au/j_birch/plugins/superfish/

 

and then install web developer in your firefox browser on the left hand side there is a button edit css so you can edit and test your css to get the arrows working in your browser window without having to upoad and download a new css each time and working blind.

 

Lot quicker when you get a code that works just copy and paste.

 

Regards

Joli

[♥Tsimi]

Hi Joli

 

Thank you for your very helpful advice.

I think i messed up too much with the files so i'll reset once and reinstall everything from zero again.

 

Thanks again.

[♥kymation]

You are initializing both menus with ul.sf-menu, so the second one overrides the first and they are both the same. You need to give one of them a different class and change the stylesheet for it to match. Then either initialize them separately or use jQuery('ul.sf-menu, ul.sf-menu2').superfish({ if they can both be the same.

 

Regards

Jim

[♥Tsimi]

UPDATE:

 

Thanks to Joli and Jim i created now a basic menu and a so called megamenu with completely different styles.

 

http://imageshack.us/a/img189/6738/nmm8.jpg

 

As Jim suggested i gave them two different "ID"s and initialized them separately with

 

jQuery('#menu1').superfish({

 

<ul class="sf-menu2" id="menu1">

 

and

 

jQuery('#menu2').superfish({

 

<ul class="sf-menu" id="menu2">

 

Like this i can even give them separate options like fade-in or different speed.

Keeping their css files separately didn't work so i kept the superfish.css and added the megafish.css data inside the superfish.css, so now i have one css file for both menus.

As you can see in the image above i have also two different colors for the arrows (finally!).

(by adding <li class="sf2-arrows"> to the megamenu and add the definition inside the css)

 

There is only one last thing that bothers me a bit, the sfHover class! That is the class used to change the color of the arrows when mouseover the top tab. If i delete following part i have no mouseover effect if i leave it i can only define "one" color for both menu.

 

.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color: white;*/ /* IE8 fallback colour */
}

 

Changing it to sfHover2 or anything like that didn't work since the sfHover is defined inside the superfish.js and i have no clue

regarding javascript. I could live with it but it would have been great to have a perfect solution.

Now the next step would be to install Jims Add-On again and see if i can keep the two different styles.

 

One more thing, inside the add-on are following files

 

jquery-1.10.1.min.js

jquery-ui-1.10.3.min.js

and so on....do i need these 1.10.1 or 1.10.3 files?? I have the original .js files that come with osC 2.3.3.4 and have no problem so far with

the two menus installed right now.

 

Thanks again and kind regards

Lambros

 

P.S. WHY CAN I NOT ADD ANY THUMBNAIL IN THIS FORUM!?? <_< they just won't show up correctly even if i use the imageshack code.

Edited November 16, 2013 by Tsimi

[♥joli1811]

UPDATE:

 

Thanks to Joli and Jim i created now a basic menu and a so called megamenu with completely different styles.

 

http://imageshack.us/a/img189/6738/nmm8.jpg

 

As Jim suggested i gave them two different "ID"s and initialized them separately with

 

jQuery('#menu1').superfish({

 

<ul class="sf-menu2" id="menu1">

 

and

 

jQuery('#menu2').superfish({

 

<ul class="sf-menu" id="menu2">

 

Like this i can even give them separate options like fade-in or different speed.

Keeping their css files separately didn't work so i kept the superfish.css and added the megafish.css data inside the superfish.css, so now i have one css file for both menus.

As you can see in the image above i have also two different colors for the arrows (finally!).

(by adding <li class="sf2-arrows"> to the megamenu and add the definition inside the css)

 

There is only one last thing that bothers me a bit, the sfHover class! That is the class used to change the color of the arrows when mouseover the top tab. If i delete following part i have no mouseover effect if i leave it i can only define "one" color for both menu.

 

.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color: white;*/ /* IE8 fallback colour */
}

 

Changing it to sfHover2 or anything like that didn't work since the sfHover is defined inside the superfish.js and i have no clue

regarding javascript. I could live with it but it would have been great to have a perfect solution.

Now the next step would be to install Jims Add-On again and see if i can keep the two different styles.

 

One more thing, inside the add-on are following files

 

jquery-1.10.1.min.js

jquery-ui-1.10.3.min.js

and so on....do i need these 1.10.1 or 1.10.3 files?? I have the original .js files that come with osC 2.3.3.4 and have no problem so far with

the two menus installed right now.

 

Thanks again and kind regards

Lambros

 

P.S. WHY CAN I NOT ADD ANY THUMBNAIL IN THIS FORUM!?? <_< they just won't show up correctly even if i use the imageshack code.

 

PM your website

 

sf-arrows is only mentioned once in the superfish.js just wondering if adding menuArrowClass: 'sf-arrows2' would be enough to pull out the css

 

 

var methods = (function(){

// private properties and methods go here

var c = {

bcClass: 'sf-breadcrumb',

menuClass: 'sf-js-enabled',

anchorClass: 'sf-with-ul',

menuArrowClass: 'sf-arrows'

menuArrowClass: 'sf-arrows2'

},

******************************************************************

 

and changing / adding the css

 

 

/* styling for right-facing arrows */

.sf-arrows2 ul .sf-with-ul:after {

margin-top: -5px;

margin-right: -3px;

border-color: transparent;

border-left-color: #000000; /* edit this to suit design (no rgba in IE8) */

border-left-color: rgba(255,255,255,.8);

}

.sf-arrows2 ul li > .sf-with-ul:focus:after,

.sf-arrows2 ul li:hover > .sf-with-ul:after,

.sf-arrows2 .sfHover > .sf-with-ul:after {

border-left-color: black;

}

.sf-arrows2 > li li > .sf-with-ul:focus:after,

.sf-arrows2 > li li:hover > .sf-with-ul:after,

.sf-arrows2 > .sfHover > .sf-with-ul:after {

border-top-color: black; /* IE8 fallback colour */

}

.sf-arrows2 > ul > .sf-with-li:focus:after,

.sf-arrows2 > ul:hover > .sf-with-li:after,

.sf-arrows2 > .sfHover > .sf-with-li:after {

border-top-color: black; /* IE8 fallback colour */

}

/* styling for right-facing arrows */

.sf-arrows2 li .sf-with-ul:after {

margin-top: -5px;

margin-right: -3px;

border-color: transparent;

border-left-color: #FFFFFF; /* edit this to suit design (no rgba in IE8) */

border-left-color: rgba(255,255,255,.8);

}

 

sure it can be done just finding out how :D

Regards

Joli

[♥Tsimi]

Hi Joli :)

 

First thing i did was adding menuArrowClass: 'sf2-arrows' to the .js file and add the definitions to the css file. But it didn't work.

I solved it by adding a sf2-arrows class to the <li> tag inside the megamenu .php file (<li class="sf2-arrows">) and then add the definition, that looks similar to the one you postet, inside the css. The last issue left is the "mouseover" (sfHover) function. (that is what firebug is showing when i mouseover the menu tab with the arrow.)

 

.sf-arrows2 .sfHover > .sf-with-ul:after {

 

I have different colors for the arrows if i don't mouseover them. The choice i currently have left is either

have them have all the same ":hover" color or i deactivate the :hover function inside the css and have no mouseover effect on the arrows.

the text and anything else i can customize now as i like even each single arrow-color can be changed.

I have tried various possibilities for the "hover color" inside the css but no luck. the only thing i can think of is the sfHover definition inside the superfish.js file.

 

PM your website

 

I have no live shop (not yet!). Everything is installed local and running with XAMP. But it would be my pleasure to give you all files i have so far to try it out if you'd like.

The files you need are:

 

template_top.php

header.php

superfish folder with css and js files in it

sf-megamenu.php

sf-navmenu.php

 

i think that's about it.

Should i attach them here in this topic? or send you them via e-Mail?

 

kind regards

Lambros

Edited November 16, 2013 by Tsimi

[♥joli1811]

Yes mail them over I have a demo site with superfish category box already installed so can just drop the files on top mail address is on profile it is easier to work on a live site can use the webdeveloper tool to edit the css in the browser quicker that way.

Regards

Joli

[vanvoquan]

This is a very nice contribution. But anybody know how to limit level of subcategories? I want it to display only 1 level of subcategories. Any helps will be appriciated. thanks

[♥kymation]

Why do you want to limit your customer's ability to navigate to the products they are interested in? Sounds like a bad idea to me.

 

It's not going to be easy to restrict the categories to a particular level. The osCommerce database structure does not provide any way to easily determine the category level. You might be able to hide the lower categories using Superfish.

 

Regards

Jim

[♥Tsimi]

i'm sure you have your reason as too why you want to limit the browsing possibility for customers but you could just hide the second category area by adding

following code to your superfish.css

 

find

 

.sf-menu ul ul li {

}

 

and add display:none to it

 

.sf-menu ul ul li {

display:none;

}

 

the only problem left now are the arrows that show when there are more subcategories. since you are just "hiding" the 2nd subcategory the system still shows the arrows.

so go to your superfish.js file and look for (on line 19)

 

menuArrowClass: 'sf-arrows'

 

change to

 

menuArrowClass: ''

 

now all the arrows are gone. the thing is that there are no arrows on the main/first categories to show that there are subcategories.

sure not the cleanest way to do it but easy.

Edited December 6, 2013 by Tsimi

[nafri]

I like this menu.I want to put a link in header so this menu shows like this... is it possible..or shall i use another contrib ..

 

i want it to be like this..

 

http://www.morecomputers.com/extra.aspx?pn=0J22423

[♥Tsimi]

http://www.morecomputers.com/extra.aspx?pn=0J22423

 

the site is blank. maybe it's my browser, but i can't see nothing when i click that link.

[♥joli1811]

the site is blank. maybe it's my browser, but i can't see nothing when i click that link.

 

looking ok from here it is an aspx site not using superfish but suppose could be done with superfish using a bit of css and unordered category list

 

superfish dropdown is easy but the mega menu from the li would really take a bit of coding

 

not aware of any contribution that would give that effect except hard coded

 

The problem is to make generic for all for a specific site is ok but to get this flexible ??? (w00t)

 

Of course depends how far on you are now

 

@@Tsimi

 

:P

Edited December 7, 2013 by joli1811

[♥Tsimi]

i tried again with firefox, chrome, IE and my android smartphone chrome and standart browser, still can't see anything.

the tab shows the pages name and some sort of right facing arrow but that's it the main page is blank. anyway i don't want to solve my browser issues here.

if somebody could be so kind and post a screenshot of that page/menu i would be very thankful.

[♥kymation]

I posted a link to my solution here. It's a Superfish box and not the Megamenu that site is using, but that's what the OP wanted. I'm not aware of a Megamenu addon for osCommerce.

 

Regards

Jim

[jackhill]

Hi

 

I finally got superfish working and wanted to know if there is a way to add category and sub category hover over images

 

Something like on this site -> http://www.takealot.com/

 

Thanks

[Eduardo9350]

Please,

can i install the Superfish Categories Box in the 2.3.3.4 version ?

[♥joli1811]

Please,

can i install the Superfish Categories Box in the 2.3.3.4 version ?

 

Yes you can

[Eduardo9350]

In the admin side there is the following inconsistency graphics:

Edited December 25, 2013 by Eduardo9350