如何將不同的菜單樣式應用到首頁？

我試圖弄清楚如何獲得第二個menustyling上一個WordPress網站，我使用fullpage.js上。如何將不同的菜單樣式應用到首頁？

我有一個自定義的步行者和菜單作品anchorlinks幻燈片。我試圖弄清楚如何改變幻燈片的菜單樣式，所以首頁有它自己的。

網站：http://www.svenssonsbild.se/Svenssonsbild2

循環：

<?php 

if (($locations = get_nav_menu_locations()) && $locations['slides']) { 

    $menu = wp_get_nav_menu_object($locations['slides']); 
    $menu_items = wp_get_nav_menu_items($menu->term_id); 
    $pageID = array(); 

    foreach($menu_items as $item) { 
     if($item->object == 'page') 
     $pageID[] = $item->object_id; 

    } 
    query_posts(array('post_type' => 'page','post__in' => $pageID, 'posts_per_page' =>  
    count($pageID), 'orderby' => 'post__in')); 

} 


while(have_posts()) : the_post(); 

?> 


<!--  <div id="<?php echo $post->post_name;?>" class="section"> --> 

<div id="pageSlide-<?php echo $post->post_name;?>" class="section" data-anchor="<?php echo $post->post_name;?>">

沃克：

<?php 
class description_walker extends Walker_Nav_Menu { 

    function start_el(&$output, $item, $depth, $args) { 
     global $wp_query; 
     $indent  = ($depth)?str_repeat("\t", $depth):''; 
     $class_names = $value = ''; 
     $classes  = empty($item->classes)?array():(array) $item->classes; 
     $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item)); 
     $class_names = ' class="'.esc_attr($class_names).'"'; 
     $output  .= $indent.'<li id="menu-item-'.$item->ID.'"'.$value.$class_names.'>'; 
     $attributes = !empty($item->attr_title)?' title="'.esc_attr($item->attr_title).'"':''; 
     $attributes .= !empty($item->target)?' target="'.esc_attr($item->target).'"':''; 
     $attributes .= !empty($item->xfn)?' rel="'.esc_attr($item->xfn).'"':''; 
     if($item->object == 'page') { 
      $varpost = get_post($item->object_id); 
      if(is_home()) { 
       $attributes .= ' href="#'.$varpost->post_name.'"'; 
      } 
      else { 
       $attributes .= ' href="'.home_url().'/#'.$varpost->post_name.'"'; 
      } 
     } 
     else 
      $attributes .= !empty($item->url)?' href="'.esc_attr($item->url).'"':''; 
     $item_output  = $args->before; 
     $item_output .= '<a'.$attributes.'>'; 
     $item_output .= $args->link_before.apply_filters('the_title', $item->title, $item->ID); 
     $item_output .= $args->link_after; 
     $item_output .= '</a>'; 
     $item_output .= $args->after; 
     $output   .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 
    } 
} 
?>

來源

2014-02-26 user2059370

如果你只是想應用不同風格的第一部分（不滑動，滑道是水平的），你可能想通過做插件回調，如afterLoad或onLeave。

喜歡的東西：

$.fn.fullpage({ 
    slidesColor: ['red', 'blue'], 
    afterLoad: function (anchorLink, index) { 
     //if it is not in the 1st section, we apply sectionMenu class 
     if (index !=1) { 
      $('.demo').addClass('sectionMenu'); 
     } 

     //otherwise, we remove it 
     else{ 
      $('.demo').removeClass('sectionMenu'); 
     } 
    } 
});

Live example

來源

2014-02-27 11:06:09 Alvaro

非常感謝Alvaro！這工作完美！最後的任務是找出如何將幻燈片添加到循環中，然後腳本是完美的！再次感謝！編輯：我弄明白了，編輯我的迴應，對不起。 – user2059370

是的。 'demo'元素假設是你的菜單。 – Alvaro

非常有用，歡呼！如果你啓用了css3：true，那麼你需要指定固定的元素來工作（像這個http://jsfiddle.net/ut8c6/）讓我困惑了一秒鐘！ – patrickzdb

使用主頁上的WordPress的體類

body標籤將有一個班的家像這樣<body class="home">

所以在主頁上的目標菜單，如下所示：

.home .your-menu-selector

來源

2014-02-26 23:06:46

感謝您的答覆，但由於使用不工作的腳本i'm。它是＃標題部分，我想申請到幻燈片，但它不起作用。不過謝謝。 – user2059370

如何將不同的菜單樣式應用到首頁？

回答

相關問題