Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

[Addon] Superfish DropDown Menu on TOP header


sunrise99

Recommended Posts

looks really nice. :thumbsup: I really like how the subcategory's pop out. I tried to use this on my site but i couldn't get the spacing correct and it made my image sizer on the products page stop working for some reason.

Is this something that could work in place of my categories box?

Link to comment
Share on other sites

  • 2 weeks later...

Hello, can you explain more on the installation steps?

 

after i made changes to header.php and template_top.php in my /includes folder.

AND

i also transferred all the new files into my /shop/catalog

 

I do not see any modules that can be installed in my admin page? on my website, it's just a bar with the home icon, how do i install this correct and create my own drop down menu?

 

Regards,

 

/*
This is Superfish  DropDown Menu on TOP
NOTE:
This is the modified stylesheet from Superfish v1.4.8 – jQuery menu plugin by Joel Birch
www.sunrisebook.com
All Template is only  39USD!!!!
*/

1) open includes/template_top.php
add the following:
<script type="text/javascript" src="ext/js/superfish.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/superfish.css" />
<script type="text/javascript" src="ext/js/js.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $('.custom_select form').jqTransform();
  $("ul.sf-menu").superfish({
   pathClass:  'current',
   delay:	 1000,
   animation:   {opacity:'show',height:'show'},
   speed:	   'slow',
   autoArrows:  true,
   dropShadows: true
  });

 });
</script>
2) open includes/header.php
add the following where you want to this menu display:
<div class="cat_navbar">
<div class="navbar_bg"><a class="home" href="<?php echo tep_href_link(FILENAME_DEFAULT); ?>"><strong></strong></a>
<?php include(DIR_WS_MODULES . 'superfish.php'); ?>
</div>
</div>

Link to comment
Share on other sites

Hello, can you explain more on the installation steps?

 

after i made changes to header.php and template_top.php in my /includes folder.

AND

i also transferred all the new files into my /shop/catalog

 

I do not see any modules that can be installed in my admin page? on my website, it's just a bar with the home icon, how do i install this correct and create my own drop down menu?

 

Regards,

 

/*
This is Superfish DropDown Menu on TOP
NOTE:
This is the modified stylesheet from Superfish v1.4.8 – jQuery menu plugin by Joel Birch
www.sunrisebook.com
All Template is only 39USD!!!!
*/

1) open includes/template_top.php
add the following:
<script type="text/javascript" src="ext/js/superfish.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/superfish.css" />
<script type="text/javascript" src="ext/js/js.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.custom_select form').jqTransform();
$("ul.sf-menu").superfish({
pathClass: 'current',
delay:	 1000,
animation: {opacity:'show',height:'show'},
speed:	 'slow',
autoArrows: true,
dropShadows: true
});

});
</script>
2) open includes/header.php
add the following where you want to this menu display:
<div class="cat_navbar">
<div class="navbar_bg"><a class="home" href="<?php echo tep_href_link(FILENAME_DEFAULT); ?>"><strong></strong></a>
<?php include(DIR_WS_MODULES . 'superfish.php'); ?>
</div>
</div>

 

This is superfish dropdown, you don't really need admin control.

Link to comment
Share on other sites

@@ken0306

 

Thanks for your reply.

 

please take a look

 

oxytarm-ap.com/shop/catalog/

 

How do i edit the menu then? Please guide me.

 

am green with envy to change the design to something like "evolution-slimming.******com/ (remove ****** to see)

 

- have a nice background to my header, focusing on my brand and spreading across the screen (filling up the grid, edge to edge)

- nice fonts

- new 3 buttons, beautiful icons

- nice drop down menu

 

Any ideas? (I am so happy that i found this superfish and i hope i can incorporate this to my design.

 

I think a professional feel to a ecommerce website lies greatly in the header and footer (my next project).

Link to comment
Share on other sites

@@ken0306

 

Thanks for your reply.

 

please take a look

 

oxytarm-ap.com/shop/catalog/

 

How do i edit the menu then? Please guide me.

 

am green with envy to change the design to something like "evolution-slimming.******com/ (remove ****** to see)

 

- have a nice background to my header, focusing on my brand and spreading across the screen (filling up the grid, edge to edge)

- nice fonts

- new 3 buttons, beautiful icons

- nice drop down menu

 

Any ideas? (I am so happy that i found this superfish and i hope i can incorporate this to my design.

 

I think a professional feel to a ecommerce website lies greatly in the header and footer (my next project).

 

your demo link is Mega Menu , seems no free module on here now. you can send email to me and let us talk [email protected]

Link to comment
Share on other sites

@@sunrise99

 

hi there

 

somebody from the german osC forum says the the sf-menu_marker.png is missing and not inside the add-on package.

if you could upload it as attachment here then i could redirect him to this topic or you could just upload the icon to your add-on through the add-ons section.

thank you.

Link to comment
Share on other sites

  • 9 months later...

Hello,

 

thanks for the nice dropdown menu. I have a question and I hope you can help me out.

Actually the menu shows all categories in the header.

 

Just like this:

 

Main categories -> sub categories

 

A -> aa

B -> bb

C -> cc

D -> dd

 

= so in header you see A / B / C / D

 

But I want to change this as I already have my header, so it would be great if we can go one step higher in the categories -> to the name: departments

 

So I explain:

 

My header is already finished like this:  Home  / Shipment / Cart / Contact

 

So I want to add Departments and when you click on departments the superfish menu opens underneath and started with A / B / C / D

 

Like this  Home  / Departments / Shipment / Cart / Contact

                                 I

                                 I

                                 I-> A / B / C / D

                                       I    I     I    I

                                       I    I     I    I

                                     aa  bb  cc dd

 

Any ideas how I can manage this?

Thanks for helping out and you ideas.

Link to comment
Share on other sites

  • 2 years later...

Hi there.

 

Great contribution, tks a lot!

 

I installed it successfuly on v2.3.4, but there's a little glitch: it conflicts with image popup on product's page so nothing happens when I click to enlarge product's image.

 

This is the part of the code that is causing the issue. It's on template_top.php.

<script type="text/javascript">
$(document).ready(function(){
$('.custom_select form').jqTransform();
$("ul.sf-menu").superfish({ 
pathClass:  'current',
delay:     1000,
animation:   {opacity:'show',height:'show'},
speed:       'slow',
autoArrows:  true,
dropShadows: true
}); 


});
</script> -->

If I remove that, image pop up works fine, so does the menu, but I'm not sure if it will cause unknown issues.

 

Can anybody help fixing that pretty pleeeease?

 

TIA! :)

Edited by Patty

Patty

Link to comment
Share on other sites

  • 4 months later...

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