Jump to content

Recommended Posts

@Tsimi

ok, thank you for the explanation. As I mentioned, nothing seems to be off with menu display or functionality without those attributes. So, I think I will continue with them removed. Thanks again.

 


osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&geo=US&q=oscommerce

Share this post


Link to post
Share on other sites

This module was incorporated into Bootstrap v2.3.4.1 CE. 

I'm just looking for a horizontal menu without the dropdown for one particular site.  

I know it seems to contradict what this module is about - but can I disable the dropdown element?   My attempts haven't quite worked as they should. 

Or is there another horizontal menu module that works with Bootstrap, that doesn't have the dropdown element built in? 

many thanks

Share this post


Link to post
Share on other sites

@Rosyweb

Hi Ros

You mean you just want to have the parent categories inside the menu without the sub-categories dropdown function right?
If yes then do the following changes inside the classes/catmenu.php file

FIND (around line 44)
 

		  if (isset($this->_data[$category_id]) && ($level != 0)) {
            $result .= '<li class="dropdown dropdown-submenu"><a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">';
            $caret = '';
          } elseif(isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level + 1))) {
            $result .= $this->root_start_string;
            $result .= '<a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">';
            $caret =   ' <span class="fas fa-caret-down"></span>';
            			
          } else {
            $result .= $this->child_start_string;
            $result .= '<a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">';           
            $caret = false;
          }

REPLACE WITH
 

		/*  if (isset($this->_data[$category_id]) && ($level != 0)) {
            $result .= '<li class="dropdown dropdown-submenu"><a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">';
            $caret = '';
          } elseif(isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level + 1))) {
            $result .= $this->root_start_string;
            $result .= '<a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">';
            $caret =   ' <span class="fas fa-caret-down"></span>';
            			
          } else {*/
            $result .= $this->child_start_string;
            $result .= '<a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">';           
            $caret = false;
        //  }

Now you should only see the parent categories without any dropdown feature. The show image function still works if needed.
If you use this together with the XS menu, which you shouldn't if you only use parent categories, then you'll have to add the following changes to the classes/catmenu_xs.php file.

FIND
 

		  if (isset($this->_data[$category_id]) && ($level != 0)) {
// HAS MORE SUBCATEGORIES			  
            $result .= '<li><a href="#">';	   
          } elseif(isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level + 1))) {
// PARENT HAS CHILD CATEGORIES			  
            $result .= $this->root_start_string;
            $result .= '<a href="#">';          			
          } else {
// NO SUBCATEGORIES			  
            $result .= $this->child_start_string;
            $result .= '<a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">';
            $caret = false;
          }
		  $caret = '';
          $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * $level);
// CATEGORY NAMES		  
          $result .= $link_title . (($caret != false) ? $caret : null) . '</a>';

		  
          if(isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level + 1))) {
            // show parent category link //	    
			$root_link_title =  '<strong><span class="fas fa-list fa-lg"></span>&nbsp;' . $link_title . '</strong>';
						
            $result .= $this->parent_start_string;
    // divider added for clarity //            
        if (MODULE_CONTENT_HEADER_CATMENU_XS_DIVIDER == 'True') {
            $result .= '<li style="border-bottom:solid 1px #e5e5e5;"><a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">' . $root_link_title . '</a></li>';
        } else {
            $result .= '<li><a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">' . $root_link_title . '</a></li>';
        }
            $result .= $this->_buildHoz_xs($category_id, $level + 1);
            $result .= $this->parent_end_string;
            $result .= $this->child_end_string;
          } else {
            $result .= $this->root_end_string;
          }

REPLACE WITH
 

		 /* if (isset($this->_data[$category_id]) && ($level != 0)) {
// HAS MORE SUBCATEGORIES			  
            $result .= '<li><a href="#">';	   
          } elseif(isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level + 1))) {
// PARENT HAS CHILD CATEGORIES			  
            $result .= $this->root_start_string;
            $result .= '<a href="#">';          			
          } else {*/
// NO SUBCATEGORIES			  
            $result .= $this->child_start_string;
            $result .= '<a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">';
            $caret = false;
        //  }
		//  $caret = '';
         // $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * $level);
// CATEGORY NAMES		  
          $result .= $link_title . (($caret != false) ? $caret : null) . '</a>';

		  
   /*       if(isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level + 1))) {
            // show parent category link //	    
			$root_link_title =  '<strong><span class="fas fa-list fa-lg"></span>&nbsp;' . $link_title . '</strong>';
						
            $result .= $this->parent_start_string;
    // divider added for clarity //            
        if (MODULE_CONTENT_HEADER_CATMENU_XS_DIVIDER == 'True') {
            $result .= '<li style="border-bottom:solid 1px #e5e5e5;"><a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">' . $root_link_title . '</a></li>';
        } else {
            $result .= '<li><a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">' . $root_link_title . '</a></li>';
        }
            $result .= $this->_buildHoz_xs($category_id, $level + 1);
            $result .= $this->parent_end_string;
            $result .= $this->child_end_string;
          } else {*/
            $result .= $this->root_end_string;
          //}

 

That should do it.

Share this post


Link to post
Share on other sites

@Tsimi Lambros, will you be updating this to work with Phoenix? I've already made the changes here, but would rather you get the credit for keeping your code up to date (as well as not introduce my mistakes 🙄 )

M


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

Share this post


Link to post
Share on other sites
7 hours ago, ArtcoInc said:

@Tsimi Lambros, will you be updating this to work with Phoenix? I've already made the changes here, but would rather you get the credit for keeping your code up to date (as well as not introduce my mistakes 🙄 )

M

Hi Malcolm

I don't think I'll be updating any of my add-ons. I'm hanging back a bit and see how things develop. 

I barely have anything to do with osC or coding in general at the moment. So please go ahead and upload your version. I added you as admin for this add-on so you can upload anytime.

Thx and regards 

Lambros

Edited by Tsimi

Share this post


Link to post
Share on other sites
1 hour ago, Kurre said:

Is it possible to center the menu instead of have it to the left ?

@Demitry gave me some code a while back to add to my user.css file to center my menu links, looks like this:

/* this will center the menu links */
.navbar-nav2 { width:100%; text-align:center; font-size:20px; font-family:helvetica; }
.navbar-nav2 > li { float:none; display:inline-block; }

Hope that helps!

- Andrea

Share this post


Link to post
Share on other sites

@puggybelle

Unfortunately, this add-on is in the Header, not the NavBar (at least in my site).

@Kurre

Untested, but try this ...   in /includes/classes/catmenu.php

find:

        $child_start_string = '<li>',
        $child_end_string = '</li>';

 

replace with this:

        $child_start_string = '<center><li>',
        $child_end_string = '</li></center>';

M


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

Share this post


Link to post
Share on other sites

@ArtcoInc thanks but that got wrong when I tested.. menu got strange.. the second image is before and the first one after.

 

 

meny-center.jpg

meny-center2.jpg

Edited by Kurre

Share this post


Link to post
Share on other sites

@Kurre

Willing to try another one? In the same file ...

Find:

        $parent_start_string = '<ul class="dropdown-menu">',
        $parent_start_string_img = '<ul class="dropdown-menu menu_custom_width">',
        $parent_end_string = '</ul>',

Replace with:

        $parent_start_string = '<ul class="dropdown-menu"><center>',
        $parent_start_string_img = '<ul class="dropdown-menu menu_custom_width">',
        $parent_end_string = '</center></ul>',

M


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

Share this post


Link to post
Share on other sites

@Kurre

If you look at the file - catalog/includes/modules/content/header/cm_header_catmenu.php

Very near the bottom, you'll see this chunk of code:

 //added function
    function build_hoz($class='') {
		global $cPath, $level;

		if (empty($class)) $class = 'nav navbar-nav';

		$OSCOM_CategoryTree = new explode_category_tree();
		$data = '<ul class="' . $class . '">' . $OSCOM_CategoryTree->getExTree() . '</ul>';

		return $data;
	}

That line in the center -

if (empty($class)) $class = 'nav navbar-nav';

All I did was change that class name to nav-navbar-nav2

It's confusing, because the class is not called 'header' something or other, it called navbar - despite this being a contrib for categories in the header 😯

Then you insert the code I gave you before in user.css and it should work - because you've now renamed the class in the file referenced above.

Just change the font size and type to whatever you like and it should be fine.

I seem to recall having to rename that class because if I used the original class name in user.css, it was centering not only the categories menu, but the links in the navbar as well.  This way, the code in user.css will only affect the categories menu in the header.  Try that out and see what happens.

- Andrea

Share this post


Link to post
Share on other sites

The classes for .nav and .navbar-nav are defined in the BootStrap css file so, changing the names of those classes removes the prior attributes assigned to them.

I just added the following to my user.css file and it works as it should,... centering all the links in the horizontal menu. No need to change anything else.

/* this will center the menu links */
.navbar-nav { width:100%; text-align:center; }
.navbar-nav > li { float:none; display:inline-block; }

 

Edited by Demitry

osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites
56 minutes ago, Demitry said:

No need to change anything else.

Unless he wants the Navigation Bar links centered, too...he's going to have to change the name of the class in cm_header_catmenu.php

Just sayin'...

- Andrea

Share this post


Link to post
Share on other sites
Quote

Unless he wants the Navigation Bar links centered, too...he's going to have to change the name of the class in cm_header_catmenu.php

Yes, I thought this was only regarding the links in the horizontal menu. I don't use the Navigation Bar, so never ventured to change those links.


osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites

Just trying to give him a heads-up.  That class in your user.css code will affect more than just the Horizontal Categories Menu.

No offense...honestly, you're the one that helped me sort that out a long time ago, @Demitry...seem to remember I was sweating the appearance of a bad hurricane during our chats.  If you hadn't given me that same code, my menu would never have been centered.  Too dumb to figure it out on my own.

I just didn't care for what it was also doing to the Navigation Bar links, so...there came my class change.  We do what we gotta do! 

Thanks for your help, Demitry.  I appreciate what you do in the forum.  Happy Holidays!

- Andrea

Share this post


Link to post
Share on other sites
Quote

That class in your user.css code will affect more than just the Horizontal Categories Menu.

Ah,.. yeah, I do remember you mentioned that this change affects the top Navigation Bar. And hence, why the need to change the name of the classes.

However, to do that (if using the Navigation Bar as well), you would need to copy and paste the entire block for .navbar-nav from the BootStrap CSS file into the user.css file.

Then rename all of these classes (in the user.css file) to .navbar-nav-h-menu and then add the following code to the bottom of the user.css file (after the newly added .navbar-nav-h-menu classes).

/* this will center the menu links */
.navbar-nav-h-menu { width:100%; text-align:center; }
.navbar-nav-h-menu > li { float:none; display:inline-block; }

Then go into the horizontal menu file and change all the navbar-nav classes to navbar-nav-h-menu and do the same in the class file for this addon (if there are any in that class file). It's a bit more involved but not difficult.

 

Edited by Demitry

osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites

If you have this addon installed AND will use the Navigation Bar AND you want the Horizontal Menu to display the links centered, here are the changes to make.

I put this together, but have not tested it. Therefore, I need someone to actually apply these 3 changes and let me know if this works.

I searched through the last version of osC Flatline (Frozen) BootStrap CSS file to find all instances of .navbar-bar. I then combined them and changed all these .navbar-bar classes to .navbar-bar-h-menu which is going to be the new CSS class for the Horizontal Menu with centered links. That osC Flatline version is based on BootStrap 4, however, this should not affect anything if you have BS3 because this is only for the Horizontal Menu.

First, back up your site files,.. as always! So that you could easily reverse these changes, if needed.

Then, add the following CSS code to the end of your user.css file:

/* BOF: Horizontal Menu Links Centered */
.navbar-nav-h-menu {
  margin: 7.5px -15px;
}
.navbar-nav-h-menu > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.navbar-nav-h-menu > li > .dropdown-menu {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.navbar-fixed-bottom .navbar-nav-h-menu > li > .dropdown-menu {
  margin-bottom: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.navbar-default .navbar-nav-h-menu > li > a {
  color: #777;
}
.navbar-default .navbar-nav-h-menu > li > a:hover,
.navbar-default .navbar-nav-h-menu > li > a:focus {
  color: #333;
  background-color: transparent;
}
.navbar-default .navbar-nav-h-menu > .active > a,
.navbar-default .navbar-nav-h-menu > .active > a:hover,
.navbar-default .navbar-nav-h-menu > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-default .navbar-nav-h-menu > .disabled > a,
.navbar-default .navbar-nav-h-menu > .disabled > a:hover,
.navbar-default .navbar-nav-h-menu > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}
.navbar-default .navbar-nav-h-menu > .open > a,
.navbar-default .navbar-nav-h-menu > .open > a:hover,
.navbar-default .navbar-nav-h-menu > .open > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-inverse .navbar-nav-h-menu > li > a {
  color: #9d9d9d;
}
.navbar-inverse .navbar-nav-h-menu > li > a:hover,
.navbar-inverse .navbar-nav-h-menu > li > a:focus {
  color: #fff;
  background-color: transparent;
}
.navbar-inverse .navbar-nav-h-menu > .active > a,
.navbar-inverse .navbar-nav-h-menu > .active > a:hover,
.navbar-inverse .navbar-nav-h-menu > .active > a:focus {
  color: #fff;
  background-color: #080808;
}
.navbar-inverse .navbar-nav-h-menu > .disabled > a,
.navbar-inverse .navbar-nav-h-menu > .disabled > a:hover,
.navbar-inverse .navbar-nav-h-menu > .disabled > a:focus {
  color: #444;
  background-color: transparent;
}
.navbar-inverse .navbar-nav-h-menu > .open > a,
.navbar-inverse .navbar-nav-h-menu > .open > a:hover,
.navbar-inverse .navbar-nav-h-menu > .open > a:focus {
  color: #fff;
  background-color: #080808;
}
/* this will center the menu links */
.navbar-nav-h-menu { width:100%; text-align:center; }
.navbar-nav-h-menu > li { float:none; display:inline-block; }
@media (max-width: 767px) {
  .navbar-nav-h-menu .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-nav-h-menu .open .dropdown-menu > li > a,
  .navbar-nav-h-menu .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav-h-menu .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav-h-menu .open .dropdown-menu > li > a:hover,
  .navbar-nav-h-menu .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > li > a {
    color: #777;
  }
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: transparent;
  }
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
  }
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .dropdown-header {
    border-color: #080808;
  }
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu .divider {
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > li > a {
    color: #9d9d9d;
  }
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .disabled > a,
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .disabled > a:hover,
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .disabled > a:focus {
    color: #444;
    background-color: transparent;
  }
}
@media (min-width: 768px) {
  .navbar-nav-h-menu {
    float: left;
    margin: 0;
  }
  .navbar-nav-h-menu > li {
    float: left;
  }
  .navbar-nav-h-menu > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
/* EOF: Horizontal Menu Links Centered */

 

/includes/modules/content/header/cm_header_catmenu.php

Find this line:

if (empty($class)) $class = 'nav navbar-nav';

Change it to this:

if (empty($class)) $class = 'nav navbar-nav-h-menu';

 

/includes/modules/content/header/templates/catmenu.php

Find this line:

echo '<ul class="nav navbar-nav">

Change it to this:

echo '<ul class="nav navbar-nav-h-menu">

 

My module & class files are all modified for this addon, so you basically want to find any instance of navbar-nav class in the files for this addon and change them to navbar-nav-h-menu …and be sure to leave out the leading period (.) as those are mainly used in the CSS file.

These changes apply to all the same attributes that the original navbar-nav class has, but they are separate from, and do not affect the Navigation Bar. Therefore, if you need to make formatting changes only to your Horizontal Menu, you should now be able to do that from this CSS block of code in the user.css file.

This block of CSS code is more than required for the Horizontal Menu, however, this is as good as it gets for a quick solution.

Let me know if this solution works for you.

 

 

Edited by Demitry

osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites

@Demitry Wow thank you for you effort.

I can't find

echo '<ul class="nav navbar-nav">

in

/includes/modules/content/header/templates/catmenu.php

My file looks like

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2017 osCommerce

  Released under the GNU General Public License
  
  Horizontal Categories Menu BS v1.4
*/

include('includes/classes/catmenu.php'); 
?>
<?php if(MODULE_CONTENT_HEADER_CATMENU_XS_STATUS == 'True') { 
		echo '<div id="catMenu" class="col-sm-12 hidden-xs hidden-sm">';
	  } else {
		echo '<div id="catMenu" class="col-sm-12">';
	  } 
?>
	 <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
		<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="fas fa-chevron-down"></i> <?php echo TEXT_COLLAPSE_MENU; ?>
		</button>
      </div>
      <div class="collapse navbar-collapse" id="bs-navbar-collapse">
          <?php echo build_hoz(); ?>
      </div>
    </nav>
</div>
<style>
.dropdown-submenu { 
  position:relative;
}
.dropdown-menu > .dropdown > .dropdown-menu, .dropdown-submenu > .dropdown-menu {
  top:0;
  left:100%;
  margin-top:-6px;
  -webkit-border-radius:0 6px 6px 6px;
  -moz-border-radius:0 6px 6px 6px;
  border-radius:0 6px 6px 6px
}
.dropdown-menu > .dropdown > a:after, .dropdown-submenu > a:after {
  display: inline-block;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f0da";
  margin-left: 10px;
  color: #cccccc;
}
.dropdown-submenu:hover > a:after {
  color:#555;
}
.menu_custom_width {
 min-width: 200px;
}
</style>
<script>
$(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');
    });
});
</script>

 

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

×