WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Horizontal Menu utilizing Bootstrap 4.0.0-beta.2

(1/1)

totage:
I'm modifying the default theme and converted the vertical nav menu into a horizontal menu. I'm still working on the project, but thought I'd share how I converted the menu in case anyone else would like to do so. Please feel free to post your input, improvements, etc.

First, you'll want to make sure you have Bootstrap loaded. Add the following in the header:


--- Code: ---<!-- START BOOTSTRAP -->
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
 <!-- END BOOOTSTRAP -->

--- End code ---

Once you've added Bootstrap, replace the NAV block with:


--- Code: ---       <nav class="navbar navbar-default" role="navigation"><div class="container-fluid"><div class="navbar-header">
       <!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> -->
       <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span> <span class="icon-bar"></span><span class="icon-bar"></span></button></div>
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <?php 
$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">
[if(class==menu-expand){<a href="[url]" class="dropdown-toggle" data-toggle="dropdown">[menu_title]<b class="caret"></b></a>}
else { <a href="[url]">[menu_title]</a> }]';
show_menu2(
$aMenu          = 1,
$aStart         = SM2_ROOT, 
$aMaxLevel      = SM2_CURR+1,
$aOptions       = SM2_ALL,
$aItemOpen      = $open,
$aItemClose     = '</li>',
$aMenuOpen      = ' <ul class="[if(level==0){nav navbar-nav} else {dropdown-menu}] ">',
$aMenuClose     = '</ul>',
$aTopItemOpen   = false,
$aTopMenuOpen   = false
);?>
    </ul></div></nav>

--- End code ---

NOTES: This is very basic code to make a horizontal menu utilizing Bootstrap. This code may be incomplete and does have a few issues. One known issue is that when the page is displayed on mobile devices and/or in smaller windows, the menu does not work. You will see the hamburger menu, but nothing displays when you click on it. This issue will be fixed, and I'll update this post, unless someone else deceides to post the fix before me.

I'm modifying the default theme in WebsiteBaker 2.10 and will release it the near future for others to use and modify. More information on this project will be given at a later time, but keep an eye out for it, if interested!

You can see an example of this menu on my website, http://webgenie.ml.

nibz:
Hello,

I think the problem is that jquery is loading twice.
Try this:
Go to Admin Tools > Frontend Output Filter > uncheck jQuery.

nibz:
Hello Totage,

I did a check. and its not only the jquery.
I also made a version which works for you will PM this to you.

dehuisman:
My version for bootstrap 4 is quite dirty because you are stuck with a trailing /div at the end in stead of a /ul. After outputbuffering I remove that change the trailing /div for /ul
any suggestions for a better solution?



--- Code: ---$menu=show_menu2(1,SM2_ROOT,SM2_ALL,SM2_ALL|SM2_PRETTY|SM2_BUFFER,
'[if (level<1){<li class="nav-item}] [if (class==menu-expand && level<1){dropdown}] [if (level<1){">}]<a href="[url]" target="[target]" class="[if (class==menu-expand){dropdown-toggle }] [if (level<1){nav-link}else {dropdown-item}] [class] "  [if (class==menu-expand){ id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"}]>  [menu_title]   [if (class=menu-current){<span class="sr-only">(current)</span>}] </a>[if (level<1 && class!=menu-expand){</li>}] ',
'',
'<div class="dropdown-menu" aria-labelledby="navbarDropdown">',
'</div></li>',
false,
'<ul class="navbar-nav mr-auto">');

$menu = substr ($menu ,0,-13);
$menu.='</ul>';
--- End code ---

Navigation

[0] Message Index