How to properly implement a structured menu in php

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>">Please assign a menu from Appearance -> Menus</a></li>
						<?php } ?>
					</nav>
				<?php } ?>
				<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
				<?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
				<a href="#"> 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 <div> 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.
Any thoughts? Thank you,