Jump to content
sunrise99

[Addon] Superfish DropDown Menu on TOP header

Recommended Posts

This addon provides a Categories box styled with the jQuery Superfish plugin on TOP header.

 

you can download from here

 

 

Regards

Sunrise99

Edited by burt

Share this post


Link to post
Share on other sites

This also can be

Superfish Horizontal Category Menu, Jquery module , easy to install for everyone.

 

Any question and support you can post on here. Thanks!

Edited by sunrise99

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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>

Share this post


Link to post
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.

Share this post


Link to post
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).

Share this post


Link to post
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 fuhuojiang@gmail.com

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hi

Can some one tell me how I can change the head bar color from green and black to light grey and charcoal?

Many thanks in advance

Mitch;;

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×