如何将不同的菜单样式应用到首页？答案

【问题标题】：How to apply a different menu styling to the front page?如何将不同的菜单样式应用到首页？
【发布时间】：2014-02-26 22:32:57
【问题描述】：

我正在尝试弄清楚如何在我使用 fullpage.js 的 WordPress 网站上获得第二个 menustyling。

我有一个自定义助行器，菜单由 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);
    }
}
?>

【问题讨论】：

标签： jquery css wordpress fullpage.js

【解决方案1】：

如果您只想为第一部分应用不同的样式（不是幻灯片，幻灯片是水平的），您可能希望通过使用插件回调来做到这一点，例如 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

【讨论】：

非常感谢阿尔瓦罗！效果很好！最后一个任务是弄清楚如何将幻灯片添加到循环中，那么脚本就完美了！再次感谢！编辑：我确实想通了，编辑了我的回复，抱歉。
是的。 demo 元素应该是您的菜单。
非常有用，干杯！如果您启用了 css3: true ，那么您需要指定固定元素才能使其正常工作（例如 jsfiddle.net/ut8c6）让我困惑一秒钟！

【解决方案2】：

使用 wordpress 正文类

在主页上，body 标签将有一个 home 类，例如 <body class="home">

所以主页上的目标菜单是这样的：

.home .your-menu-selector

【讨论】：

感谢您的回复，但感谢我使用的脚本不起作用。我想将它的#header-section 应用于幻灯片类，但它不起作用。不过还是谢谢。