关于创世纪主题的响应菜单

时间：2013-12-09 作者：Aegis

您好，我正在定制Genesis框架主题Jane，我想更改菜单以响应Twitter引导。我已经发现了一个问题，即如何重写genesis\\u do\\u subnav函数Using a filter to modify Genesis wp_nav_menu. 我想重写该方法并生成如下所示的HTML。genesis源代码：genesis_do_subnav() 生成当前使用的HTML。

自定义输出：

<nav class="nav-secondary navbar navbar-default" role="navigation" itemscope="itemscope"
 itemtype="http://schema.org/SiteNavigationElement">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>
<div class="wrap collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul id="menu-main-menu" class="menu genesis-nav-menu menu-secondary nav navbar-nav">
        <li id="menu-item-4519"
            class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4519">
            <a href="link">Home</a>
        </li>
        <li id="menu-item-4522"
            class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-4522 dropdown">
            <a href="link">Home</a>
            <ul class="sub-menu dropdown-menu">
                <li id="menu-item-4523"
                    class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4523">
                    <a href="link">Home</a></li>
                <li id="menu-item-4524"
                    class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4524">
                    <a href="link">Home</a></li>
            </ul>
        </li>
    </ul>
</div>
</nav>
genesis\\u do\\u subnav（）输出生成的当前HTML：

<nav class="nav-secondary" role="navigation" itemscope="itemscope"
 itemtype="http://schema.org/SiteNavigationElement">
<div class="wrap">
    <ul id="menu-main-menu" class="menu genesis-nav-menu menu-secondary">
        <li id="menu-item-7"
            class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-7">
            <a href="link">Home</a></li>
        <li id="menu-item-9931"
            class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-9931">
            <a href="link">Home</a>
            <ul class="sub-menu">
                <li id="menu-item-9777"
                    class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9777">
                    <a href="link">Home</a></li>
            </ul>
        </li>
    </ul>
</div>
</nav>
有人能告诉我如何为切换按钮添加额外的div来展开/折叠菜单，以及如何更改吗

<div class="wrap">
到

<div class="wrap collapse navbar-collapse" id="bs-example-navbar-collapse-1">

1 个回复
SO网友:Anything Graphic

我之前回答过，但我提供的链接已经不存在了。所以，我将在这里发布代码，希望它就是您所要寻找的。

在您的功能中。php，添加以下代码段以创建标记：

/* Mobile Menu
----------------------------------------------------------------------------------------*/
add_action( \'genesis_site_description\', \'ls_mobile_menu_toggle\', 5 );
function ls_mobile_menu_toggle() {
    echo \'<div class="menu-toggle">\';
        echo \'<li></li><li></li><li></li>\';
    echo \'</div>\';
}
在JS文件中，输入以下代码片段以实现打开/关闭功能：

// Show/hide the main navigation
$(\'.menu-toggle\').click(function() {
    $(this).toggleClass(\'open\');
    $(\'.header-widget-area\').toggleClass(\'expanded\');
});
最后，您的风格：对于桌面：

.menu-toggle {
    display: none;
    visibility: hidden;
}
对于您选择的媒体查询：

    .menu-toggle {
        background: #000;
        color: #FFF;
        cursor: pointer;
        display: block;
        float: none;
        height: 40px;
        margin: 3rem auto 1rem;
        overflow: hidden;
        padding: 4px 10px;
        text-align: center;
        visibility: visible;
        width: 46px;
}

    .menu-toggle li {
        background: #FFF;
        display: block;
        height: 4px;
        margin: 5px auto;
    }

    .menu-toggle a:hover,
    .menu-toggle a:active {
        text-decoration: none;
    }

    .header-widget-area {
        max-height: 0;
        overflow: hidden;
        -webkit-transition: max-height 0.8s;
        -moz-transition: max-height 0.8s;
        transition: max-height 0.8s;
    }

    .header-widget-area.expanded {
        max-height: 100px;
    }
您可能需要更改媒体查询中的选择器，但不必这样做。风格随心所欲。

您可能还需要提供标题区域：

position: relative;

结束
标签： menus   customization   genesis-theme-framework   responsive   twitter-bootstrap   小码农  

相关推荐

注册_NAV_MENUS，然后以编程方式创建菜单

我有一个register_nav_menus 调用我的主题函数。php：//register nav menu and footer nav. register_nav_menus( array( \'main-nav\' => \'Main Navigation\', \'footer-nav\' => \'Footer Navigation\' ) ); 这很好，但我想采取额外的步

关于创世纪主题的响应菜单 - 小码农CODE - 行之有效找到问题解决它

关于创世纪主题的响应菜单

时间：2013-12-09 作者：Aegis

您好，我正在定制Genesis框架主题Jane，我想更改菜单以响应Twitter引导。我已经发现了一个问题，即如何重写genesis\\u do\\u subnav函数Using a filter to modify Genesis wp_nav_menu. 我想重写该方法并生成如下所示的HTML。genesis源代码：genesis_do_subnav() 生成当前使用的HTML。

自定义输出：

<nav class="nav-secondary navbar navbar-default" role="navigation" itemscope="itemscope"
 itemtype="http://schema.org/SiteNavigationElement">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>
<div class="wrap collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul id="menu-main-menu" class="menu genesis-nav-menu menu-secondary nav navbar-nav">
        <li id="menu-item-4519"
            class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4519">
            <a href="link">Home</a>
        </li>
        <li id="menu-item-4522"
            class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-4522 dropdown">
            <a href="link">Home</a>
            <ul class="sub-menu dropdown-menu">
                <li id="menu-item-4523"
                    class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4523">
                    <a href="link">Home</a></li>
                <li id="menu-item-4524"
                    class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4524">
                    <a href="link">Home</a></li>
            </ul>
        </li>
    </ul>
</div>
</nav>
genesis\\u do\\u subnav（）输出生成的当前HTML：

<nav class="nav-secondary" role="navigation" itemscope="itemscope"
 itemtype="http://schema.org/SiteNavigationElement">
<div class="wrap">
    <ul id="menu-main-menu" class="menu genesis-nav-menu menu-secondary">
        <li id="menu-item-7"
            class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-7">
            <a href="link">Home</a></li>
        <li id="menu-item-9931"
            class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-9931">
            <a href="link">Home</a>
            <ul class="sub-menu">
                <li id="menu-item-9777"
                    class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9777">
                    <a href="link">Home</a></li>
            </ul>
        </li>
    </ul>
</div>
</nav>
有人能告诉我如何为切换按钮添加额外的div来展开/折叠菜单，以及如何更改吗

<div class="wrap">
到

<div class="wrap collapse navbar-collapse" id="bs-example-navbar-collapse-1">

1 个回复
SO网友:Anything Graphic

我之前回答过，但我提供的链接已经不存在了。所以，我将在这里发布代码，希望它就是您所要寻找的。

在您的功能中。php，添加以下代码段以创建标记：

/* Mobile Menu
----------------------------------------------------------------------------------------*/
add_action( \'genesis_site_description\', \'ls_mobile_menu_toggle\', 5 );
function ls_mobile_menu_toggle() {
    echo \'<div class="menu-toggle">\';
        echo \'<li></li><li></li><li></li>\';
    echo \'</div>\';
}
在JS文件中，输入以下代码片段以实现打开/关闭功能：

// Show/hide the main navigation
$(\'.menu-toggle\').click(function() {
    $(this).toggleClass(\'open\');
    $(\'.header-widget-area\').toggleClass(\'expanded\');
});
最后，您的风格：对于桌面：

.menu-toggle {
    display: none;
    visibility: hidden;
}
对于您选择的媒体查询：

    .menu-toggle {
        background: #000;
        color: #FFF;
        cursor: pointer;
        display: block;
        float: none;
        height: 40px;
        margin: 3rem auto 1rem;
        overflow: hidden;
        padding: 4px 10px;
        text-align: center;
        visibility: visible;
        width: 46px;
}

    .menu-toggle li {
        background: #FFF;
        display: block;
        height: 4px;
        margin: 5px auto;
    }

    .menu-toggle a:hover,
    .menu-toggle a:active {
        text-decoration: none;
    }

    .header-widget-area {
        max-height: 0;
        overflow: hidden;
        -webkit-transition: max-height 0.8s;
        -moz-transition: max-height 0.8s;
        transition: max-height 0.8s;
    }

    .header-widget-area.expanded {
        max-height: 100px;
    }
您可能需要更改媒体查询中的选择器，但不必这样做。风格随心所欲。

您可能还需要提供标题区域：

position: relative;

标签： menus   customization   genesis-theme-framework   responsive   twitter-bootstrap   小码农  

相关推荐

responsive screen not working

我已经试着让它像这样响应：https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2, 我希望它像图像一样收缩，无论它中的屏幕是什么，它都会在位置上匹配，想象一下我放入每个框中的图像，但似乎失败了。https://jsfiddle.net/hnrfhyag/20/