CODEWITHSUNDEEP
phpwordpressmegamenu
Matheus
Matheus

Reputation: 21

Mega Menu without Plugin (WordPress) (code is ready but doesn't work)

I'm asking for help.

This is my header structure:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="wrapper" class="hfeed">
<header id="header" role="banner">
<div id="branding">
<div id="site-title">
<?php if ( is_front_page() || is_home() || is_front_page() && is_home() ) { echo '<h1>'; } ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_html( get_bloginfo( 'name' ) ); ?>" rel="home"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a>
<?php if ( is_front_page() || is_home() || is_front_page() && is_home() ) { echo '</h1>'; } ?>
</div>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
</div>
<nav id="menu" role="navigation">
<button type="button" class="menu-toggle"><span class="menu-icon">&#9776;</span><span class="menu-text screen-reader-text"><?php esc_html_e( ' Menu', 'generic' ); ?></span></button>

<?php
               $menu_name = 'main-menu';
                $locations = get_nav_menu_locations();
          $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
               $menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );               
?>
                     <ul class="nav">
                         <?php
                         $count = 0;
                         $submenu = true;

                         foreach( $menuitems as $item ):
                             // set up title and url
                             $title = $item->title;
                             $link = $item->url;

                             // item does not have a parent so menu_item_parent equals 0 (false)
                             if ( !$item->menu_item_parent ):

                                       if ( is_active_sidebar( 'mega-menu-widget-area-' . $item->ID ) ) {
                                        echo "<div id=\"mega-menu-{$item->ID}\" class=\"mega-menu\">";
                                            dynamic_sidebar( 'mega-menu-widget-area-' . $item->ID );
                                        echo "</div>";
                                    }
                             // save this id for later comparison with sub-menu items
                             $parent_id = $item->ID;
                         ?>

                         <li>
                             <a href="<?php echo $link; ?>">
                                 <span><?php echo $title; ?></span>
                             </a>

                         <?php endif; ?> 

                            <?php if ( $parent_id == $item->menu_item_parent ): 

                                ?>
                              <?php if ( !$submenu ): $submenu = true; 

                                ?>
                                 <div class="mega-menu sub-menu-columns">
                                  <div class="mega-bg">
                                    <div class="mega-mrg">
                                  <div class="maga-half">
                                  <ul>
                                 <?php endif; ?>
                                  <li><a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a></li>
                                  <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
                                 </ul>                                 
                                  </div>

                               </div>  
                               </div>
                               </div>  

                                <?php $submenu = false; endif; ?>
                                 <?php endif; ?>       

                              <?php if (@$menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
                         </li>                           
                         <?php $submenu = false; endif; ?>

                     <?php $count++; endforeach; ?>

</ul>
</nav>
</header>
<div id="container">

I've registered a custom sidebar in the functions.php 

function wpmm_init() {
    $location = 'main-menu';
    $css_class = 'has-mega-menu';
    $locations = get_nav_menu_locations();
    if ( isset( $locations[ $location ] ) ) {
        $menu = get_term( $locations[ $location ], 'nav_menu' );
        if ( $items = wp_get_nav_menu_items( $menu->name ) ) {
            foreach ( $items as $item ) {
                if ( in_array( $css_class, $item->classes ) ) {
                    register_sidebar( array(
                        'id'   => 'mega-menu-widget-area-' . $item->ID,
                        'name' => $item->title . ' - Mega Menu',
                    ) );
                }
            }
        }
    }
}
add_action( 'widgets_init', 'wpmm_init' );

Now - if menu item has class "has-mega-menu" the widget itself is being created only for the particular menu item. I can put there image, html, custom links etc.

custom menu

if menu item has class " has-mega-menu " this widget gets unique id and there I can put my image and some description.

menu

Unfortunately it doesn't work. The container containing image and the rest of links for example, is outputted outside of the parent with ul

console

I want that particular, unique widget to be outputted within the ul class (parent) so it will work like mega menu. Can someone help me? Please. I'm trying to fix this code (I'm just beginner) but this is literally third day and I can't find a solution.

Upvotes: 1

Views: 3605

Answers (1)

kubaS
kubaS

Reputation: 11

Not quite sure from your code example, but this should fix your problems with missplacement

register_sidebar( array(
        'id'   => 'mega-menu-widget-area-' . $item->ID,
        'name' => $item->title . ' - Mega Menu',
        'before_widget' => '',
        'after_widget' => '', 
      ) );

Upvotes: 1

Related Questions