Question

免责声明：我很遗憾这篇文章看起来太大但我只是想提供所有细节。我确信这个问题非常愚蠢，但我无法弄明白:(

背景：我正在使用来自Access Press的名为Parallax的精彩主题创建一个wordpress网站。我想在购买专业版之前玩我的商业网站，所以决定自己做一些改变。

问题：您可以使用主题菜单（允许动画和同一页面滚动;此Golum想要）或使用原生wordpress菜单（不允许滚动; Golum讨厌）。

已解决的解决方法：我想我可以进入header.php并手动添加一个菜单项。以下是我理解的代码：

<nav id="site-navigation" class="main-navigation">
        <div class="menu-toggle"><?php _e( 'Menu', 'accesspress_parallax' ); ?></div>

            <?php 
            $sections = of_get_option('parallax_section');
            if(of_get_option('enable_parallax') == 1 && of_get_option('enable_parallax_nav') == 1):
            ?>
            <ul class="nav single-page-nav">
                <?php
                $home_text = of_get_option('home_text');
                if(of_get_option('show_slider')== "yes" && !empty($home_text)) : ?>
                    <li class="current"><a href="<?php echo esc_url( home_url( '/' ) ); ?>#main-slider"><?php echo esc_attr($home_text); ?></a></li>

                <?php endif;

                if(!empty($sections)):
                foreach ($sections as $single_sections): 
                    if($single_sections['layout'] != "action_template" && $single_sections['layout'] != "blank_template" && $single_sections['layout'] != "googlemap_template" && !empty($single_sections['page'])) :
                    $title = get_the_title($single_sections['page']); ?>
                    <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>#section-<?php echo $single_sections['page']; ?>"><?php echo $title; ?></a></li>
                    <?php 
                    endif;
                endforeach; 
                endif; ?>
                    <li><a href="http://google.com" target="_self">Pre-order Here</a></li>
            </ul>
            <?php   
            else: 
                <some more code that picks custom menu if you choose to skip parallax menu>

        </nav>

第一个LI项只是将文本'Home'放在页面中。第二个从parallax菜单中选择所有值。 最后一项LI项目是我所包含的项目。

                <li><a href="http://google.com" target="_self">Pre-order Here</a></li>

行为：这样可以完美地将项目添加到菜单中，也可以点击。问题是 - 当它被点击时，它什么都不做。如果我右键单击它并在新选项卡中打开，它可以正常工作。包括以下相关的CSS供您参考

修改：如果我包含指向该网页其他部分的链接。有用。示例：http://domain.com/#section-20

.main-navigation {
    float: right;
    max-width: 80%;
    margin-top: 15px;
}
.logo-top .main-navigation{
    float: none;
    width: auto;
    text-align: center;
    max-width: none;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: inline-block;
}
.main-navigation ul li{
    position: relative;
}
.main-navigation > ul > li {
    float: left;
    position: relative;
    font-family: 'Oxygen', sans-serif;  
    font-weight: 400;
}
.main-navigation > ul > li > a{
    text-transform: uppercase;
    font-size:14px;
    padding: 5px 15px;
}
.main-navigation > ul > li.current a{
    color: #E66432;
}
.main-navigation a {
    display: block;
    text-decoration: none;
    color:#333;
}
.main-navigation ul ul {
    background: #FFF;
    position: absolute;
    top: 100%;
    left:0;
    z-index: 99999;
    padding:0 10px;
    font-size: 15px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    display: none;
}
.main-navigation ul ul ul {
    left: 100%;
    top: 0;
}
.main-navigation ul ul a {
    min-width: 200px;
}
.main-navigation ul ul li {
    border-bottom: 1px solid #EEE;
    padding: 8px 0;
}
.main-navigation ul ul li:last-child{
    border:none;
}
.main-navigation li:hover > a {
    color: #E66432;
}
.main-navigation ul li:hover > ul {
    display: block;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a {
    color: #E66432;

Answer 1

谢谢@pschueller和@dingo_d !!

你把我推向了正确的方向。滚动的JS插件的github有秘密的味道。

我必须使用href为我的标记添加一个class ='external'，并使用以下内容更新jquery.nav.js：

替换

filter: '',

带

filter: ':not(.external)',

链接无法在Wordpress菜单中单击，但可以在新选项卡中打开

1 个答案: