npn2531 Posted May 16, 2010 Share Posted May 16, 2010 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 Quote Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120 Link to comment Share on other sites More sharing options...
Guest Posted March 25, 2011 Share Posted March 25, 2011 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! Quote Link to comment Share on other sites More sharing options...
PupStar Posted March 27, 2011 Share Posted March 27, 2011 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 Quote Link to comment Share on other sites More sharing options...
npn2531 Posted March 28, 2011 Author Share Posted March 28, 2011 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; Quote Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120 Link to comment Share on other sites More sharing options...
♥kymation Posted March 28, 2011 Share Posted March 28, 2011 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 Quote See my profile for a list of my addons and ways to get support. Link to comment Share on other sites More sharing options...
npn2531 Posted March 28, 2011 Author Share Posted March 28, 2011 Good catch. Yes, use the OSC function 'tep_href_link' instead of the standard html format for the reason given by Jim above. Quote Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120 Link to comment Share on other sites More sharing options...
Guest Posted March 28, 2011 Share Posted March 28, 2011 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 ;) Quote Link to comment Share on other sites More sharing options...
Guest Posted March 31, 2011 Share Posted March 31, 2011 (edited) 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 Quote Link to comment Share on other sites More sharing options...
npn2531 Posted March 31, 2011 Author Share Posted March 31, 2011 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. Quote Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120 Link to comment Share on other sites More sharing options...
Guest Posted April 1, 2011 Share Posted April 1, 2011 Experimented and succeeded :thumbsup: Thx for your help! Quote Link to comment Share on other sites More sharing options...
Guest Posted April 6, 2011 Share Posted April 6, 2011 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) Quote Link to comment Share on other sites More sharing options...
npn2531 Posted April 6, 2011 Author Share Posted April 6, 2011 (edited) 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 Quote Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120 Link to comment Share on other sites More sharing options...
artstyle Posted February 16, 2014 Share Posted February 16, 2014 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; } Quote Link to comment Share on other sites More sharing options...
npn2531 Posted February 17, 2014 Author Share Posted February 17, 2014 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 1 Quote Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120 Link to comment Share on other sites More sharing options...
artstyle Posted February 18, 2014 Share Posted February 18, 2014 Thanks for your reply. I will give it a try. Quote Link to comment Share on other sites More sharing options...
homewetbar Posted August 22, 2014 Share Posted August 22, 2014 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; } Quote 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 Link to comment Share on other sites More sharing options...
northway1 Posted March 14 Share Posted March 14 Thank you for sharining link Quote Driving School Mill Park Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.