I am trying to create a hoverable mega menu, all works fine except the active one.
I checked in source codes and active class is added, but it doesn't show up the content until mouseenter on it.
see image please :
And this is when I go on it with mouse, it show up with no problem.
I gues I need to set main (FINANCE is main menu in pic) menu active, but dont know how to pass it to submenu.
Here is my full code :
$stmt_menu = $pdo->prepare("SELECT * FROM categories WHERE parentId = ? LIMIT 5");
$stmt_menu->execute([0]);
if ($stmt_menu->rowCount() > 0) {
$query = $stmt_menu->fetchAll();
foreach ($query as $row) {
if ($row['cat_type'] == 'mega') {
?>
<li class="dropdown megamenu-fw mega-li-<?php echo $row['catId']; ?>">
<?php echo $row['catName']; ?><span class="caret"></span>
<ul class="dropdown-menu megamenu-content dropdown-top" role="menu" aria-expanded="true" data-mega-ul="<?php echo $row['catId']; ?>">
<li>
<?php
$stmt_menu = $pdo->prepare("SELECT * FROM categories WHERE parentId = ? LIMIT 5");
$stmt_menu->execute([$row['catId']]);
if ($stmt_menu->rowCount() > 0) {
$subquery = $stmt_menu->fetchAll();
?>
<div class="sub-menu-left">
<ul class="nav-sub-categories">
<?php
$i = 0;
foreach ($subquery as $subq) {
$actives = '';
if($i == 0){
$actives = ' active';
}
?>
<li data-category-filter="<?php echo $subq['cat_seo_url']; ?>-<?php echo $subq['catId']; ?>" class="li-sub-category<?php echo $actives; ?>"><?php echo $subq['catName']; ?></li>
<?php
$i++;
}
?>
</ul>
</div>
<div class="sub-menu-right">
<?php
$i = 0;
foreach ($subquery as $subcats) {
$actives = '';
if($i == 0){
$actives = ' active';
}
?>
<div class="sub-menu-inner filter-<?php echo $subcats['cat_seo_url']; ?>-<?php echo $subcats['catId']; ?><?php echo $actives; ?>">
<div class="row row-menu-right">
<div class="col-sm-3 menu-post-item">
<div class="post-item-image">
<a href="is-allowance-instantly-strangers-applauded">
<img src="assets/img/img_bg_md.png" data-src="uploads/images/202203/image_380x226_624239afd7295.jpg" alt="Is allowance instantly strangers applauded" class="lazyload img-responsive img-post" width="1" height="1"/>
</a>
</div>
<h3 class="title"><?php echo $subcats['cat_seo_url']; ?> Is allowance instantly strangers applauded</h3>
<p class="post-meta">
admin
<span>Mar 28, 2022</span>
<span><i class="icon-comment"></i>2</span>
<span class="m-r-0"><i class="icon-eye"></i>894</span>
</p>
</div>
</div>
</div>
<?php
$i++;
}
?>
</div>
<?php
}
?>
</li>
</ul>
</li>
<?php
} elseif ($row['cat_type'] == 'dropdown') {
echo ' <li class="nav-item"><a class="nav-link" href="' . $row["cat_seo_url"] . '">test</a></li>';
} else {
echo ' <li class="nav-item"><a class="nav-link" href="' . $row["cat_seo_url"] . '">' . $row["catName"] . '</a></li>';
}
}
}
I have data collection and getting detail by foreach loop, which is working fine.
But I want 3 in a single inside foreach loop.
For example:
<ol>
<div>
<li></li>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
<li></li>
</div>
</ol>
I am using below code for displaying the data:
<ol class="product-items widget-viewed-grid">
<?php $iterator = 1; ?>
<div id="mp-list-items-<?php echo $block->getSliderId(); ?>" class="owl-carousel owl-theme">
<?php foreach ($items as $_item): ?>
<?php echo ($iterator++ == 1) ? '<li class="product-item product-slider"">' : '</li><li class="product-item product-slider"">' ?>
<div class="slider-product-item-info">
<div class="product details slider-product-item-details">
<strong class="product name product-item-name">
<a title="<?php echo $block->escapeHtml($_item->getName()) ?>" href="<?php echo $block->getProductUrl($_item) ?>">
<?php echo $block->escapeHtml($_item->getName()) ?>
</a>
</strong>
</div>
</div>
<?php echo ($iterator == count($items) + 1) ? '</li>' : '' ?>
<?php endforeach ?>
</div>
</ol>
echo "<ol>";
for( $i=0; $i<3; $i++ ) {
echo "<div>";
for($j=0; $j<3; $j++) {
echo "<li>";
echo "</li>";
}
echo "</div>";
}
echo "</ol>";
You have to use nested loops. Outer loop for product <div> and inner loop for product items <li>.
For Example
foreach($products as $product){
echo "<div class='product'>";
//Now you can call sql query to get items by product id
foreach($items as $item){
echo "<li class='list-item'>" . $item->name . "</li>"; //assuming $item has name property
} //end of inner loop
echo "<div class='product'>";
} //end of outer loop
Hello guyyz i need help in design,i don't have ideas about design, i have created dynamic menu in codeigniter i want to set that menu in treeview.
First click on parent menu after open child menus, so how to implement it help me
Here is My View Code:
<?php
foreach ($test as $val) {
$array = explode(",", $val->category_id);
}
foreach ($get_cat as $key => $value) {
if (in_array($value->category_id, $array)) {
echo $value->category_name . ' '; //Here My Menu Print
}
}
?>
You need to fetch all category with parent_id=0 then fetch subCategory. Try something like given below.
public function get_categories(){
$this->db->select('*');
$this->db->from('categories');
$this->db->where('parent_id', 0);
//Add here role condition
$parent = $this->db->get();
$categories = $parent->result();
$i=0;
foreach($categories as $p_cat){
$categories[$i]->sub = $this->sub_categories($p_cat->cat_id);
$i++;
}
return $categories;
}
Your subcategory function.
public function sub_categories($id){
$this->db->select('*');
$this->db->from('categories');
$this->db->where('parent_id', $id);
//add here role condition
$child = $this->db->get();
$categories = $child->result();
$i=0;
foreach($categories as $p_cat){
$categories[$i]->sub = $this->sub_categories($p_cat->cat_id);
$i++;
}
return $categories;
}
And your controller.
public function categories(){
$this->load->model('model_categories');
$data = $this->model_categories->get_categories();
print_r($data);
}
Here I got solution of dynamic menu design in CodeIgniter:
<?php
//GET CATEGORY ID FROM USER REGISTARTION
foreach ($test as $val) {
$array = explode(",", $val->category_id);
//CATEGORY ID MATCH WITH CATEGORY NAME FROM CATEGORY TABLE
foreach ($listMenuLevel1 as $key => $value) {
if (in_array($value->category_id, $array)) {
?>
<ul class="sidebar-menu">
<li class="treeview">
<a href="#">
<i class="fa fa-share"></i> <span><?php echo $value->category_name; ?></span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<?php foreach ($this->main_model->listchildMenus($value->category_id) as $menu2) : ?>
<li class="treeview">
<i class="fa fa-circle-o"></i><?php echo $menu2->category_name; ?><i class="fa fa-angle-left pull-right"></i>
<?php foreach ($this->main_model->listchildMenus($menu2->category_id) as $menu3): ?>
<ul class="treeview-menu">
<li class="treeview">
<i class="fa fa-circle-o"></i><?php echo $menu3->category_name; ?>
</li>
</ul>
<?php endforeach; ?>
</li>
<?php endforeach; ?>
</ul>
</li>
</ul>
<?php } ?>
<?php
}
}
?>
We have a magento 1.9 installation and on the left side we want to have 3 level categories to display as shown in the attached image (the breadcrumbs image is to show the levels). Currently I'm able to get the current category and his parent.
Below is the example of how I want it.
Could you help me out on this?
This is the code we have so far
<?php
$level = $this->getCurrentCategory()->getParentCategory()->getLevel();
if($level > 1){
echo '
<p class="back-to-parent">
<a href="' . $this->getCurrentCategory()->getParentCategory()->getUrl() . '">
<i class="fa fa-arrow-left" aria-hidden="true"></i> ' . $this->getCurrentCategory()->getParentCategory()->getName() . '
</a></p>';
}
else{
//
}
?>
<?php if ($categories = $this->getCategoriesNavMenu()): ?>
<div id="sidebar-nav" class="block sidebar-nav-left <?php echo $this->getBlockAlias() ?>">
<button type="button" class="btn visible-xs btn-block btn-primary" data-toggle="collapse" data-target="#sidebar-nav-content">Meer categorieën <i class="fa fa-filter" aria-hidden="true"></i></button>
<div id="sidebar-nav-content" class="collapse">
<div class="block-content">
<ul id="sidebar-nav-menu">
<?php if ($this->showHome()): ?>
<li class="<?php echo $this->getHomeClasses() ?>">
<span class="category_name">Home</span>
</li>
<?php endif; ?>
<?php echo $categories; ?>
</ul>
</div>
</div>
<?php if ($this->getConfig()->isCollapsible()): ?>
<script type="text/javascript" language="javascript">
//<![CDATA[
Codnitive = {
expandMenu: function(parent)
{
var mode = parent.getElementsByTagName("ul")[0].getAttribute("expanded");
(mode == 1) ? Codnitive.collapse(parent) : Codnitive.expand(parent);
},
expand: function(parent)
{
parent.getElementsByTagName("ul")[0].style.display = "block";
parent.getElementsByTagName("span")[0].style.backgroundPosition = "right center";
parent.getElementsByTagName("ul")[0].setAttribute("expanded", "1");
},
collapse: function(parent)
{
parent.getElementsByTagName("ul")[0].style.display = "none";
parent.getElementsByTagName("span")[0].style.backgroundPosition = "left center";
parent.getElementsByTagName("ul")[0].setAttribute("expanded", "0");
}
};
//]]>
</script>
<?php endif; ?>
</div>
<?php endif ?>
My brain doesn't seem to want to work this morning.. i have the following array:
private $nav_pages = [['0', 'Home', 'home'],
['0', 'About Us', 'about'],
['0', 'Our Services', 'services'],
['1', 'PROCURE TO PAY (P2P)', 'procure'],
['1', 'ORDER TO CASH (02C)', 'cash'],
['1', 'GENERAL ACCOUNTING', 'general'],
['2', 'Charting of Accounts', 'charting'],
['2', 'General Ledger Maintenance', 'maintenance'],
['2', 'Accounts Receivable Services', 'receivable'],
['2', 'Accounts Payable Services', 'payable'],
['2', 'Reconciliation of Bank Accounts and Credit Cards', 'reconciliation'],
['2', 'Preparing Financial Statements', 'statements'],
['2', 'Payroll Processing', 'payroll'],
['1', 'CLOSING & REPORTING', 'closing'],
['0', 'How It Works', 'how-it-works'],
['0', 'Contact Us','contact'],
['0', 'Careers', 'careers']];
This is then fed to a php page which is meant to lay out a multi-layered pure css drop down menu.. the php page code is:
<ul class="<?php echo $ul_class; ?>">
<?php $this_layer = 0;
// place array content into variables
foreach ($links as $link) {
$item_layer = $link[0];
$item_string = $link[1];
$item_link = $link[2];
if ($item_layer > $this_layer) { ?>
<ul>
<?php $this_layer++; }
elseif ($item_layer == $this_layer) { ?>
<li class="<?php echo $item_link; ?>">
<a class="<?php echo $item_link; ?>"
href="/<?php echo $item_link; ?>">
<?php echo $item_string; ?>
</a>
</li>
<?php }
elseif ($item_layer < $this_layer) { ?>
</li></ul>
<?php $this_layer--; } ?>
<?php } ?>
The output is not correct however as the above code always closes the list item containing the second layer before the second layer is ready to be closed. if that makes sense..
<ul class="pages_nav">
<li class="home">
<a class="home"
href="/home">
Home
</a>
</li>
<li class="about">
<a class="about"
href="/about">
About Us
</a>
</li>
<li class="services">
<a class="services"
href="/services">
Our Services
</a>
</li>
<ul>
<li class="cash">
<a class="cash"
href="/cash">
ORDER TO CASH (02C)
</a>
</li>
<li class="general">
<a class="general"
href="/general">
GENERAL ACCOUNTING
</a>
</li>
<ul>
<li class="maintenance">
<a class="maintenance"
href="/maintenance">
General Ledger Maintenance
</a>
</li>
<li class="receivable">
<a class="receivable"
href="/receivable">
Accounts Receivable Services
</a>
</li>
<li class="payable">
<a class="payable"
href="/payable">
Accounts Payable Services
</a>
</li>
<li class="reconciliation">
<a class="reconciliation"
href="/reconciliation">
Reconciliation of Bank Accounts and Credit Cards
</a>
</li>
<li class="statements">
<a class="statements"
href="/statements">
Preparing Financial Statements
</a>
</li>
<li class="payroll">
<a class="payroll"
href="/payroll">
Payroll Processing
</a>
</li>
</li></ul>
</li></ul>
<li class="contact">
<a class="contact"
href="/contact">
Contact Us
</a>
</li>
<li class="careers">
<a class="careers"
href="/careers">
Careers
</a>
</li>
SOLUTION:
<ul class="<?php echo $ul_class; ?>">
<?php $this_layer = 0;
// place array content into variables
foreach ($links as $link) {
$item_layer = $link[0];
$item_string = $link[1];
$item_link = $link[2];
// check if link needs to be manipulated
switch($do) {
case 'strtolower':
$item_string = strtolower($item_string);
break;
case 'strtoupper':
$item_string = strtoupper($item_string);
break;
} ?>
<?php if ($item_layer > $this_layer) { ?>
<ul>
<li class="<?php echo $item_link; ?>">
<a class="<?php echo $item_link; ?>"
href="/<?php echo $item_link; ?>">
<?php echo $item_string; ?>
</a>
<?php $this_layer++; }
elseif ($item_layer == $this_layer) { ?>
</li><li class="<?php echo $item_link; ?>">
<a class="<?php echo $item_link; ?>"
href="/<?php echo $item_link; ?>">
<?php echo $item_string; ?>
</a>
<?php }
elseif ($item_layer < $this_layer) { ?>
</li></ul></li><li class="<?php echo $item_link; ?>">
<a class="<?php echo $item_link; ?>"
href="/<?php echo $item_link; ?>">
<?php echo $item_string; ?>
</a>
<?php $this_layer--; } ?>
<?php } ?>
Never close the the li tag, close it when you add something
foreach ($links as $link) {
if ($item_layer > $this_layer) {
echo '<ul><li> ......';
this_layer++;
}elseif ($item_layer == $this_layer) {
echo '</li><li>......';
}elseif ($item_layer < $this_layer) {
echo '</li></ul><li>......';
$this_layer--;
}
}
Last you probably need to add a echo '</li></ul>' outside of the foreach to close everything
Had to rework the code a little, usually i organize the php menu structure in tree form makes it easier to parse into html menus, but here it is:
<ul class="<?php echo $ul_class; ?>">
<?php
$this_layer = 0;
$closeit = false;
// place array content into variables
foreach ($nav_pages as $link) {
$item_layer = $link[0];
$item_string = $link[1];
$item_link = $link[2];
if ($item_layer > $this_layer) {
// Changing level, dont close the previous li
?><ul><?php
$closeit = false;
$this_layer++;
}
if ($item_layer == $this_layer) {
// Same level, check if you need to close previous li
if ($closeit) {
?></li><?php
}
// Render the li
?>
<li class="<?php echo $item_link; ?>">
<a class="<?php echo $item_link; ?>"
href="/<?php echo $item_link; ?>">
<?php echo $item_string; ?>
</a>
<?php
// Close it on next loop
$closeit = true;
}
elseif ($item_layer < $this_layer) {
// Changing layer back down, close the previous li and the current level ul
?>
</li>
</ul>
<?php
$this_layer--;
}
}
// Finished loop, there should still be a li waiting to be closed
if ($closeit) {
?></li><?php
}
// Close menu
?>
</ul>
Should be working, let me know if it isnt
Suggested php menu structure:
$menu = array(
array(
"url"=>"/place.php",
"text"=>"Go to place"
),
array(
"url"=>"/place2.php", // not necessary
"text"=>"with submenu",
"children"=>array(
array(
"url"=>"/placewithinplace2.php",
"text"=>"submenu item"
)
)
)
);