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>
Related
I'm editing a website, and this site uses data-groups, of which I'm not familiar (enough) with.
The current result is:
• In K2, I have items in categories, subcategories, and sub-subcategories.
• On the page of the items, there is a horizontal lign, showing each subcategory.
• On that page, I added a dropdown menu under one subcategory. In that dropdown, I have a few sub-subcategories. I would like that when I click on that sub-subcategory, it will show the items from that sub-subcategory.
What do I need to do to make this work?
If I need to post more, feel free to ask, and sorry.
I'll try to explain as good as possible:
Category.php
defined('_JEXEC') or die;
?>
<p style="text-align:center;font-weight:bold;font-size:120%;padding:1%;background:#007dbe;color:white;margin:1% 0 0.95% 0;">OUTLET</p>
<!--<img src="https://i.ibb.co/3dk77DK/outlet3.png" style="margin: 0 0 1% 0;">-->
<div class="centered-pills" style="width:98%;margin:0 auto;background:#474747;">
<ul class="nav nav-pills" id="outlet">
<li class="filterTitle">Filter op:</li>
<li class="active" id="pointer">All</li>
<li class="active" id="drop-a-down">Example
<ul class="drop-a-content">
<div class="column-outlet">
<ul><strong>Tools</strong>
<li class="force-css" data-group="Light">Tool 1</li>
<li class="force-css" data-group="Light">Tool 2</li>
<li class="force-css" data-group="Light">Tool 3</li>
</ul>
<ul><strong>Light</strong>
<li class="force-css" data-group="Light">Light 1</li>
<li class="force-css" data-group="Floor">Light 2</li>
<li class="force-css">Light 3</li>
<li class="force-css">Light 4</li>
</ul>
<ul><strong>Tools</strong>
<li class="force-css">Manual tools</li>
<li class="force-css">Electric tools</li>
</ul>
</div>
<div class="column-outlet">
<ul><strong>Other</strong>
<li class="force-css">Other 1</li>
<li class="force-css">Other 2</li>
<li class="force-css">Other 3</li>
</ul>
<ul><strong>Roof</strong>
<li class="force-css">Roof 1</li>
<li class="force-css">Roof 2</li>
<li class="force-css">Roof 3</li>
<li class="force-css">Roof 4</li>
</ul></div>
</ul>
</li>
<li class="active" id="drop-a-down">Animals
<ul class="drop-a-content">
<div class="column-outlet">
<ul><strong>Blocks</strong>
<li class="force-css">Block 1</li>
<li class="force-css">Block 2</li>
<li class="force-css">Block 3</li>
</ul>
<li class="active" data-group="Category-2">Cats</li>
<li class="active" data-group="Category-3">Dogs</li>
<li class="active" data-group="Category-4">Birds</li>
<li class="active" data-group="Category-5">Elephants</li>
<li class="active" data-group="Category-6">Tigers</li>
<li class="active" data-group="Category-7">Lions</li>
<li class="active" data-group="Category-8">Other</li>
<?php foreach($this->subCategories as $key=>$subCategory): ?>
<li data-group="<?php echo $subCategory->name; ?>"><?php echo $subCategory->name; ?></li>
<?php endforeach; ?>
</ul>
</div>
<div style="text-align:center;margin-top:2%;">
Get your products now!
</div>
<div style="clear:both;"></div>
<div class="inner">
<div class="row" style="margin-top:-5%;">
<?php if($this->params->get('subCategories') && isset($this->subCategories) && count($this->subCategories)): ?>
<div class="col-md-12 col-xs-12">
<div class="centered-pills" style="width:98%;margin:0 auto;">
<ul class="nav nav-pills">
<li class="filterTitle">Filter:</li>
<li class="active" data-group="All">Alle</li>
<?php foreach($this->subCategories as $key=>$subCategory): ?>
<li data-group="<?php echo $subCategory->name; ?>"><?php echo $subCategory->name; ?></li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php else: ?>
<div class="col-md-12 col-xs-12">
<p class="text-center" style="display:none;">Promotions in: <span class="divider"></span><strong><?php echo $this->category->name; ?></strong> <span class="divider"></span>Show all products</p>
</div>
<?php endif; ?>
<?php if(isset($this->leading) && count($this->leading)): ?>
<ul id="grid">
<?php foreach($this->leading as $key=>$item): ?>
<?php $this->item=$item; echo $this->loadTemplate('item'); ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<div style="text-align:center;margin-top:2%;font-style:italic;font-size:75%;">
All products are property of us.
</div>
</div>
<?php if($this->params->get('catDescription')): ?>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="disclaimer">
<?php echo $this->category->description; ?>
</div>
</div>
</div>
<?php endif; ?>
</div>
Jquery
/* initialize shuffle plugin */
var $grid = jQuery('#grid');
$grid.shuffle({
group: 'all',
itemSelector: '.portfolio-item', // the selector for the items in the grid
speed: 500 // Transition/animation speed (milliseconds)
});
/* reshuffle when user clicks a filter item */
jQuery('.nav-pills li').click(function (e) {
e.preventDefault();
// set active class
jQuery('.nav-pills li').removeClass('active');
jQuery(this).addClass('active');
// get group name from clicked item
var groupName = jQuery(this).attr('data-group');
// reshuffle grid
$grid.shuffle('shuffle', groupName );
});
});
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'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.
If there is no post in category 19, how can I hide Products in html?
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul >
<?php query_posts('showposts=5&orderby=date&cat=19'); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink(); ?>" ><li><?php the_meta(meta_key); ?><?php the_title(); ?> </li></a>
<?php endwhile; ?>
</ul>
</li>
</ul>
</div>
example menu is here : http://cssmenumaker.com/menu/modern-jquery-accordion-menu
You can do something like this from server side
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a>
</li>
<?php query_posts( 'showposts=5&orderby=date&cat=19'); if(have_posts()):?>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink(); ?>">
<li>
<?php the_meta(meta_key); ?>
<?php the_title(); ?>
</li>
</a>
<?php endwhile; ?>
</ul>
</li>
<?php endif;?>
</ul>
</div>
Using jQuery check and filter the empty product item by count of li elements and hide them
$('.has-sub').filter(function(){
return $('ul li',this).length == 0;
}).hide()
try this,
<?php query_posts('showposts=5&orderby=date&cat=19'); ?>
<?php if(have_posts()) { // <------ check before entering while.
while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink(); ?>" ><li><?php the_meta(meta_key); ?><?php the_title(); ?> </li></a>
<?php } endwhile; ?>