Image of the navigation bar
The "User" should be a dropdown. The sub-menu are the ones below it
This is the code I have. How do you make the second condition a DROPWDOWN WITHIN A DROPDOWN? (the elseif part)
<ul class="nav navbar-nav">
<?php
foreach ($nav as $item) {
if (empty($item['children'])) {
?>
<li<?php if (!empty($item['is_active'])) { ?> class="active"<?php } ?>>
<a href="<?php echo $item['link']; ?>"><?php if ($item['icon'] != '') { ?>
<i class="<?php echo $item['icon']; ?>" data-toggle="tooltip" data-placement="bottom" data-original-title="A large tooltip."></i> <?php } echo $item['label']; ?></a></li>
<?php
}
elseif (!empty($item['children']) && empty($item['children/'])) {
?>
<li class="dropdown <?php if (empty($item['children'])) { ?> active<?php } ?>">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
<?php if ($item['icon'] != '') { ?>
<i class="<?php echo $item['icon']; ?>"></i>
<?php echo $item['label']; ?>
<b class="caret"></b><?php } ?>
</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<?php
_main_menu_widget_display_children($item['children']);
?>
</ul>
</li>
<?php
}
else
{
?>
<li class="dropdown <?php if (!empty($item['is_active'])) { ?> active<?php } ?>">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
<?php if ($item['icon'] != '') { ?>
<i class="<?php echo $item['icon']; ?>"></i>
<?php echo $item['label']; ?>
<b class="caret"></b><?php } ?>
</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<?php
_main_menu_widget_display_children($item['children']);
?>
</ul>
</li>
<?php
}
}
?>
</ul>
Related
I want to make some tabs with Wordpress Using the Advance Custom Field Plug-in with the Repeater Add-On.
This is my actual code:
<?php
if( have_rows('menu_sections') ): ?>
<ul class="nav nav-tabs" id="" role="tablist">
<?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
<?php
$string = sanitize_title( get_sub_field('section_title') );
?>
<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?> >
<a role="tab" data-toggle="tab"><?php the_sub_field('section_title'); ?></a>
</li>
<?php $i++; endwhile; ?>
</ul>
<div class="tab-content">
<?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
<?php
$string = sanitize_title( get_sub_field('section_title') );
?>
<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="<?php echo $string; ?>">
<?php
while (have_rows('section_items')) {
the_row();
// Display each item as a list
?>
<ul>
<li class="list-unstyled"><?php the_sub_field('dish_name'); ?></li>
<li class="list-unstyled"><?php the_sub_field('dish_description'); ?></li>
<li class="list-unstyled"><?php the_sub_field('dish_price'); ?></li>
</ul>
<?php
} // end while have rows section_items
?>
</div>
<?php $i++; endwhile; ?>
</div>
<?php endif; ?>
This Actual code displays this:
Now if i select another tab it won't change the card info as you can see in the next image:
Im using a Bootstrap Tabs with a CDN
This is what the Gooogle console display:
So I tried many different ways but no success at all.
I do know how to make them without a nested repeater, and with this case I don't know why it dosen't work. I read some other posts but no having much success either. So I think that if it dosen't show is something with css??
I will appreaciate the help.
Regards!
Try changing
<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?> >
<a role="tab" data-toggle="tab"><?php the_sub_field('section_title'); ?></a>
</li>
to
<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?> >
<a role="tab" data-toggle="tab" href="#tab-<?php echo $i; ?>"><?php the_sub_field('section_title'); ?></a>
</li>
and
<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="<?php echo $string; ?>">
to
<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="tab-<?php echo $i; ?>">
I hope it will solve the issue. You are assigning a section title as id to tab-pane, which might contain space as well. It's always recommended to use id without spaces.
I have some navbar with menu and submenu, I want to appear some <div> in that menu to appear the submenu just if this menu has submenu items
The div that I want to appear are div1, div2, div3, see comments and in this condition : <?php if ($men["titre"] == $sub["parentmenu"]) : ?>
I can't put them in this foreach : <?php foreach($submenu as $sub) :?> because I need that three div just ones for all the submenu <li>
Exemple of one menu who have submenus:
<li class="Menu1">
<a class="header-menu " href="#">Menu1 title</a> //Menu1
<div class="mobile-header-nav-submenu-container"> //div 1
<ul class="mobile-header-nav-submenu"> //div 2
<div class="mobile-header-nav-submenu-li-container"> //div3
<li class="submenu1">
<a class="" href="#">Submenu1</a>
</li>
<li class="submenu2">
<a class="" href="#">Submenu2</a>
</li>
<li class="submenu3">
<a class="" href="#">Submenu3</a>
</li>
</div>
</ul>
</div>
</li>
My code:
<div class="menu>
<?php foreach ($menu as $men): ?>
<li class="<?php echo $men["titre"]?>">
<a class="header-menu <?php echo $men["lien"]?>" href="<?php if($men["lien"]){echo $baseUrl.$men["lien"];}else{echo '#';}?>"><?php echo $men["titre"]?></a>
<div class="mobile-header-nav-submenu-container"> //div1
<ul class="mobile-header-nav-submenu"> //div2
<div class="mobile-header-nav-submenu-li-container"> //div3
<?php foreach($submenu as $sub) :?>
<?php if ($men["titre"] == $sub["parentmenu"]) : ?>
<li id="<?php echo $sub["titre"]?>" class="mobile-header-nav-submenu-li">
<a class="" href="<?php if($sub["lien"]){echo $baseUrl.$sub["lien"];}else{echo '#';}?>">
<?php echo $sub["titre"]?>
</a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</div>
</ul>
</div>
</li>
<?php endforeach; ?>
</div>
i'm having some problems with my html, php code. With this code, my nav will show the active li but the other pages which are not active won't have style or links.
<!--/. PHP "active" -->
<?php
$current_url = basename($_SERVER['PHP_SELF']);
$active = "class=\"active-menu\"";
?>
<!--/. PHP "active" -->
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<?php if ($current_url == "home.php") { ?>
<a <?php echo $active;?> href="home.php"><?php } ?><i class="fa fa-dashboard"></i> Dashboard</a>
</li>
<li>
<?php if ($current_url == "new.php") { ?>
<a <?php echo $active;?> href="new.php"><?php } ?><i class="fa fa-qrcode"></i> Nieuw item toevoegen</a>
</li>
<li>
<?php if ($current_url == "show.php") { ?>
<a <?php echo $active;?> href="show.php"><?php } ?><i class="fa fa-qrcode"></i> Bekijk inventaris</a>
</li>
<li>
<?php if ($current_url == "profile.php") { ?>
<a <?php echo $active;?> href="profile.php"><?php } ?><i class="fa fa-user"></i> Gebruikersprofiel</a>
</li>
<li>
<i class="fa fa-sitemap"></i> Gebruikers<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Beheerders
</li>
<li>
ICT - Verantwoordelijken
</li>
<li>
Raadplegers
</li>
</ul>
</li>
<li>
<?php if ($current_url == "empty.php") { ?>
<a <?php echo $active;?> href="empty.php"><?php } ?><i class="fa fa-fw fa-file"></i> Lege pagina</a>
</li>
</ul>
</div>
</nav>
the pages with no styling will also not have a link. The active-menu class has the styling.
Your if condition it is wrong.
Try something like this in every <li>.
<li>
<a <?php echo $current_url == "home.php" ? $active : ''; ?> href="home.php"><i class="fa fa-dashboard"></i> Dashboard</a>
</li>
<li>
<a href="new.php" <?php if ($current_url == "new.php") {echo $active;}?>>
<i class="fa fa-qrcode"></i> Nieuw item toevoegen
</a>
</li>
Put your list like this
You should make another class, like $not_active = "class=\"not-active-menu\"";
And add that to your code
<li>
<a href="something.php" <?php if ($current_url == "something.php") {echo $active;} else { echo $not_active; }?>>
<i class="fa fa-qrcode"></i> something
</a>
</li>
I'm trying to view submenu after click on parent.
Classes->Primary School->(Grade1,Grade2,Grade3,Grade4,Grade5,Grade6)
Classes->Middle School->(Grade7,Grade8,Grade9)
Classes->Secondary School->(Grade10,Grade11,Grade12)
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="nav navbar-nav navbar-right">
<?php foreach ($data as $menu) { ?>
<?php if(!$menu->children) { ?>
<li><?php echo $menu->name; ?></li>
<?php }
else {
?>
<li class="dropdown open">
<a href="#" class="dropdown-toggle " data-toggle="dropdown">
<?php echo $menu->name; ?>
<span class="fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu open" role="menu">
<?php
foreach ($menu->children as $child) {
?>
<li><?php echo $child->name; ?></li>
<?php
foreach ($child->children as $sub_child) {
?>
<li class="dropdown-submenu">
<?php echo $sub_child->name; ?><span class="fa fa-angle-down"></span>
<ul class="dropdown-submenu" role="menu">
<?php } ?>
<?php } ?>
</ul>
</li>
<?php } ?>
<?php } ?>
</ul>
</li>
</ul>
</div>
The result:
Problem with result
I want to view Grade 1 to Grade 6 after click on Primary school and from Grade 7 to Grade 9 after click on Middle school ...
Please help!
You have an open <ul class="dropdown-submenu" role="menu"> tag without any <li> or <a>'s being generated inside of it. Then you close two each statements before closing the <ul> tag.
<?php foreach ($child->children as $sub_child) { ?>
<li class="dropdown-submenu">
<a href="#" style="color:black;" class="dropdown-toggle " data-toggle="dropdown">
<?php echo $sub_child->name; ?><span class="fa fa-angle-down"></span>
</a>
<ul class="dropdown-submenu" role="menu">
<?php } ?>
<?php } ?>
</ul>
</li>
This will be causing all sorts of unintended markup output. Fix that and it should fix your problem. If not, you'll atleast be a lot closer.
I am really trying to get this to work and am close:
It loops through the array and does create the submenus (with an error albeit) but:
the first menu with submenu items appears correctly but on the second menu that has a submenu items it repeats the first submenu items and then the second submenu items..... what am I missing?
Any help would be greatly appreciated.
<ul class="nav navbar-nav">
<?php
$html = new cacheHTML('topmenu');
if(!$html->isCached){
$menuitems = getMenuLevelsArray(25, 1 , 1);
$submenuI = "0";
foreach($menuitems as $item){
if($item['submenu']){
$subs[$submenuI] = $item['submenu'];
}
?>
<li <?php if($subs[$submenuI]){ ?> class="dropdown" <?php }?>>
</span> <?php }?>
<!-- submenu begins here -->
<?php foreach($subs as $submenuI => $menu){ ?>
<ul class="dropdown-menu" role="menu">
<li>
<?php
for($a=0; $a < count($menu); $a++){
?>
<a href="<?php echo $menu[$a]['url']; ?>" <?php if(!$menu[$a+1]){ echo "class='last'"; } ?>><?php echo $menu[$a]['text']; ?></a>
<?php } ?>
</li>
</ul>
<?php $submenuI++; } ?>
</li>
<?php
}
?>
<?php } $html->show(); ?>
</ul>
`<ul class="nav navbar-nav">
<li> Home <br>
<b>Warning</b>: Invalid argument supplied for foreach() in <b>/layout.php</b> on line 95<br>
</li>
<li class="dropdown open">
About<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
About
Board of Directors
Structure
</li>
</ul>
</li>
<li>
Standards & Codes
<ul class="dropdown-menu" role="menu">
<li>
About
Board of Directors
Structure
</li>
</ul>
</li>
<li class="dropdown">
Resources <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
About
Board of Directors
Structure
</li>
</ul>
<ul class="dropdown-menu" role="menu">
<li>
Frequently Asked Questions
News Archives
Resource Links
Safety Alerts
</li>
</ul>
</li>
<li>Contact Us
<ul class="dropdown-menu" role="menu">
<li>
About
Board of Directors Structure
</li>
</ul>
<ul class="dropdown-menu" role="menu">
<li>
Frequently Asked Questions
News Archives
Resource Links
Safety Alerts
</li>
</ul>
</li>
</ul>`
Under the first "foreach" loop you should reset your $subs array to make sure it's empty. Otherwise it gets down to the second loop, sees the old "$subs" from the previous loop, and loops through it again:
foreach ( $menuitems as $item ) {
$subs = array();
if ($item ['submenu']) {
$subs [$submenuI] = $item ['submenu'];
}
...
I found the mixture of PHP and HTML hard to read, so I rewrote the code to make it easier for my eyes:
$html = new cacheHTML ( 'topmenu' );
if (! $html->isCached) {
$menuitems = getMenuLevelsArray ( 25, 1, 1 );
$submenuI = "0";
foreach ( $menuitems as $item ) {
if ($item ['submenu']) {
$subs [$submenuI] = $item ['submenu'];
}
echo '<li';
if($subs[$submenuI]){
echo 'class="dropdown"';
}
echo ">
<a href='{$item['url']}'";
if($subs[$submenuI]){
echo 'class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"';
}
echo ">{$item['text']}";
if($subs[$submenuI]){
echo '<span class="caret"></span>';
}
echo '</a> <!-- submenu begins here -->
';
foreach($subs as $submenuI => $menu){
echo '<ul class="dropdown-menu" role="menu">
<li>
';
for($a = 0; $a < count ( $menu ); $a ++) {
echo "<a href='{$menu[$a]['url']}'";
if(!$menu[$a+1]){
echo "class='last'";
}
echo ">{$menu[$a]['text']}</a>
";
}
echo '</li>
</ul>
';
$submenuI++;
}
echo '</li>';
}
}
$html->show(); ?>
</ul>
I hope this helps!
Finally got it...
I need to learn me some more PHP if statements and foreach's
here is what I did:
<ul class="nav navbar-nav">
<?php
$html = new cacheHTML('topmenu');
if(!$html->isCached){
$menuitems = getMenuLevelsArray(25, 1 , 1);
$submenuI = "0";
foreach($menuitems as $item){
if($item['submenu']){
$subs[$submenuI] = $item['submenu'];
}
?>
<li <?php if($subs[$submenuI]){ ?> class="dropdown" <?php }?>>
</span> <?php }?>
<!-- submenu begins here -->
<?php foreach($subs as $submenuI => $menu){ ?>
<ul class="dropdown-menu" role="menu">
<li>
<?php
for($a=0; $a < count($menu); $a++){
?>
<a href="<?php echo $menu[$a]['url']; ?>" <?php if(!$menu[$a+1]){ echo "class='last'"; } ?>><?php echo $menu[$a]['text']; ?></a>
<?php } ?>
</li>
</ul>
<?php $submenuI++; } ?>
</li>
<?php
}
?>
<?php } $html->show(); ?>
</ul>