How to properly implement a structured menu in php

Question

my goal is to tweak/replace the existing wordpress php menu code, having as a start point, this html/css/js menu structure in codepen:

Home / Portfolio / About and going down in Portfolio structure, another page having Home / Portfolio projects.

In a few words, I've registered in script-calls.php the mynewmenu.js file with the following sequence

js:

// mynewmenu implementation
jQuery(function($){ 
    var height, index, prevIndex

    $('nav ul li').mouseover(function(e){
        //Set the aesthetics (similar to :hover)
        $('nav ul li').removeClass('hovered');
        $(this).addClass('hovered');

        //Gets relevant data required for scrolling of menuRight    
        height = $("#menuRight").css("height").replace('px','');
        index = $(this).index();

        //If the category button (from the navlist) has changed
        if (index != prevIndex){
            $("#menuRight").stop();

            $("#menuRight").animate({"scrollTop":height*index}, 800, 'easeOutBounce'); //This requires jQuery UI for easing options.
            prevIndex = index;
        }
    });
});

I've created the desired menu structure (assigning different menus to different pages as u'll see here) and I've identified the php that manage the existing menu structure:

            <!-- Start Header -->
                 ...                
                <div class="myrow max_width ">      
                    <div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
                        <?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
                        <?php if ($full_menu_true) { ?>
                            <nav id="full-menu" role="navigation">
                                <?php if ($page_menu) { ?>
                                    <?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown  ) ); ?>
                                <?php } else  if(has_nav_menu('nav-menu')) { ?>
                                  <?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
                                <?php } else { ?>
                                    <ul class="full-menu">
                                        <li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li>
                                    </ul>
                                <?php } ?>

              /* I think that <div id='menuRight'> html sequences *translated*
              in *php* should begin here in a conditional manner: *if* we find ourself on the
              Home page, should be activated Home / Portfolio / About sequence and also if we
              are on the Portfolio page, we should receive the menu 2, generated by Home / Portfolio 
              projects sequence. More details below. */  

                            </nav>
                        <?php } ?>
                        <?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
                        <?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
                        <a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
                            <div>
                                <span></span><span></span><span></span>
                            </div>
                        </a>
                    </div>          
                </div>  

            </header>
            <!-- End Header -->    

At this point, my question is, how can I implement into the header.php the following html sequences that generate the rollover images linked to the menu buttons, keeping in mind that there are different sections, each menu with his section as follow. Home / Portfolio / About:

<nav>
  <ul>
   ...
  </ul>
    <div id='menuRight'>
       <div>
           Home
           <img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
          </img>
       </div>
      <div>
          Portfolio
          <img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
          </img>
      </div>
      <div>
          About
          <img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
          </img>
      </div>
    </div>
</nav>

and menu 2, Home / Portfolio projects:

<nav>
  <ul>
    ...
  </ul>
    <div id='menuRight'>
       <div>
           Home
           <img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
          </img>
       </div>
      <div>
          Fiva
          <img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
          </img>
      </div>
      <div>
          Caterham
          <img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
          </img>
      </div>
      <div>
          Mobile
          <img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
          </img>
      </div>
    </div>
</nav>

I left intentionally the css out of discussion because, that's another chapter of this code tweak.

LE: I have to mention that the rollover image effect activated by the menu buttons, will be enough (and make sense) for it to be available, only on the Home page and Portfolio page of the site. I think that It could be very tricky to achieve the same effect when we have a project page opened (let's say FIVA) and have the mouse over another project button for example.

LE2: regarding the rollover images, I am not looking for a fancy php code that's supposed to grab a preview of the last project or something; a php code that allows me to predefine image source links like we have in the above html menu sections, will be just fine, taking in consideration the fact that these images will not be replaced so often.

LE3: Pure experimental, and please correct me, I was just thinking, using include PHP function to call two separate html files in header.php (including in these the above described menu 1 and 2 sections) could be the beginning of a workaround?

                <!-- Start Header -->
                     ...                
                    <div class="myrow max_width ">      
                        ...
                                        <ul class="full-menu">
                                            <li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li>
                                        </ul>
                                    <?php } ?>
                                       <?php
                  /* But there still should be a php code, that call the  
                  html sections *if* we are on Homepage or Portfolio page.  
                  Something like:
                  Php instructions, if Home page */  

             include('menu1section.html');

                  // and also php instructions, if Portfolio page 

             include('menu2section.html');
                                        ?>

                                </nav>
                            <?php } ?>
                            <?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
                            ...
                    </div>  

                </header>
                <!-- End Header -->    

Any thoughts? Thank you,

Answer 1

I'm not a wordpress dev, but it seems to me you need a way to detect the active category/post/page? you are on... it's difficult to understand your data structures from looking at the website.

<!-- Start Header -->
...                
<div class="myrow max_width ">      
...
    <ul class="full-menu">
        <li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">
            Please assign a menu from Appearance -> Menus
        </a></li>
    </ul>
    <?php } ?>
    <?php
        $thisCat = get_category(get_query_var('cat'));
        switch ($thisCat->name) {
            case 'Home':
                echo "Home test";
                break;
            case 'Portfolio':
                echo "portfolio test";
                break;
            case 'About Us':
                echo "About Us test";
                break;
        }
    ?>
....
<!-- End Header -->

Revised my answer to give you a better idea of what test I'm referring too.