html - How to properly implement a structured menu in php

my goal is to tweak/replace the existing wordpressphp menu code, having as a start point, thishtml/css/js menu structure in codepen:

and going down in Portfolio structure, another page having .

// 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;
        }
    });
});
Copy code

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

      <!-- Start Header -->
         ...        
        <div >   
          <div >
            <?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 >
                    <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" >
              <div>
                <span></span><span></span><span></span>
              </div>
            </a>
          </div>     
        </div> 

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

At this point, my question is, how can I implement into theheader.php the followinghtml 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>
Copy code

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>
Copy code

I left intentionally thecss 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 fancyphp code that's supposed to grab a preview of the last project or something; aphp code that allows me to predefine image source links like we have in the abovehtml 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 separatehtml files inheader.php (including in these the above described menu 1 and 2 sections) could be the beginning of a workaround?

        <!-- Start Header -->
           ...        
          <div >   
            ...
                    <ul >
                      <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 -->  
Copy code

Any thoughts? Thank you,