Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Super Fish Navagation Menu Vertical Superfish


Recommended Posts

@@altoid@@kymation

 

Hi ,

 

Steve could you test this stylesheet ?

 

I changed / added a bit a to suit oscommerce adding at the bottom a few bits of code to help better control text and

 

background colours for sub category's and a comment to explain what was being changed fell free to change the text if you

 

feel it could be better explained just trying to preempt the thousand questions in support :P I am also pleased to announce

 

that I have got my arrows turning on sub category so all in all a nice day :D

 

demo category textiles has 3rd level.

 

regards

Joli

superfish.css

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

 

Link to comment
Share on other sites

From a really quick test:

  • The menu is too wide for a stock osC store (At the top level).
  • The arrows don't appear. This has been a problem with my test store from the beginning, so it's probably something in my setup.

Everything else looks great.

 

Regards

Jim

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

Link to comment
Share on other sites

From a really quick test:

  • The menu is too wide for a stock osC store (At the top level).
  • The arrows don't appear. This has been a problem with my test store from the beginning, so it's probably something in my setup.

Everything else looks great.

 

Regards

Jim

@@kymation

@@altoid

 

Yes forgot I have width set to min-width: 205px; ( using a 1034 grid) so needs changed back to standard in stylesheet min-width: 148px;

 

strange with the arrows seeing on IE and Firefox .

 

Lets see what Steve has to say when he tests .

 

Regards

Joli

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

 

Link to comment
Share on other sites

I should have mentioned that was in Firefox 21 on Linux. An equally quick check in Chromium 25.0.1364.160 shows the same thing, so it's probably something in my store setup. Order of loading CSS/Javascript maybe?

 

Regards

Jim

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

Link to comment
Share on other sites

@@kymation

Do not think as I have changed my loading position CSS/Javascript a few times when I was optimizing site loading speeds with http://gtmetrix.com I have really a lot of jquery running on the site and had no problems are you sure you updated all the superfish files??.

 

Oh just done a quick test the loading script must be after as shown below if I put the function before my arrows also disappear

 

<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>

 

jQuery(document).ready(function(){

jQuery('ul.sf-menu').superfish();

});

 

</script>

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

 

Link to comment
Share on other sites

I used the template_top.php that's in my distribution package that I posted above. It's the same as yours except for the specification of the animation and delay in the function. Removing those doesn't bring the arrows back, so that's not it. I don't have any more bright ideas.

 

Regards

Jim

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

Link to comment
Share on other sites

@@kymation

@@joli1811

 

Checking in here...been spending time with a family member health matter situation for several days...will test out the code/changes from both of you, maybe tomorrow.

 

I decided to go with this live on a shop now being I'm so impressed by this menu and all. :)

 

John, one thing...can't find where I put the code in the wrong file....the navbar.php. If you can tell me where you see that please.

 

Cleaning up unnecessary files on github is on my to do list as well.

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

I used the template_top.php that's in my distribution package that I posted above. It's the same as yours except for the specification of the animation and delay in the function. Removing those doesn't bring the arrows back, so that's not it. I don't have any more bright ideas.

 

Regards

Jim

 

Strange one this I changed all files to your original files except for the superfish.css and still working perfect by me demo7 more or less clean install 2.33

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

 

Link to comment
Share on other sites

My test version is here. It has Modular Front Page installed and the jQuery files updated to the latest versions. The rest is stock. I still don't have any good ideas.

 

Regards

Jim

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

Link to comment
Share on other sites

@@kymation

@@joli1811

 

Checking in here...been spending time with a family member health matter situation for several days...will test out the code/changes from both of you, maybe tomorrow.

 

I decided to go with this live on a shop now being I'm so impressed by this menu and all. :)

 

John, one thing...can't find where I put the code in the wrong file....the navbar.php. If you can tell me where you see that please.

 

Cleaning up unnecessary files on github is on my to do list as well.

 

Noticed that part of the arrow code was in navbar.css at the very bottom but just leave as do not think matters to us.

 

The navbar.css is not called anyway in template.top as it is only used for horizontal menus so better just to leave.

 

Yes very impressed as well an added benefit I noticed was page speed loads times increased 3% when I used superfish instead of the accordian.

 

Ok have a test and see what you think change the comments I made at the bottom if you can describe better

 

regards

John

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

 

Link to comment
Share on other sites

.... page speed loads times increased 3% when I used superfish instead of the accordian....

 

That's really interesting, considering that the code that builds the categories tree is the same in both. In addition, the accordion menu is a native jQuery UI widget, while Superfish is an addon that requires 5 external files. Logic says that Superfish should be considerably slower.

 

So much for logic.

 

If you want to see a real improvement in load time, move all of your CSS files ahead of the Javascript files in template_top.php. The more external files you have the bigger the difference.

 

Regards

Jim

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

Link to comment
Share on other sites

My test version is here. It has Modular Front Page installed and the jQuery files updated to the latest versions. The rest is stock. I still don't have any good ideas.

 

Regards

 

Jim

 

 

Well Jim you can rule out the jquery files I updated on demo7 to the latest actually took from your test site so no mistakes there

 

<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>

 

also rechecked the stylesheets in web developer

 

going to install the modular front page maybe some conflict there so will get back to you later.

 

Regards

Joli

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

 

Link to comment
Share on other sites

I copied the HTML from your demo site and mine and compared them with Meld. The only difference I could find is the old fix from jQuery 1.8.0 that I had removed. I put it back, but still no arrows. I'm now even more puzzled.

 

Regards

Jim

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

Link to comment
Share on other sites

I copied the HTML from your demo site and mine and compared them with Meld. The only difference I could find is the old fix from jQuery 1.8.0 that I had removed. I put it back, but still no arrows. I'm now even more puzzled.

 

Regards

Jim

 

Installed the modular front page add on and then installed module product new on front page basically the same set up as you so this is getting weirder as as I rechecked and changed your stylesheets with web developer.

 

Only thing I can think did you change any thing in your bm_categories_superfish.php from the standard one that you uploaded?

 

Regards

John

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

 

Link to comment
Share on other sites

Everything is the same as what I uploaded. I tried your Superfish CSS file, but both yours and the one in my upload do the same thing. I'm going to give up on this for a while. It's just not making any sense right now.

 

Regards

Jim

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

Link to comment
Share on other sites

Everything is the same as what I uploaded. I tried your Superfish CSS file, but both yours and the one in my upload do the same thing. I'm going to give up on this for a while. It's just not making any sense right now.

 

Regards

Jim

 

Well if you want sometime you can zip your site and I will download and test on my server really is strange :D curiosity killed the cat haha

Regards

Joli

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

 

Link to comment
Share on other sites

That's really interesting, considering that the code that builds the categories tree is the same in both. In addition, the accordion menu is a native jQuery UI widget, while Superfish is an addon that requires 5 external files. Logic says that Superfish should be considerably slower.

 

So much for logic.

 

If you want to see a real improvement in load time, move all of your CSS files ahead of the Javascript files in template_top.php. The more external files you have the bigger the difference.

 

Regards

Jim

 

Wow went from 76% to 80% :thumbsup:

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

 

Link to comment
Share on other sites

  • The menu is too wide for a stock osC store (At the top level)

 

Same here on my shop in FF, chrome and IE

 

  • The arrows don't appear. This has been a problem with my test store from the beginning, so it's probably something in my setup.

 

Arrows do appear, sub cats as well as I believe you wanted them to.

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

Yes forgot I have width set to min-width: 205px; ( using a 1034 grid) so needs changed back to standard in stylesheet min-width: 148px;

 

strange with the arrows seeing on IE and Firefox .

 

 

Made that change and that fixed the width in the main category. Arrows behaving as you intended I believe John. Consistent through chrome, ff and IE.

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

 

If you want to see a real improvement in load time, move all of your CSS files ahead of the Javascript files in template_top.php. The more external files you have the bigger the difference.

 

 

well now i see that other js and css code in template_top is that way. how about that...changes to be made. thanks

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

Thanks to everyone who contributed to this....

 

Regards

Jim

 

Jim....thank you for sharing your knowledge and expertise with us. :thumbsup:

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

Hi Jim

 

Many thanks for all your hard work, and also to the others that help with suggestions etc

 

A big THANK YOU from NZ.

 

All the best

 

Grandpa

Link to comment
Share on other sites

  • 3 weeks later...

@@kymation

@@joli1811

@@altoid

 

One suggestion for shops with a lot of subcategories would be to load all the subcats in one box something like eBay's everything else category. Of course all the subcats will be linked. I'm not sure if the coding would be an inconvenience but that would help with larger shops.

 

 

Thanks for the great contrib.

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...