Jump to content

Recommended Posts

@@Dan Cole

@@ArtcoInc Malcolm are you working with Rainer's/Walker's/Whitehat's code as show in this thread?  I have it working if it helps...

 

http://forums.oscommerce.com/topic/398284-oscommerce-23-bootstrap-nav-menu/?p=1726334

 

Dan

 

Dan,

 

If you have a working drop-in nb_module, I'd love to see it! Thanks!

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@@Dan Cole

 

Dan,

 

If you have a working drop-in nb_module, I'd love to see it! Thanks!

 

Malcolm

 

@@ArtcoInc I'll pm you a link Malcolm but it may or may not be of any help to you.  I don't know if it'll make a difference but my drop down categories are actually on the links bar and not the nav bar.

 

Dan

Share this post


Link to post
Share on other sites

@@ArtcoInc

 

Hi Malcolm

 

Here quick and dirty but it works.

 

Catmenu Module.zip

 

I just added the functions code, css styles and jquery script inside one file. Could be separated or put inside the modules file and not inside the template file.

Edited by Tsimi

Share this post


Link to post
Share on other sites

Here quick and dirty but it works.

 

attachicon.gifCatmenu Module.zip

 

I just added the functions code, css styles and jquery script inside one file. Could be separated or put inside the modules file and not inside the template file.

@@Tsimi

 

This works perfectly! Thank you :thumbsup:

 

One *tiny* favor ...    o:)   In your original code:

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

there were options to include a Category Parent Link, and a Category Divider. I use the Category Parent Link on my site(s), as I have a lot of information about the products/categories on those pages. I see that this new code is quite different than the original code. How difficult would it be to add these additional features?

 

Thank you VERY much! :)

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@@ArtcoInc

 

The code I used is the one from De Dokta which, unfortunately, doesn't include the top categories feature.

Not even sure how to implement this at the moment.

My horizontal menu on the other hand has that but it would probably spread out over the whole navbar since all top categories are open from the beginning.

 

I need to have more play time with it maybe it is possible to get it done with one of the 2 menus.

Share this post


Link to post
Share on other sites

Side note:

 

Forgot to remove the FILENAME_ definitions.

 

File: ..../templates/catmenu.php

Line 30 and 45 change FILENAME_DEFAULT to 'index.php'.

Share this post


Link to post
Share on other sites

I want to thank @@Tsimi for both this add-on ( http://addons.oscommerce.com/info/9375 ), and the version he sent me (based on De Dokta's code). While De Dokta's code worked, there was one feature in the original code (based on @@GLWalker 's code) that I wanted. So, I think I've finally been able to convert it to a NavBar module.  :)

 

No instructions .. just copy the new code in place and install through admin. No core changes.

 

NavBar Horizontal Categories Menu BS.zip

 

Notes:

 

1) I have made a *tiny* edit to the file  /includes/classes/catmenu.php . So, if you have already installed @@Tsimi 's version, this installation will overwrite his file. This should not cause a problem ... all I did was clean up one line of code. Or, you can use @@Tsimi 's version. :thumbsup:

 

2) I'm having a CSS issue where, after the drop-down menu drops down, when you mouse over a selection, the selection whites out. I'm still working on this, but if anyone comes up with a solution, please let me know. B)

 

3) I used @@GLWalker 's original code on a site I built over a year ago, where when each successive drop-down opened, it was shifted to the right. I'm not sure how I did that then, but I'm looking to add that to this module (when and if I can). :-

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

First of all its a great addon. Thank you Tsimi !

 

I needed a HOME button, right on the very left and before the main categories. If eneyone else needs one, keep reading

 

In
catalog\include\modules\content\header\templates\catmenu.php

*******************
1)  find the code

<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <i class="fa fa-chevron-down"></i> <?php echo TEXT_COLLAPSE_MENU; ?>
        </button>

and just below, add

<a class="navbar-brand" href="#"> <?php echo TEXT_HOME; ?></a>

*********************

2) go to your active catalog languages and add thw following line ( this is for english.php )

define('TEXT_HOME', '<font size="3" color="#ffec80">HOME</font>');

 

 

The end !

Edited by 29gk

Share this post


Link to post
Share on other sites

I love how this has come along. Amazing what can happen by leaving code snippets laying around a forum. :thumbsup:


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

@@ArtcoInc

 

Is it the text or onHover color that changes incorrectly, either way, have you just simply marked that particular element in the style as !important? Looks like maybe .dropdown-menu > .dropdown > a:after, .dropdown-submenu > a:after  may need something like color: #cccccc !important

 

More than likely an existing rule in the Bootstrap CSS is overriding it, its probably a matter of targeting that specific selector, even if it means applying the rules all the way into a nested level.

 

May need to list all levels in the css to get it, like:

 

.navbar-nav > li > .dropdown-menu > li > a:hover {

your rules here

}

Or maybe just simpler with the Important rule:

.dropdown-submenu > a:hover {

your rules here !important;

}


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

For those of you, who prefer a hover down menu instead of "click and show", try the following replace of code.

 

In
catalog\include\modules\content\header\templates\catmenu.php

find and replace everything between

 

<script>

 

and

 

</script>

 

with

 

 

/*** UNCOMMENTED FOR NO HOVER *****/
//$(document).ready(function(){
//    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
//      event.preventDefault();
//      event.stopPropagation();
//      $(this).parent().siblings().removeClass('open');
//      $(this).parent().toggleClass('open');
//    });
//});

/*** THIS IS FOR HOVER ****/
$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

Share this post


Link to post
Share on other sites

@@29gk

 

How does the menu then work when on a small device. Does it revert back to a click type menu.


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

To be honest, i havent test it with a small monitor, because i am working on a local server using xampp. I ll try it though and i will let you know.

Share this post


Link to post
Share on other sites

I ve tried it on a kindle ( 6' screen ) for better results and on my live test server. Seems that is working well As i can see, the categories bar is showing, the HOME button alligns left and on the right side there is a categories "button" in which when you click on it drops down all the active categories.

 

Thank you Tsimi, but i wanted to try an "original" resolution.. Also another browser.

 

Same results on my samsung 3,5" phone. Also it seems that both options are working but with no problem.

 

You can try yourselves my test server ( keep in mind this is only a test and it is keep changing ) on http://kapaspot.eu5.org/.

Edited by 29gk

Share this post


Link to post
Share on other sites

Maybe something you did wrong with the installation of the script or with the whole module. I ve tested with Firefox, chrome, Edge and on a kindle and a samsung smartphone. In all cases it is working well.

Share this post


Link to post
Share on other sites

I'll test it on a clean install. Anyway have you tried it with more than one subcategory level? in your test site I can only see one so I can't compare there.

Share this post


Link to post
Share on other sites

I ve tested it again with more than one level of subcategories and i saw what you ve described. You are right, this particular script auto opens every level of subcategories on the first hover. If the user browse them, it is working fine but not the first time someone hovers the category.

 

My problem is that for now i dont have the time to work on it, since my client only wanted one level of subcategories. I ll check it later again though.

Share this post


Link to post
Share on other sites

On a quick look on something older, i ve found the following code. Give it a try with multiple subcategories

 

 

Replace this

 

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

 

 

 

with this

 

$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});

 

or this

 

$('ul.nav li.dropdown').hover(function() {
 $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeIn(200)
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeIn(200)
});

 

Edited by 29gk

Share this post


Link to post
Share on other sites

Thanks @@29gk !

Just tested both; the first one works great, the second one is much nicer but has a small misprint (fadeIn twice instead of fadeOut, so the menu doesn't hide when the mouse moves out). It should be:

$('ul.nav li.dropdown').hover(function() {
 $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeIn(200)
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeOut(200)
}); 

Share this post


Link to post
Share on other sites

Yes, thank you @@piernas, this is the correct one. But you can also try one more.

 

  $('.navbar .dropdown').hover(function() {
   $(this).find('.dropdown-menu').first().stop(true, true).slideDown(200);
 }, function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp(200)
});

 

 

 

Please keep in mind that all these recent changes in the code are only on a classic pc monitor and NOT on a mobile devise and on smaller screens.

Edited by 29gk

Share this post


Link to post
Share on other sites

I want to thank @@Tsimi for both this add-on ( http://addons.oscommerce.com/info/9375 ), and the version he sent me (based on De Dokta's code). While De Dokta's code worked, there was one feature in the original code (based on @@GLWalker 's code) that I wanted. So, I think I've finally been able to convert it to a NavBar module.  :)

 

No instructions .. just copy the new code in place and install through admin. No core changes.

 

attachicon.gifNavBar Horizontal Categories Menu BS.zip

 

Notes:

 

1) I have made a *tiny* edit to the file  /includes/classes/catmenu.php . So, if you have already installed @@Tsimi 's version, this installation will overwrite his file. This should not cause a problem ... all I did was clean up one line of code. Or, you can use @@Tsimi 's version. :thumbsup:

 

2) I'm having a CSS issue where, after the drop-down menu drops down, when you mouse over a selection, the selection whites out. I'm still working on this, but if anyone comes up with a solution, please let me know. B)

 

3) I used @@GLWalker 's original code on a site I built over a year ago, where when each successive drop-down opened, it was shifted to the right. I'm not sure how I did that then, but I'm looking to add that to this module (when and if I can). :-

 

Malcolm

Hi all,

 

I have used this to add a categories menu to my nav bar can anyone point me in the direction to add an icon next to the text such as ( glyphicon glyphicon-th-list ) so that when the website is viewed on a smaller screen the icon will show up instead of text

 

thanks in advance and cheers Malcolm for the work you did everyone else involved

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

×