Jump to content
npn2531

Horizontal Category Menu plugin, JQuery and/or CSS

Recommended Posts

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


Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

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;


Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Share this post


Link to post
Share on other sites

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


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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.


Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.


Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Share this post


Link to post
Share on other sites

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

Most Valuable OsCommerce Contributions:

Also Purchased (AP) Preselection (cuts this resource hogging query down to nothing) -- Contribution 3294

FedEx Automated Labels -- Contribution 2244

RMA Returns system -- Contribution 1136

Sort Products By Dropdown -- Contribution 4312

Ultimate SEO URLs -- Contribution 2823

Credit Class & Gift Voucher -- Contribution 282

Cross-Sell -- Contribution 5347

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

×