Come implementare correttamente un menu strutturato in php

Question

il mio obiettivo è quello di modificare/sostituire il wordpress php codice di menu esistente, avendo come punto di partenza, questa struttura del menu html/css/js in codepen:

Home/Portfolio/About e andando giù nella struttura Portfolio, un'altra pagina con Home/Portfolio projects.

In poche parole, ho registrato nel script-calls.php file mynewmenu.js con la seguente sequenza di

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; 
     } 
    }); 
}); 

ho creato la struttura del menu desiderato (l'assegnazione di diversi menù a pagine diverse come u'll vedere here) e ho identificato il php che gestisce la struttura del menu esistente:

  <!-- 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 -->  

A questo punto, la mia domanda è: come posso implementare nelle sequenze le seguenti sequenze html che generano le immagini di rollover collegate ai pulsanti del menu, tenendo presente che ci sono diverse sezioni, ciascun menu con la sua sezione come segue. Home/Portfolio/A proposito di:

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

e menu 2, progetti Home/portfolio:

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

ho lasciato intenzionalmente la css fuori discussione, perché, questo è un altro capitolo di questo codice Tweak.

LE: Devo dire che l'effetto di immagine rollover attivati ​​dai pulsanti del menu, sarà sufficiente (e dare un senso) per essere disponibili, solo sul Home page e Portfolio page del sito. Penso che potrebbe essere molto difficile ottenere lo stesso effetto quando abbiamo una pagina di progetto aperta (diciamo FIVA) e abbiamo il mouse sopra un altro pulsante di progetto, per esempio.

LE2: per quanto riguarda le immagini di rollover, non sto cercando un codice di fantasia php che dovrebbe catturare un'anteprima dell'ultimo progetto o qualcosa del genere; un codice php che mi consente di predefinire i collegamenti di origine delle immagini come abbiamo nelle precedenti sezioni del menu html, andrà bene, tenendo conto del fatto che queste immagini non verranno sostituite così spesso.

LE3: Pure sperimentale, e vi prego di correggermi, stavo solo pensando, utilizzando include PHP function per chiamare due html file separati in header.php (anche in questi sopra descritti sezioni di menu 1 e 2) potrebbe essere l'inizio di una soluzione alternativa?

   <!-- 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 -->  

Qualche idea? Grazie,

Answer 1

Non sono uno sviluppatore di wordpress, ma mi sembra che tu abbia bisogno di un modo per rilevare la categoria/post/pagina attiva? sei su ... è difficile capire le tue strutture dati guardando il sito web.

<!-- 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 --> 

Rivisto la mia risposta per darvi un'idea migliore di quale test mi riferisco anche io.