Horizontal Category Menu plugin, JQuery and/or CSS

[npn2531]

Horizontal Category Menu, JQuery and/or CSS

 

http://addons.oscommerce.com/info/7406

 

This easy to install plugin for the One Folder Template System,

http://addons.oscommerce.com/info/7403

will install a horizontal category drop-down menu in the header. The menu functions exactly as the menu in the categories box.

 

The menu will function in pure CSS or with smooth JQuery functioning. Menu is styled though a separate stylesheet.

 

Adapted from:

Category Box as Nested Unordered List for EZ(er) CSS & Dynamic menus v 1.00

http://addons.oscommerce.com/info/4201

 

and

 

Superfish Jquery Menu plugin

http://users.tpg.com.au/j_birch/plugins/superfish/#examples

[Guest]

Hy,

 

I have a question. I made a few other boxes on my site in the left column. I want to add these pages from the boxes to this horizontale menu.

 

Can you tell me how I can manage that?

 

Tanks in advance!

[PupStar]

Glad you did this as it turned out to be ideal for the site I am working on. :thumbsup:

 

Any ideas on how to remove the link to the top level category if it has subcategories.

 

I only want the link on the top level category if it does not contain subcategories.

 

Thanks

 

Mark

[npn2531]

To add a link (hard code an extra link) open includes/module/cat_navbar.php and change:

// Close off nested lists
   for ($nest = 1; $nest <= $GLOBALS['this_level']; $nest++) {
      //closing tags for entire list
       $output .= '</ul><!--close last subcat--></li></ul><!--close list-->';		
	}

	// EXTRA NONLIST LINKS BELOW
	$output.='';  	 
   return $output;

 

To:

 

// Close off nested lists
   for ($nest = 1; $nest <= $GLOBALS['this_level']; $nest++) {
      //closing tags for entire list
       $output .= '</ul><!--close last subcat--></li></ul><!--close list-->';		
	}

	// EXTRA NONLIST LINKS BELOW
	$output.='<li><a href="/link1">My hardcoded link</a></li><li><a href="/link2">another hardcoded link</a></li> ';  	 
   return $output;

[♥kymation]

The links shown can break session, causing your customer to lose their cart contents when they click on your link. They also have a single language embedded which breaks multi-language stores. To fix this, do it this way:

 

                // EXTRA NONLIST LINKS BELOW
               $output .='<li><a href="' . tep_href_link( FILENAME_FOO ) . '">' . MODULE_BOXES_CAT_BAR . '</a></li>';         

 

You can add multiple lines if you need multiple links. Add a definition in includes/filenames for FILENAME_FOO and one in each of your languages (includes/languages/<language>.php) for MODULE_BOXES_CAT_BAR. You can name those constants whatever you want, of course.

 

Regards

Jim

[npn2531]

Good catch. Yes, use the OSC function 'tep_href_link' instead of the standard html format for the reason given by Jim above.

[Guest]

Hey thx! Tomorrow night I'm gonna try to fix this. I think I understand how to make a submenu and so I will try first but when I fail I will be back ;)

[Guest]

I failed >_<

Can you help me to get a submenu? for example with 3 options: Contact Us/Business details /Conditions of Use in the third menu option after the categories.

 

This is as far as I came (ofcource I understand how I must add other options in the menu but not submenu's)

 

 // EXTRA NONLIST LINKS BELOW
               $output.='<ul class="'.$idname_for_menu.'"><li><a href="' . tep_href_link(FILENAME_CONTACT_US) . '">'. BOX_INFORMATION_CONTACT .'</a></li>
			<li><a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a></li>
			</ul> ';         
   return $output;

 

(and is it possible to have different options with different languages? Like leaving out Business details in dutch but have this option in english and espanol?)

 

On http://www.blauwedonders.nl/ga/index.php?cPath=185&language=en I have installed an example for the boxes on the left which must go to the head.

Edited March 31, 2011 by Swingy

[npn2531]

Actually you seem to be pretty close:

 

try moving the closing ul tags underneath the added link. In other words change it to this:

               // EXTRA NONLIST LINKS BELOW
               $output.='<li><li><a href="' . tep_href_link( FILENAME_FOO ) . '">' . ADD_LINK_ONE. '</a></li></li><li><a <li><a href="' . tep_href_link( FILENAME_FOO ) . '">' . ADDED_LINK_TWO . '</a></li></li> ';      

// Close off nested lists

for ($nest = 1; $nest <= $GLOBALS['this_level']; $nest++) {
      //closing tags for entire list
       $output .= '</ul><!--close last subcat--></li></ul><!--close list-->';          
               }   
   return $output;

 

I'm guessing here, you just have to experiment. Note also I have added, ADDED_LINK_ONE and ADDED_LINK_TWO. Those links you can define in your language files as needed.

[Guest]

Experimented and succeeded :thumbsup:

Thx for your help!

[Guest]

I have a next question :rolleyes:

I'm styling the menu and now the submenu's from the categories are slightly more to the right then the submenu's I added. When I adjust this with the code underneath also the submenu's from my menuoptions go to the left. How do I solve this?

 

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left:			0;
top:			2.1em; /* match top ul list item height */
z-index:		99;

 

(I adjust left:0; to left;-10; and then the submenu from the first two menuoptions are opening right under the menuoption. But the third submenu, and the rest, opens 10 px to much to the left. Hope you understand my explanation. for an example look on http://www.blauwedonders.nl/ga/index.php)

[npn2531]

It can be really tedious to work this kind of stuff out, lots of trial and error. To get the 2nd and 3rd levels to behave independently you may have to add additional selectors. Keep adding li's and/or ul's or break up combined selectors. For example this would address the 2nd level but not the first:

.sf-menu li li{
left:  0;
top:  2.1em;
}

 

(thats just off the top of my head, don't take it too literally)

 

To get the original code I got this from go here, and look at the CSS, it may help:

http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

Edited April 6, 2011 by npn2531

[artstyle]

Hi,

I would like to ask how to keep the menu in the same style when adding more links. For example, I added the code below which produced the link I wanted. However it didn't appear inside the horizontal menu but to the right of it and in a different style/font. How can I get it to appear inside the menu bar and pick up the same style as the other links in the menu?

Thank you in advance

 

// Close off nested lists

   for ($nest = 0; $nest <= $GLOBALS['this_level']; $nest++) {

  //if you need extra links uncomment out the lines below
 $output .= '</ul></li>';
  $output .= '<a href="' . tep_href_link( FILENAME_ALLPRODS_SEO ) . '">' . MODULE_BOXES_ALLPRODS_SEO_CATEGORIES . '</a>';		  

    $output .= '</ul>'; 
 }

   return $output;
}

[npn2531]

In your browser, click the option to 'view source' or 'view html'. Look at the menu, see if the <a>, <li> or <ul> in the menu links that are offset have styles applied, or not applied, that the menu links that are properly positioned do have. Then it is a process of figuring out why, usually a process of tedious trial and error. Remember that it is not hard to end up with style in a stylesheet high up in the stylesheet to be overridden by a style lower down the page.

[artstyle]

Thanks for your reply. I will give it a try.

[homewetbar]

GREAT PLUGIN! I've been waiting for something like this for years. THANK YOU!  :thumbsup:

 

The css that comes with it is a little bit broken though. 

 

You should add this class:

.sf-menu ul ul {

top: 0;

left: 100%;

}

 

and upgrade to the newest 1.11.1 jquery for touch support (2nd level devices won't work without that in the css I found)

 

 

Here is my entire CSS so far, for anyone that is having trouble with the included css, never could get the arrows to work though:

 

/*** ESSENTIAL STYLES ***/

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

}

.sf-menu li {

position: relative;

}

.sf-menu ul {

position: absolute;

display: none;

top: 100%;

left: 0;

z-index: 99;

}

.sf-menu > li {

float: left;

}

.sf-menu li:hover > ul,

.sf-menu li.sfHover > ul {

display: block;

}

 

.sf-menu a {

display: block;

position: relative;

}

.sf-menu ul ul {

top: 0;

left: 100%;

}

 

 

/*** DEMO SKIN ***/

.sf-menu {

float: left;

margin-bottom: 1em;

}

.sf-menu ul {

box-shadow: 2px 2px 6px rgba(0,0,0,.2);

min-width: 12em; /* allow long menu items to determine submenu width */

*width: 12em; /* no auto sub width for IE7, see white-space comment below */

}

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

}

.sf-menu a {

color: #13a;

}

.sf-menu li {

background: #BDD2FF;

white-space: nowrap; /* no need for Supersubs plugin */

*white-space: normal; /* ...unless you support IE7 (let it wrap) */

-webkit-transition: background .2s;

transition: background .2s;

}

.sf-menu ul li {

background: #AABDE6;

}

.sf-menu ul ul li {

background: #9AAEDB;

}

.sf-menu li:hover,

.sf-menu li.sfHover {

background: #CFDEFF;

/* only transition out, not in */

-webkit-transition: none;

transition: none;

}

 

/*** arrows (for all except IE7) **/

.sf-arrows .sf-with-ul {

padding-right: 2.5em;

*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */

}

/* styling for both css and generated arrows */

.sf-arrows .sf-with-ul:after {

content: '';

position: absolute;

top: 50%;

right: 1em;

margin-top: -3px;

height: 0;

width: 0;

/* order of following 3 rules important for fallbacks to work */

border: 5px solid transparent;

border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */

border-top-color: rgba(255,255,255,.5);

}

.sf-arrows > li > .sf-with-ul:focus:after,

.sf-arrows > li:hover > .sf-with-ul:after,

.sf-arrows > .sfHover > .sf-with-ul:after {

border-top-color: white; /* IE8 fallback colour */

}

/* styling for right-facing arrows */

.sf-arrows ul .sf-with-ul:after {

margin-top: -5px;

margin-right: -3px;

border-color: transparent;

border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */

border-left-color: rgba(255,255,255,.5);

}

.sf-arrows ul li > .sf-with-ul:focus:after,

.sf-arrows ul li:hover > .sf-with-ul:after,

.sf-arrows ul .sfHover > .sf-with-ul:after {

border-left-color: white;

}

 

[northway1]

Thank you for sharining link