How to set first menu active in mega menu?

Viewed 57

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 :

enter image description here

And this is when I go on it with mouse, it show up with no problem.

enter image description here

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']; ?>">
  <a href="categories/<?php echo $row['catId']; ?>/<?php echo $row['cat_seo_url']; ?>" class="dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false"><?php echo $row['catName']; ?><span class="caret"></span></a>
  <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; ?>"><a href="<?php echo $subq['catId']; ?>/<?php echo $subq['cat_seo_url']; ?>"><?php echo $subq['catName']; ?></a></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"><a href="is-allowance-instantly-strangers-applauded"><?php echo $subcats['cat_seo_url']; ?> Is allowance instantly strangers applauded</a></h3>
              <p class="post-meta">   
                <a href="profile/admin">admin</a>
                <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>';
  }
}
} 
0 Answers
Related