Jump to content



Photo
- - - - -

[Addon} Superfish Categories Box


  • Please log in to reply
207 replies to this topic

#1   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 04 July 2013 - 03:18

This addon provides a Categories box styled with the jQuery Superfish plugin. Top-level categories are listed in the left or right column, and subcategories pop out to the side and down from each category. There is no limit to the number of subcategories or to the number of category levels. See a screenshot for an idea of what it looks like.

Thanks to everyone in this thread for the hep, advice, and testing of this Addon.

The download is here.

Regards
Jim

Edited by kymation, 04 July 2013 - 03:23.

See my profile for a list of my addons and ways to get support.


#2   sunrise99

sunrise99
  • Members
  • 216 posts
  • Real Name:David
  • Gender:Male
  • Location:HongKong

Posted 05 July 2013 - 04:41

Thanks!
Do you have any top menu module like this one?

#3   npn2531

npn2531
  • Members
  • 1,167 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 07 July 2013 - 18:16

This will work fine for 2.3 as a horizontal menu with a bit of adjustment in the html to place it nicely in the header.
http://addons.oscommerce.com/info/7541

The key feature of the above contribution is adapting btwd's conversion of the categories menu to an unordered list http://addons.oscommerce.com/info/4201 to jquery/superfish

Edited by npn2531, 07 July 2013 - 18:22.


#4   jcannaveno

jcannaveno
  • Members
  • 103 posts
  • Real Name:John Cannaveno

Posted 09 July 2013 - 19:57

first of all i would like to say that i feel like i've been a pain and i'm sorry for that..i've decided that this module is better for my website and have abandoned the accordion box..any tips on setting this up?..i have a custom theme loaded using your theme switcher module

#5   joli1811

joli1811

    Anybody seen this leprechaun say yeah !!

  • Members
  • 2,384 posts
  • Real Name:john dunlop
  • Gender:Male
  • Location:Ireland

Posted 09 July 2013 - 20:08

Hi John;

No you have not been a pain we need this addon wait a bit as there will be a few options shortly just an issue with a big bear.

regards
Joli

Edited by joli1811, 09 July 2013 - 20:09.

To improve is to change; to be perfect is to change often.

#6   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 09 July 2013 - 20:12

@jcannaveno
It's easy to install so just try it out. If you like the way it works, then we can help with styling. The top-level categories will use your theme, but the subcategories need to be adjusted in the CSS files.

Regards
Jim

See my profile for a list of my addons and ways to get support.


#7   jcannaveno

jcannaveno
  • Members
  • 103 posts
  • Real Name:John Cannaveno

Posted 09 July 2013 - 20:13

ok thank you..please keep me posted..i'm very anxious to load this module..it's what i've wanted my categories to do all along but up until now i have not seen any good modules that will do this..i downloaded the package it's just a little confusing to me as to how to install

#8   jcannaveno

jcannaveno
  • Members
  • 103 posts
  • Real Name:John Cannaveno

Posted 09 July 2013 - 20:30

@kymation

got it loaded..works great..everything seems to function properly..just need some help with the styling of the subcategories when they pop out..thank you so much

#9   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 09 July 2013 - 22:19

The styles are in catalog/ext/jquery/superfish/css/superfish.css. Use Firebug in Firefox to find the exact line you need to change in that file.

Regards
Jim

See my profile for a list of my addons and ways to get support.


#10   joli1811

joli1811

    Anybody seen this leprechaun say yeah !!

  • Members
  • 2,384 posts
  • Real Name:john dunlop
  • Gender:Male
  • Location:Ireland

Posted 10 July 2013 - 00:00

Hi '

AT OWN RISK

This is maybe not a clean code because I think a bit of css has to be removed up top but....to custimise the subs add this to bottom

/**** OSCOMMECE CUSTOMIZATION *****/

/*Optional coloured link when category visited for customer navigation purpose*/
.sf-menu a:visited {
color:#C13100;
}
/* box color for top-level menu items leave empty for your theme OSCOMMERCE to appear text colour comes from theme*/
.sf-menu li {
position: relative;
/* background: #BDD2FF;*/
}
/* background colour first level for menu background when the mouse hovers over 2nd level OSCOMMERCE*/
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
background: #FFA500;
outline: 0;
}
/* first level text colour when mouse on second level*/
.sf-menu > li:hover > a, .sf-menu > li.sfHover > a {
color: #ffffff;
}
/* Colour for text first level menu items when the mouse hovers over them OSCOMMERCE*/
.sf-menu li a:hover {
color: #fff !important;
}
/*Background colour 2nd level menu background*/
.sf-menu ul li {
background: #638B47;
}
/*Text colour for 2nd level menu*/
.sf-menu >ul li:hover a, .sf-menu > .sfHover a,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
color: #FFFbd0;
}
/* Optional text colour on hover 2nd level */
.sf-menu ul li a:hover {
color: #FFF6FB !important;
}
/*Background colour for 2nd level on hover*/
.sf-menu > li li:hover > a, .sf-menu > li li.sfHover > a {
background: #87be61;
}
.sf-menu ul li li {
/* Background colour for 3rd-level menu background */
background: #C23505 ;
}
/*Text colour for 3nd level menu level*/
.sf-menu >ul li:hover a, .sf-menu > .sfHover a,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
color: #FFFbd0;
}
/*Background colour for 3rd level on hover*/
.sf-menu > ul li li:hover > a, .sf-menu > li li li.sfHover > a {
background: #e33e05;
}
/* Optional text colour on hover 3nd level */
.sf-menu ul li li a:hover {
color: #DCFFF2!important;
}
To improve is to change; to be perfect is to change often.

#11   joli1811

joli1811

    Anybody seen this leprechaun say yeah !!

  • Members
  • 2,384 posts
  • Real Name:john dunlop
  • Gender:Male
  • Location:Ireland

Posted 10 July 2013 - 00:09

Hope a mod removes the first post

wrong css soon have asked ??

regards
Joli
To improve is to change; to be perfect is to change often.

#12   jcannaveno

jcannaveno
  • Members
  • 103 posts
  • Real Name:John Cannaveno

Posted 10 July 2013 - 16:27

It's all working great..firebug is an excellent tool that i never knew about..thank you for that..my last issue is that i don't seem to have any arrows..i can see arrows in your screenshot..and i see the section for the arrows in the css file but i'm not sure how to make them show up

#13   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 10 July 2013 - 19:35

The arrows should show up with the current configuration. I've seen that problem before but still haven't isolated the cause.

Regards
Jim

See my profile for a list of my addons and ways to get support.


#14   altoid

altoid
  • Members
  • 1,406 posts
  • Real Name:Steve
  • Gender:Male
  • Location:Hollidaysburg, Pennsylvania

Posted 11 July 2013 - 02:58

Don't forget to clear the cache when futzing with styling.
I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.
I remember what it was like when I first started with osC. It can be overwhelming.
However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.
There are several good pros here on osCommerce. Look around, you'll figure out who they are.

#15   jcannaveno

jcannaveno
  • Members
  • 103 posts
  • Real Name:John Cannaveno

Posted 11 July 2013 - 16:44

Ok..please let me know as soon as you figure it out..thank you again

#16   jcannaveno

jcannaveno
  • Members
  • 103 posts
  • Real Name:John Cannaveno

Posted 18 July 2013 - 15:33

Not sure if you saw the post in my other thread..but i fixed my no arrows problem by getting rid of an old jquery file

#17   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 18 July 2013 - 16:46

Incompatible versions of jQuery and various jQuery plugins can cause all sorts of weird errors. Removing duplicates and upgrading to the latest version will fix a number of problems.

You will probably also need to include jQuery Migrate if you are using version 1.9 or later of jQuery. It's available from the jQuery site.

Regards
Jim

See my profile for a list of my addons and ways to get support.


#18   tobybailey

tobybailey
  • Members
  • 58 posts
  • Real Name:Toby Bailey

Posted 20 July 2013 - 17:17

Superfish categories works fine with my lightly modified 2.3.3. But upgrading jquery has killed my jquery-created buttons (like Cart Contents at the top-right).

I see passing references to the problem but no soolution. I think all my jquery refs are now to 1.10 versions and that seems to be the only thing wrong.

I'd be grateful for a hint.

Toby

#19   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 9,643 posts
  • Real Name:Jim Keebaugh
  • Gender:Male
  • Location:Aberdeen WA USA

Posted 20 July 2013 - 17:37

As I mentioned in my previous post, you'll need to add jQuery Migrate to your site. You can get a copy from the jQuery site.

If that doesn't help, check that your theme is the same version as your copy of jQuery UI, and that your copy of jQuery is compatible with your jQuery UI.

Regards
Jim

See my profile for a list of my addons and ways to get support.


#20   discxpress

discxpress
  • Members
  • 525 posts
  • Real Name:Lecarl Butler
  • Gender:Male

Posted 21 July 2013 - 05:14

@kymation
I installed this contribution and it's working except I need help with styling. I would like to make the content that lists the categories just as wide as the box header. And I would like to adjust the background colors of the top level categories.

Thanks

Edited by discxpress, 21 July 2013 - 05:14.