Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Super Fish Navagation Menu Vertical Superfish


Recommended Posts

@@kymation

 

Hi Jim,

 

Got a test install done using mega fish and jsu updated the superfish files with the latest from git hub

 

https://github.com/joeldbirch/superfish

 

Used the mega fish.css cause he has a nice turning arrow :P well tested on ipod touch and he is working good so will test on another mobile device later as far as i can see he is working straight out of the box link to demo also works good in the vertical mode like your accordian menu by changing .sf-vertical in the superfish css .

 

so all in all think it is ready for a few live tests will use it in a live site I am building in a few weeks.

 

As regards the theme colours I personally think let superfish handle the css I think design wise it becomes a bit overpowering if there are a lot of categories IE: Accordion menu using the theme easy to make blend in so see no problem there.

 

The cache is important remember from the old superfish menu in ms2 that he generated a lot of queries.

 

Thanks for the file have been fiddling with this for months and just could not get to work.

 

Regards

Joli

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

 

Link to comment
Share on other sites

Used the mega fish.css cause he has a nice turning arrow :P well tested on ipod touch and he is working good so will test on another mobile device later as far as i can see he is working straight out of the box link to demo also works good in the vertical mode like your accordian menu by changing .sf-vertical in the superfish css .

 

tested John's link/site on android smartphone...menu works fine

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

@@kymation

@@joli1811

 

Updated the path issue and superfish files as per John's post...that took care of where the subcategories display...they are now displaying cleanly to the right then expand downward.

 

Lost my text wrap though on the main menu only..long category names go outside the main menu onto the body. Sub cats will expand to size of maximum cat title characters for that subset.

 

changed superfish.css white-space to normal and that took care of main category issue...all sub cats wrapping as well. might prefer sub cats to just expand rather than wrap though.

Edited by altoid

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

@@joli1811

Thanks for the bug report. I forgot to include the correct version of hoverIntent, so the path is correct but the file is missing.

 

@@altoid

Thanks for the test report. Can I have your file changes when you get this working? I'm busy with something else right now, but I would like to update this for everyone else to use.

 

Anyone else: Bug reports are always welcome. Please test this and post Your results/thoughts here.

 

Regards

Jim

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

Link to comment
Share on other sites

working on this over the next day or so...

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

Jim, I think John's point was that the download from github for superfish has hoverintent.js in the js folder along with the other js files.

Is ext/jquery/hoverintent/jquery.hoverIntent.minified.js the minified version of ext/jquery/superfish/js/hoverIntent.js?

I downloaded jquery.hoverIntent.minified.js and set that up as you indicated above. You can view it here just to make sure.

Or I can move it to ext/jquery/superfish/js/jquery.hoverIntent.minified.js and change template top accordingly.

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

Hoverintent was created by a different author than the one who created Superfish. I got both from the original author's repository when I first coded this, so I put them in separate directories. If Hoverintent is now being supplied from the Superfish repository, or is being modified to work with Superfish, then it would be best to put it in with the Superfish files.

 

I suggest using the minified version if possible.

 

Regards

Jim

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

Link to comment
Share on other sites

 

I suggest using the minified version if possible.

 

Regards

Jim

 

It looks like it's in with superfish now, or at least it came along with what I got off github as John indicated.

 

I'll place that in the superfish folder then with the minified version I downloaded and change application_top

 

Stay tuned....

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

@@altoid@@kymation

 

yes use both myself had a conflict I think it was when updating jquery to latest jquery-1.10.1.min.js

 

can not honestly remember anymore what exactly happened but ended up using x 2 hover intent as certain functions stopped working.

so basically have this now

 

<script type='text/javascript' src='ext/jquery/hover.intent.jquery.js'></script>

<link rel="stylesheet" media="screen" href="ext/superfish/superfish.css">

<script type='text/javascript' src='ext/superfish/superfish.js'></script>

<script type='text/javascript' src='ext/superfish/supersubs.js'></script>

<script type='text/javascript' src='ext/superfish/hoverIntent.js'></script>

 

Regards

 

Joli

 

Small point to think about may need x 2 css files one for right hand side category shop and x 1 for left hand side category shop.

 

I tried to get the option left and right in admin to work changed the files used part of category accordion as template but did not work.

 

Does work though if I install the normal category and then set to false so guessing somewhere in Jims new code it has to reference bm_categories_superfish

 

Below is the recommend hover intent

https://github.com/briancherne/jquery-hoverIntent

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

 

Link to comment
Share on other sites

@@joli1811

The column placement is a bug in the module code. Find this line:

 

$this->group = ((MODULE_BOXES_CATEGORIES_CONTENT_PLACEMENT == 'Left Column') ? 'boxes_column_left' : 'boxes_column_right');

 

and change it to this:

 

$this->group = ((MODULE_BOXES_CATEGORIES_SUPERFISH_CONTENT_PLACEMENT == 'Left Column') ? 'boxes_column_left' : 'boxes_column_right');

 

Regards

Jim

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

Link to comment
Share on other sites

not quite the same results here as John's....making that change to the module results in the superfish box going to the right side. Can't get it back over unless I remove the change.

 

With both the stock category box displayed and the superfish menu, I note the categories are ordered differently from the stock to superfish.

 

i got the version of hoverIntent John recommmended, minified it and placed that on github.

 

I think I have it all here: https://github.com/skleiner/sf-menu

 

which includes the updated js and css files for superfish.

 

so other than that left/right column issue above the site i have this on looks ok so far.

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

@@joli1811

I've written a few modules, so I've made most of the mistakes already. With that error there's only two places to look.

 

@@altoid

You also need to change the placement to Left Column in the admin panel for this module. The default and the rest of the acceptable values are wrong, so that needs to change as well. Line 61 should look like this:

 

 tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Placement', 'MODULE_BOXES_CATEGORIES_SUPERFISH_CONTENT_PLACEMENT', 'Left Column', 'Where should the module be loaded?', '6', '2', 'tep_cfg_select_option(array(\'Left Column\', \'Right Column\'), ', now())");

 

Regards

Jim

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

Link to comment
Share on other sites

Hi there,

 

Can someone tell me please where I can alter the min width from 148px to 185px. of the menu.

Other than the width this menu works well, for me

 

 

Many thanks

Grandpa

Link to comment
Share on other sites

@@kymation

 

@@altoid

 

Hi,

 

Maybe a liitle bit of topic but what do you guys think of the

 

http://blog.jquery.com/2013/05/08/jquery-migrate-1-2-1-released/

 

https://github.com/jquery/jquery-migrate#readme

 

Just discovered the jQuery Migrate TOOL a while back when trying to sort an issue / conflict I was getting between quick checkout ( by matt ) , categories accordion menu (j Jim ) and jquery-1.10.1.min.js. there is also a minified version.

 

solved the problem immediately you can see here on a test site if you view page source link I was testing various jquerys there

 

Basically was wondering if maybe it should be included in the package as jquery issues appear quite frequently on the forum and would guess more often as jquery is continually updated your opinions welcome.

 

I think it should be available somewhere as optional install as very useful.

 

 

Ps: what do you think of my little google map box you can see if you click on directions to store in top nav :) .

 

Regards

 

Joli

Edited by joli1811
To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

Hi there,

 

Can someone tell me please where I can alter the min width from 148px to 185px. of the menu.

Other than the width this menu works well, for me

 

 

Many thanks

Grandpa

 

Hi John,

 

about line 139 bm_categories_superfish.php here you can change the width

 

Regards

 

Joli

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

 

Link to comment
Share on other sites

Hi

 

Thanks for that.

The other thing I would like to change is the padding around the Category items, can't for the life of me find it. Prob obvious.

 

Cheers

Grandpa

.

Link to comment
Share on other sites

Hi

 

Thanks for that.

The other thing I would like to change is the padding around the Category items, can't for the life of me find it. Prob obvious.

 

Cheers

Grandpa

.

 

Hi,

 

You should look for this in superfish.css and change the em to suit

 

.sf-menu a {

border-left: 1px solid #fff;

border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */

border-top: 1px solid rgba(255,255,255,.5);

padding: .75em 1em;

text-decoration: none;

zoom: 1; /* IE7 */

}

 

regards

Joli@@grandpaj

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

 

Link to comment
Share on other sites

Hi

 

The only thing Ive noticed with my install is that there is no "heading" box like something that says, Categories or Products, although in the admin, the Title To Show in the Header says Products.

 

Hope this makes sense.

 

Cheers

 

Grandpa

Link to comment
Share on other sites

The Superfish menu that I posted above pushes the subcategories off to the right, saving the vertical space they would occupy in the box. Of course this won't help if you have too many top-level categories, or too many subcategories for that matter. It also doesn't show the category you are in when in a subcategory.

 

I would love to find a good solution for large stores that have lots of categories. I haven't found anything on any site that does everything right.

 

Regards

Jim

 

was just looking at the old categories.css model for ms2 at some stage the guys added a code to limit the number of products displayed

 

// cssMenu - Begin of configuration //

$cssMenuConfig = array();

$cssMenuConfig['ShowEmptyCategories'] = true;

$cssMenuConfig['includeProducts'] = false; // Should CSSMenu show products

$cssMenuConfig['maxProductsInMenu'] = 8; // Maximum number of products to show in a menu ( stops massive menus being created )

$cssMenuConfig['moreText'] = "More...."; // Maximum number of products to show in a menu ( stops massive menus being created )

$cssMenuConfig['showSubMenu'] = true; // Show category dependent menu

// $cssMenuConfig['idSubMenu'] = array('619', '620'); // Category id for the dependent menu

 

// cssMenu - End of configuration //

 

would that be an options for lots of categories if it was coded for categories instead of products of course no idea how that would effect google bots would they find the hidden categories?

Well just an idea maybe silly.

 

@@kymation

 

Regards

Joli

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

 

Link to comment
Share on other sites

Hi

 

The only thing Ive noticed with my install is that there is no "heading" box like something that says, Categories or Products, although in the admin, the Title To Show in the Header says Products.

 

Hope this makes sense.

 

Cheers

 

Grandpa

 

Yes see Jim has the code commented out do not know why. I personally prefer without the heading as the picture speaks for itself.

 

Removed the option from admin in the file I uploaded although forgot a small bit of code still have to remove.

 

Remember still beta !!

Edited by joli1811
To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

You also need to change the placement to Left Column in the admin panel for this module. The default and the rest of the acceptable values are wrong, so that needs to change as well. Line 61 should look like this:

 

Regards

Jim

 

So updated and that did it. Looking good.....

 

changed updated here https://github.com/skleiner/sf-menu/commit/89d99ab8eb4c638fe7e42525b3382fcf85760d3a

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...