im generating a bootstrap navbar using codeigniter, its working fine but i want the admin link to be aligned to the right. here is my code:
function get_menu ($array, $child = FALSE)
{
$CI =& get_instance();
$str = '';
if (count($array)) {
$str .= $child == FALSE ? '<ul class="nav navbar-left navbar-custom">' . PHP_EOL : '</ul>' . PHP_EOL;
foreach ($array as $item) {
$active = $CI->uri->segment(1) == $item['slug'] ? TRUE : FALSE;
if (isset($item['children']) && count($item['children'])) {
$str .= $active ? '<li class="dropdown active">' : '<li class="dropdown">';
$str .= '<a class="dropdown-toggle" data-toggle="dropdown" href="' . site_url(e($item['slug'])) . '">' . e($item['title']);
$str .= '<b class="caret"></b></a>' . PHP_EOL;
$str .= get_menu($item['children'], TRUE);
}
else {
$str .= $active ? '<li class="active">' : '<li>';
$str .= '' . e($item['title']) . '';
}
// Closing tags
$str .= '</li>' ;
}
//add dashboard link to the right of menu for login
$str .= '<li>' . '<p class="navbar-text navbar-right"><a
`href="admin/dashboard" class="navbar-link"> ADMIN</a></p></li>' . PHP_EOL;
$str .= '</ul>' . PHP_EOL;
}
im getting a navbar with required links but its all inline. any help is aappreciated. Cheers
This is because of where you are adding the navbar-right class. You have to add it to an ul element. Change your second to last string:
$str .= '<li>' . '<p class="navbar-text navbar-right"><a `href="admin/dashboard" class="navbar-link"> ADMIN</a></p></li>' . PHP_EOL;
To something along these lines:
<ul class="nav navbar-nav navbar-right">
<li> ADMIN</li>
</ul>
And do not add it inside of your current ul element, that will also not work; you need to close the navbar-left class then add the navbar-right.
Looking something like this:
UPDATE
I think I got it, you do not have the nav element around your navbar, and that is probably what is causing the issues with alignments...
<?php
function get_menu ($array, $child = FALSE)
{
$CI =& get_instance();
$str = '';
if (count($array)) {
$str .= $child == FALSE ? '<nav class="navbar navbar-default"> <ul class="nav navbar-nav navbar-custom">' . PHP_EOL; // create the <nav> element
foreach ($array as $item) {
$active = $CI->uri->segment(1) == $item['slug'] ? TRUE : FALSE;
if (isset($item['children']) && count($item['children'])) {
$str .= $active ? '<li class="dropdown active">' : '<li class="dropdown">';
$str .= '<a class="dropdown-toggle" data-toggle="dropdown" href="' . site_url(e($item['slug'])) . '">' . e($item['title']);
$str .= '<b class="caret"></b></a>' . PHP_EOL;
$str .= get_menu($item['children'], TRUE);
}
else {
$str .= $active ? '<li class="active">' : '<li>';
$str .= '' . e($item['title']) . '';
}
// Closing tags
$str .= '</li>' ;
}
$str .= '</ul>' . PHP_EOL;
//add dashboard link to the right of menu for login
$str .= '<ul class="nav navbar-nav navbar-right">
<li> ADMIN</li>
</ul>' . PHP_EOL;
// add the nav closing tag
$str .= '</nav>' . PHP_EOL;
}
?>
Related
I have the following code for integrating a categories menu with unlimited multi levels
<ul id="menu_mb_ul" class="nt_mb_menu">
<li class="menu-item menu-item-has-children only_icon_false">
<span class="nav_link_txt flex al_center">1 Category</span><span class="nav_link_icon ml__5"></span>
<ul class="sub-menu">
<li class="menu-item menu-item-has-children only_icon_false">
<span class="nav_link_txt flex al_center">2 Category</span><span class="nav_link_icon ml__5"></span>
<ul class="sub-sub-menu">
<li class="menu-item">
3 Category</li>
</ul>
</li>
</ul>
</li>
</ul>
My Php code is the following but it doesn't show me the third level categories. Where am I wrong?
function buildCategory2($parent, $category) {
$html = "";
if (isset($category['parent_cats'][$parent])) {
if (!isset($category['parent_cats'][$cat_id])) {
$html .= "<ul id='menu_mb_cat' class='nt_mb_menu'>\n";
}
else
{
$html .= "<ul id='menu_mb_cat' class='nt_mb_menu'>\n";
}
foreach ($category['parent_cats'][$parent] as $cat_id) {
if (!isset($category['parent_cats'][$cat_id])) {
$html .= "<li class='menu-item'>\n <a href='" . $category['categories'][$cat_id]['category_link'] . "'>" . $category['categories'][$cat_id]['category_name'] . "</a>\n</li> \n";
}
else
if (isset($category['parent_cats'][$cat_id])) {
$html .= "<li class='menu-item menu-item-has-children only_icon_false'>\n <a href='" . $category['categories'][$cat_id]['category_link'] . "'><span class='nav_link_txt flex al_center'>" . $category['categories'][$cat_id]['category_name'] . "</span><span class='nav_link_icon ml__5'></span></a> \n";
$html .= "<ul class='sub-menu'><li class='menu-item'><span class='nav_link_txt flex al_center'>".buildCategory($cat_id, $category)."</span></li>";
$html .= "</li>\n";
$html .= "</ul>\n";
}
}
$html .= "</ul> \n";
}
return $html;}
echo buildCategory2(0, $category);
I found the solution myself.
function buildCategory2($parent, $category) {
$html = "";
if (isset($category['parent_cats'][$parent])) {
$html .= " <ul id='menu_mb_ul' class='nt_mb_menu'>\n";
foreach ($category['parent_cats'][$parent] as $cat_id) {
if (!isset($category['parent_cats'][$cat_id])) {
$html .= "<li class='menu-item'>\n <a href='" . $category['categories'][$cat_id]['category_link'] . "'>" . $category['categories'][$cat_id]['category_name'] . "</a>\n</li> \n";
}
if (isset($category['parent_cats'][$cat_id])) {
$html .= "<li class='menu-item menu-item-has-children only_icon_false'>\n <a href='" . $category['categories'][$cat_id]['category_link'] . "'><span class='nav_link_txt flex al_center'>" . $category['categories'][$cat_id]['category_name'] . "</span><span class='nav_link_icon ml__5'></span></a><ul class='sub-menu'> \n";
$html .= "<li class='menu-item'>".buildCategory2($cat_id, $category)."</li>";
$html .= "</ul> \n";
$html .= "</li> \n";
}
}
$html .= "</ul> \n";
}
return $html; } echo buildCategory2(0, $category);
I'm using this nav walker in my Wordpress project. I want to create multilevel menu, for example. What I need to change to get it work? Or maybe is it another walker for BS4 with multilevel menu support?
Menu Item
- Sub menu
-- Sub menu item
-- Sub menu item
Menu Item
Add this css
ul.dropdown-menu li > ul.dropdown-menu{
left: 100%;
top: 0;
}
ul.dropdown-menu li:hover > ul.dropdown-menu, ul.dropdown-menu li:focus > ul.dropdown-menu{
display: block
}
Remove this code && 0 === $depth from class-wp-bootstrap-navwalker.php
original code:
if ( isset( $args->has_children ) && $args->has_children && 0 === $depth && $args->depth > 1 ) {
After editing:
if ( isset( $args->has_children ) && $args->has_children && $args->depth > 1 ) {
Bulding simple menu list - here in user contributed notes (1st one) you can find code for build menu using menu array data, its simple and can be modified as you need.
Here is the code:
<?php
// Intented to use bootstrap 3.
// Location is like a 'primary'
// After, you print menu just add create_bootstrap_menu("primary") in your
preferred position;
#add this function in your theme functions.php
function create_bootstrap_menu( $theme_location ) {
if ( ($theme_location) && ($locations = get_nav_menu_locations()) && isset($locations[$theme_location]) ) {
$menu_list = '<nav class="navbar navbar-default">' ."\n";
$menu_list .= '<div class="container-fluid">' ."\n";
$menu_list .= '<!-- Brand and toggle get grouped for better mobile display -->' ."\n";
$menu_list .= '<div class="navbar-header">' ."\n";
$menu_list .= '<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">' ."\n";
$menu_list .= '<span class="sr-only">Toggle navigation</span>' ."\n";
$menu_list .= '<span class="icon-bar"></span>' ."\n";
$menu_list .= '<span class="icon-bar"></span>' ."\n";
$menu_list .= '<span class="icon-bar"></span>' ."\n";
$menu_list .= '</button>' ."\n";
$menu_list .= '<a class="navbar-brand" href="' . home_url() . '">' . get_bloginfo( 'name' ) . '</a>';
$menu_list .= '</div>' ."\n";
$menu_list .= '<!-- Collect the nav links, forms, and other content for toggling -->';
$menu = get_term( $locations[$theme_location], 'nav_menu' );
$menu_items = wp_get_nav_menu_items($menu->term_id);
$menu_list .= '<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">' ."\n";
$menu_list .= '<ul class="nav navbar-nav">' ."\n";
foreach( $menu_items as $menu_item ) {
if( $menu_item->menu_item_parent == 0 ) {
$parent = $menu_item->ID;
$menu_array = array();
foreach( $menu_items as $submenu ) {
if( $submenu->menu_item_parent == $parent ) {
$bool = true;
$menu_array[] = '<li>' . $submenu->title . '</li>' ."\n";
}
}
if( $bool == true && count( $menu_array ) > 0 ) {
$menu_list .= '<li class="dropdown">' ."\n";
$menu_list .= '' . $menu_item->title . ' <span class="caret"></span>' ."\n";
$menu_list .= '<ul class="dropdown-menu">' ."\n";
$menu_list .= implode( "\n", $menu_array );
$menu_list .= '</ul>' ."\n";
} else {
$menu_list .= '<li>' ."\n";
$menu_list .= '' . $menu_item->title . '' ."\n";
}
}
// end <li>
$menu_list .= '</li>' ."\n";
}
$menu_list .= '</ul>' ."\n";
$menu_list .= '</div>' ."\n";
$menu_list .= '</div><!-- /.container-fluid -->' ."\n";
$menu_list .= '</nav>' ."\n";
} else {
$menu_list = '<!-- no menu defined in location "'.$theme_location.'" -->';
}
echo $menu_list;
}
?>
i have a folder 'server' and inside of server i have anothers folders 'computer1' and 'computer2' and inside of computer1 i have more folder and inside of computer2 i have more folders too
So i have a sidebar and until now i put this to show the computer1 and computer2
<ul class="nav side-menu">
<?php
foreach (glob('server/sandro/*', GLOB_ONLYDIR)as$subfolder) {
echo '<li><a><i class="fa fa-home"></i>'. basename($subfolder) .'<span class="fa fa-chevron-down"></span></a>';
echo '<ul class="nav child_menu">';
echo '</ul>';
echo '</li>';
}
?>
</ul>
and well..it's result, but now i want to add inside of
echo '<ul class="nav child_menu">';
echo '</ul>';
the rest of subfolders that are inside of the computer1 and computer2
please, help-me.
Hi you have to use function and call function in itself
<ul class="nav side-menu">
<?php
function foldersList($folderName = NULL) {
$return = '';
foreach (glob('./server/sandro/' . $folderName . '*', GLOB_ONLYDIR) as $subfolder) {
// call function to check subfolders - don't forget write `/`
$subFolders = foldersList(basename($subfolder). '/');
$return .= '<li><a><i class="fa fa-home"></i>' . basename($subfolder) . '<span class="fa fa-chevron-down"></span></a>';
$return .= '<ul class="nav child_menu">';
// if subfolder exist add to return variable
$return .= $subFolders != '' ? $subFolders : '';
$return .= '</ul>';
$return .= '</li>';
}
return $return;
}
echo foldersList();
?>
</ul>
I'm a newbie of Drupal. I'm trying to develop a bootstrap 3 template, but I have a problem with the navbar dropdown menu implementation. I followed these steps:
in my mytheme/templates folder I create a page.tpl.php file with the following code:
if ($page['header'])
...
$main_menu = variable_get('menu_main_links_source', 'main-menu');
$tree = menu_tree($main_menu);
print drupal_render($tree);
...
in mytheme folder I create a template.php file with these functions:
function mytheme_menu_tree($variables) {
return '<ul class="nav navbar-nav">' . $variables['tree'] . '</ul>';
}
function mytheme_menu_link(array $variables) {
$element = $variables['element'];
$sub_menu = '';
$dropdown = '';
if ($element['#below']) {
$sub_menu = drupal_render($element['#below']);
$dropdown = 'class="dropdown"';
$element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
}
$output = l($element['#title'], $element['#href'], $element['#localized_options']);
return '<li ' .$dropdown. ' >' . $output . $sub_menu . "</li>\n";
}
with this code I'm at a good point, but I need to remove classes "nav navbar-nav" from children and add the class "dropdown-menu".
This is the result of my code:
<ul class="nav navbar-nav">
<li>XYZ</li>
<li>ASD</li>
<li class="dropdown">XXX
<ul class="nav navbar-nav">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>
and this is what I would like to obtain:
<ul class="nav navbar-nav">
<li>XYZ</li>
<li>ASD</li>
<li class="dropdown">XXX
<ul class="dropdown-menu"> <!-- HERE IS THE DIFFERENCE -->
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>
Maybe I can do something like this:
function mytheme_menu_tree($variables) {
if ( [check if I'm at the first level] ) {
return '<ul class="nav navbar-nav">' . $variables['tree'] . '</ul>';
} else {
return '<ul class="dropdown-menu">' . $variables['tree'] . '</ul>';
}
}
but I don't know how... Any idea?
I too am a bit of a newbie when it comes to Drupal and was also having this problem. I have tweaked your function and it works for me:
function SeatradeKorea_menu_link(array $variables) {
$element = $variables['element'];
$sub_menu = '';
$dropdown = '';
if ($element['#below']) {
$sub_menu = drupal_render($element['#below']);
$sub_menu = str_replace('nav navbar-nav', 'dropdown-menu', $sub_menu);
$dropdown = 'class="dropdown"';
$element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
}
$output = l($element['#title'], $element['#href'], $element['#localized_options']);
return '<li ' .$dropdown. ' >' . $output . $sub_menu . "</li>\n";
}
I have added a str_replace() into your #below element to replace the "nav navbar-nav" with "dropdown-menu"
I am trying to integrate boostrap and I am facing something I just don't understand very well... PHP. Basically What I need is to add class="nav" to a ul and class="dropdown-menu" to the submenu ul but it's repeating twice the nav class. Here is the code. Thanks so much for the help!
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="navbar">
<!-- menu start -->
<ul class="nav" id="nav">
<li class="level0"> <a class="dropdown-toggle" href="#" class=""><span>Dashboard</span></a></li>
<li onmouseover="Element.addClassName(this,'over')" onmouseout="Element.removeClassName(this,'over')" class=" active parent dropdown level0"> <a class="dropdown-toggle" href="#" onclick="return false" class="active"><span>Sales</span></a>
<ul class="nav">
<li class="level1"> <a class="dropdown-toggle" href="#" class=""><span>Orders</span></a></li>
<li class="level1"> <a class="dropdown-toggle" href="#" class=""><span>Invoices</span></a></li>
<li class="level1"> <a class="dropdown-toggle" href="#" class=""><span>Shipments</span></a></li>
<li class="level1"> <a class="dropdown-toggle" href="#" class=""><span>Credit Memos</span></a></li>
<li class="level1"> <a class="dropdown-toggle" href="#" class=""><span>Transactions</span></a></li>
<li class="level1"> <a class="dropdown-toggle" href="#" class=""><span>Recurring Profiles (beta)</span></a></li>
<li class="level1"> <a class="dropdown-toggle" href="#" class=""><span>Billing Agreements</span></a></li>
<li class="level1"> <a class="dropdown-toggle" href="#" class=""><span>Terms and conditions</span></a></li>
<li onmouseover="Element.addClassName(this,'over')" onmouseout="Element.removeClassName(this,'over')" class=" parent dropdown last level1"> <a class="dropdown-toggle" href="#" onclick="return false" class=""><span>Tax</span></a>
<ul class="nav"> <!--Need to add .dropdown-menu here-->
<li class="level2"> <a class="dropdown-toggle" href="#" class=""><span>Manage Tax Rules</span></a></li>
<li class="level2"> <a class="dropdown-toggle" href="#" class=""><span>Manage Tax Zones & Rates</span></a></li>
<li class="level2"> <a class="dropdown-toggle" href="#" class=""><span>Import / Export Tax Rates</span></a></li>
<li class="level2"> <a class="dropdown-toggle" href="#" class=""><span>Customer Tax Classes</span></a></li>
<li class="last level2"> <a class="dropdown-toggle" href="#" class=""><span>Product Tax Classes</span></a></li>
</ul>
</li>
</ul>
</li>
<!--THE PHP-->
<?php
public function getMenuLevel($menu, $level = 0)
{
$html = '<ul class="nav" ' . (!$level ? 'id="nav"' : '') . '>' . PHP_EOL;
foreach ($menu as $item) {
$html .= '<li ' . (!empty($item['children']) ? 'onmouseover="Element.addClassName(this,\'over\')" '
. 'onmouseout="Element.removeClassName(this,\'over\')"' : '') . ' class="'
. (!$level && !empty($item['active']) ? ' active' : '') . ' '
. (!empty($item['children']) ? ' parent dropdown' : '')
. (!empty($level) && !empty($item['last']) ? ' last' : '')
. ' level' . $level . '"> <a class="dropdown-toggle" href="' . $item['url'] . '" '
. (!empty($item['title']) ? 'title="' . $item['title'] . '"' : '') . ' '
. (!empty($item['click']) ? 'onclick="' . $item['click'] . '"' : '') . ' class="'
. ($level === 0 && !empty($item['active']) ? 'active' : '') . '"><span>'
. $this->escapeHtml($item['label']) . '</span></a>' . PHP_EOL;
if (!empty($item['children'])) {
$html .= $this->getMenuLevel($item['children'], $level + 1);
}
$html .= '</li>' . PHP_EOL;
}
$html .= '</ul>' . PHP_EOL;
return $html;
}
I can't test it well, since I don't have a space to put all those fields and some other parts, but I see you have a recursively called the function. This will cause a second 'id="nav"'.
public function getMenuLevel($menu, $level = 0)
{
/* declared id="nav" here */
$html = '<ul class="nav" ' . (!$level ? 'id="nav"' : '') . '>' . PHP_EOL;
foreach ($menu as $item) {
$html .= '<li ' . (!empty($item['children']) ? 'onmouseover="Element.addClassName(this,\'over\')" '
. 'onmouseout="Element.removeClassName(this,\'over\')"' : '') . ' class="'
. (!$level && !empty($item['active']) ? ' active' : '') . ' '
. (!empty($item['children']) ? ' parent dropdown' : '')
. (!empty($level) && !empty($item['last']) ? ' last' : '')
. ' level' . $level . '"> <a class="dropdown-toggle" href="' . $item['url'] . '" '
. (!empty($item['title']) ? 'title="' . $item['title'] . '"' : '') . ' '
. (!empty($item['click']) ? 'onclick="' . $item['click'] . '"' : '') . ' class="'
. ($level === 0 && !empty($item['active']) ? 'active' : '') . '"><span>'
. $this->escapeHtml($item['label']) . '</span></a>' . PHP_EOL;
if (!empty($item['children'])) {
/* this line calls the function again which will cause id="nav" to happen again. */
$html .= $this->getMenuLevel($item['children'], $level + 1);
}
$html .= '</li>' . PHP_EOL;
}
$html .= '</ul>' . PHP_EOL;
return $html;
}
One guess to fix it might be to better check what is $level, because I think your !$level might be giving a wrong answer.
public function getMenuLevel($menu, $level = 0)
{
$idnav = '';
if ($level === 0)
$idnav = 'id="nav"';
$html = '<ul class="nav" ' . $idnav . '>' . PHP_EOL;
foreach ($menu as $item) {
$html .= '<li ' . (!empty($item['children']) ? 'onmouseover="Element.addClassName(this,\'over\')" '
.....
One other idea could be a nested loop. Maybe something like below:
<?php
public function getMenuLevel($menu, $level = 0)
{
$html = '<ul class="nav" ' . (!$level ? 'id="nav"' : '') . '>' . PHP_EOL;
/*notice*/
while (!empty($item['children'])) {
foreach ($menu as $item) {
$html .= '<li ' . (!empty($item['children']) ? 'onmouseover="Element.addClassName(this,\'over\')" '
. 'onmouseout="Element.removeClassName(this,\'over\')"' : '') . ' class="'
. (!$level && !empty($item['active']) ? ' active' : '') . ' '
. (!empty($item['children']) ? ' parent dropdown' : '')
. (!empty($level) && !empty($item['last']) ? ' last' : '')
. ' level' . $level . '"> <a class="dropdown-toggle" href="' . $item['url'] . '" '
. (!empty($item['title']) ? 'title="' . $item['title'] . '"' : '') . ' '
. (!empty($item['click']) ? 'onclick="' . $item['click'] . '"' : '') . ' class="'
. ($level === 0 && !empty($item['active']) ? 'active' : '') . '"><span>'
. $this->escapeHtml($item['label']) . '</span></a>' . PHP_EOL;
}
/* here is the tricky part */
$html .= '</li>' . PHP_EOL;
$html .= $this->getMenuLevel($item['children'], $level + 1);
}
$html .= '</ul>' . PHP_EOL;
return $html;
}
?>
You can work out the details of the tricky part with trial and error to make the result end the list correctly.