♥kymation Posted July 4, 2013 Share Posted July 4, 2013 (edited) 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 July 4, 2013 by kymation docauonline 1 Quote See my profile for a list of my addons and ways to get support. Link to comment Share on other sites More sharing options...
sunrise99 Posted July 5, 2013 Share Posted July 5, 2013 Thanks! Do you have any top menu module like this one? Quote Link to comment Share on other sites More sharing options...
npn2531 Posted July 7, 2013 Share Posted July 7, 2013 (edited) 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 July 7, 2013 by npn2531 Quote Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120 Link to comment Share on other sites More sharing options...
jcannaveno Posted July 9, 2013 Share Posted July 9, 2013 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 Quote Link to comment Share on other sites More sharing options...
♥joli1811 Posted July 9, 2013 Share Posted July 9, 2013 (edited) 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 July 9, 2013 by joli1811 Quote To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
♥kymation Posted July 9, 2013 Author Share Posted July 9, 2013 @@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 Quote See my profile for a list of my addons and ways to get support. Link to comment Share on other sites More sharing options...
jcannaveno Posted July 9, 2013 Share Posted July 9, 2013 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 Quote Link to comment Share on other sites More sharing options...
jcannaveno Posted July 9, 2013 Share Posted July 9, 2013 @@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 Quote Link to comment Share on other sites More sharing options...
♥kymation Posted July 9, 2013 Author Share Posted July 9, 2013 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 Quote See my profile for a list of my addons and ways to get support. Link to comment Share on other sites More sharing options...
♥joli1811 Posted July 10, 2013 Share Posted July 10, 2013 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; } Quote To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
♥joli1811 Posted July 10, 2013 Share Posted July 10, 2013 Hope a mod removes the first post wrong css soon have asked ?? regards Joli Quote To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
jcannaveno Posted July 10, 2013 Share Posted July 10, 2013 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 Quote Link to comment Share on other sites More sharing options...
♥kymation Posted July 10, 2013 Author Share Posted July 10, 2013 The arrows should show up with the current configuration. I've seen that problem before but still haven't isolated the cause. Regards Jim Quote See my profile for a list of my addons and ways to get support. Link to comment Share on other sites More sharing options...
♥altoid Posted July 11, 2013 Share Posted July 11, 2013 Don't forget to clear the cache when futzing with styling. Quote 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. Link to comment Share on other sites More sharing options...
jcannaveno Posted July 11, 2013 Share Posted July 11, 2013 Ok..please let me know as soon as you figure it out..thank you again Quote Link to comment Share on other sites More sharing options...
jcannaveno Posted July 18, 2013 Share Posted July 18, 2013 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 Quote Link to comment Share on other sites More sharing options...
♥kymation Posted July 18, 2013 Author Share Posted July 18, 2013 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 Quote See my profile for a list of my addons and ways to get support. Link to comment Share on other sites More sharing options...
tobybailey Posted July 20, 2013 Share Posted July 20, 2013 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 Quote Link to comment Share on other sites More sharing options...
♥kymation Posted July 20, 2013 Author Share Posted July 20, 2013 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 Quote See my profile for a list of my addons and ways to get support. Link to comment Share on other sites More sharing options...
discxpress Posted July 21, 2013 Share Posted July 21, 2013 (edited) @@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 July 21, 2013 by discxpress Quote Link to comment Share on other sites More sharing options...
♥kymation Posted July 21, 2013 Author Share Posted July 21, 2013 @@discxpress Use Firebug in Firefox to find out what styles are applied to each element. It will show you the line number and page to change. Regards Jim Quote See my profile for a list of my addons and ways to get support. Link to comment Share on other sites More sharing options...
♥joli1811 Posted July 21, 2013 Share Posted July 21, 2013 @@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 Hi Lecarl, I believe if I understand the question right and memory still working :) in the development phase the /includes/modules/boxes/bm_categories_superfish.php used the superfish.css for top level categories this was then changed to use the..... jQuery UI theme .....about post #55 http://www.oscommerce.com/forums/topic/393249-super-fish-navagation-menu-vertical-superfish/page__st__40 As it would be more suitable for most shops so if you downloaded an earlier version and compare and change about line 158 you would be able to use the superfish.css for top level instead of YOUR theme foreach( $data_array as $category ) { if( $category['parent_id'] == 0 ) { $output .= ' <li class="sf-menu sf-vertical ui-state-default ui-corner-all" onmouseover="$(\'a#categories\').removeClass(\'ui-state-default\').addClass(\'ui-state-hover ui-state-focus\');" onmouseout="$(\'a#categories\').addClass(\'ui-state-default\').removeClass(\'ui-state-hover ui-state-focus\'">' . PHP_EOL; } else { $output .= ' <li class="subcat">' . PHP_EOL; } need to be careful to compare and merge just the lines as there was a lot of work done later as regards cache etc have a read of the forum mentioned above and you will understand. regards Joli Quote To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
Awie Posted September 6, 2013 Share Posted September 6, 2013 Hi Jim... Thank you this great contribution. This is what I look for. I really really appreciate your work. I installed this on my site (wahanastore.com), and it works great. But I have some problems. Before install this add-on, I have also installed product cycle slideshow, PIM-osc slideshow and image zoom. Now they don't work. I guess the problem is caused by jQuery (mine is jquery-1.4.2.min.js). But I don't know how to solve this. I just copy jquery-1.10.1 to catalog/admin/ext/jquery without modify/delete the older version. You said about jquery-migrate plugin but I don't know how to install this plugin. I really need your help to fix these. Thank you.... Quote Link to comment Share on other sites More sharing options...
♥kymation Posted September 6, 2013 Author Share Posted September 6, 2013 This addon will help you upgrade your jQuery. Don't delete the old jQuery files as they are used by your Admin. Regards Jim Quote See my profile for a list of my addons and ways to get support. Link to comment Share on other sites More sharing options...
Awie Posted September 6, 2013 Share Posted September 6, 2013 Thanks for your fast reply, Jim. I have upgraded the jQuery to 1.10 as you said above. But my problems don't go away. Here is the script from admin/includes/template_top: <base href="<?php echo HTTP_SERVER . DIR_WS_ADMIN; ?>" /> <!--[if IE]><script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/flot/excanvas.min.js'); ?>"></script><![endif]--> <link rel="stylesheet" type="text/css" href="<?php echo tep_catalog_href_link('ext/jquery/ui/redmond/jquery-ui-1.10.3.css'); ?>"> <script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/jquery/jquery-1.10.1.min.js'); ?>"></script> <script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/jquery/ui/jquery-ui-1.10.3.min.js'); ?>"></script> And here is from includes/template_top: <meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" /> <?php include(DIR_WS_INCLUDES . 'easy_meta_tags.php'); ?> <title><?php echo tep_output_string_protected($oscTemplate->getTitle()); ?></title> <base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>" /> <link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.10.3.css" /> <script type="text/javascript" src="ext/jquery/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.10.3.min.js"></script> What is wrong? Regards, Wicara Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.