如何在没有导航栏的情况下在基础中创建此功能？答案

【问题标题】：how to create this feature in foundation without it being a navbar?如何在没有导航栏的情况下在基础中创建此功能？
【发布时间】：2017-04-12 01:44:00
【问题描述】：

我最初有一个引导 css 样式的 WordPress 主页，后来我转换为 Foundation css。我最初想开发一些看起来完全一样的东西：

但我可能不一定需要那个 BLOG |白色导航菜单上方的青色条上的登录部分。我以为我可以摆脱顶部导航菜单，但我明白了：

我只想要没有菜单的青色条。

这就是我在 header.php 中的内容：

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package UpAbility
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'upability' ); ?></a>

    <!-- HEADER ========================================================================================== -->
<header class="site-header" role="banner">
    <!-- NAVBAR ====================================================================================== -->
    <div class="top-nav">
      <div class="row">
        <div class="columns large-6 medium-6">
            <ul id="menu-topmenu" class="top-list-right">
              <?php wp_nav_menu( array(

                         'theme_location'       => 'topnav',
                         'container'            => 'nav',
                         'menu_class'           => 'nav navbar-nav navbar-right'

                      ) ); 
               ?>
            </ul>
        </div>
      </div>
    </div>



    <div class="top-bar">
      <div class="top-bar-left">
        <a class="navbar-brand" href="/"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/Logo.png" alt="UpAbility"></a>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <?php
                wp_nav_menu(array(

                    'theme_location'    => 'primary',
                    'container'         => 'nav',
                    'container_class'   => 'navbar-collapse collapse',
                    'menu_class'        => 'nav navbar-nav navbar-right'
                ));
            ?>
        </ul>
      </div>
    </div>

</header>

    <div id="content" class="site-content">

这里有一段 style.css 文件：

/* Top Nav */

.top-nav {
    width: 100%;
    background: #219CD7;
    padding: 0;
    margin: 0;
}

.top-list-right {
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
    float: right;

    li {
        list-style: none;
        float: left;
        padding: 10px 15px;
        font-size: 13px;
    }

    a {
        color: #ffffff;
    }
}

/* Top Bar */

.top-bar {

}

我没有发布整个内容，因为它是通过 underscores.me 生成的，因此 style.css 有超过 300 多个 loc

【问题讨论】：

不看 CSS 怎么办？
@Waxi，抱歉，我发表这篇文章时很着急。正在扑灭另一场火灾。我现在发布 css。
您是否能够链接到相关页面或提供显示问题的小提琴？这样会更容易找到确切的问题。

标签： jquery html css wordpress twitter-bootstrap

【解决方案1】：

使用以下功能列出您的菜单。通过这种方式，您可以为您的导航菜单创建自定义 html。

<?php 
     function showMyMenu($menu)
     {
         $navData = wp_get_nav_menu_items($menu); 
?>
    <ul class="nav navbar-nav navbar-right is-hidden">
<?php
         foreach($navData as $k => $v)
         {   
             echo '<li><a class="page-link" href="' . $v->url . '"> ' . $v->title . ' </a></li>';
         }
?>
    </ul>
<?php } ?>

【讨论】：