如何在 shopify 中将汉堡菜单更改为单词菜单

Question

我在我的 Shopify 商店中使用主题简单，我需要将汉堡菜单更改为文本"菜单"。此外，该网站 www.allabouttoytrains.com 我正在使用检查元素试图获得所需的效果，但我也发布了包含 HTML 的文件，以防它有所帮助。

侧边栏.液体

<div data-section-id="{{ section.id }}" data-section-type="sidebar-section">
<nav class="grid__item small--text-center medium-up--one-fifth" role="navigation">
<hr class="hr--small medium-up--hide">
<button id="ToggleMobileMenu" class="mobile-menu-icon medium-up--hide" aria-haspopup="true" aria-owns="SiteNav">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="icon__fallback-text">{{ 'layout.navigation.menu' | t }}</span>
</button>
<div id="SiteNav" class="site-nav" role="menu">
<ul class="list--nav">
{% for link in menus[section.settings.main_menu_link_list].links %}
{% assign child_list_handle = link.title | handleize %}
{% if menus[child_list_handle].links != blank %}
<li class="site-nav--has-submenu site-nav__element">
<button class="site-nav__link btn--link site-nav__expand hidden" aria-expanded="false" aria-controls="Collapsible{{ forloop.index }}">
{{ link.title }}
<span>+</span>
</button>
<button class="site-nav__link btn--link site-nav__collapse" aria-expanded="true" aria-controls="Collapsible{{ forloop.index }}">
{{ link.title }}
<span>-</span>
</button>
<ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expanded" aria-hidden="false">
{% for childlink in menus[child_list_handle].links %}
<li class="{% if childlink.active or collection.current_type == childlink.title or collection.current_vendor == childlink.title %}{% unless forloop.first and childlink.title contains 'All' and current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}">
<a href="{{ childlink.url }}" class="site-nav__link">{{ childlink.title | escape }}</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="site-nav__element {% if link.active %}site-nav--active{% endif %}">
<a href="{{ link.url }}" class="site-nav__link">{{ link.title }}</a>
</li>
{% endif %}
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li>
<a href="/account" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.account' | t }}</a>
</li>
<li>
<a href="/account/logout" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.log_out' | t }}</a>
</li>
{% else %}
<li>
<a href="/account/login" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.log_in' | t }}</a>
</li>
<li>
<a href="/account/register" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.create_account' | t }}</a>
</li>
{% endif %}
{% endif %}
</ul>
<ul class="list--inline social-links">
{% if settings.social_facebook_link != blank %}
<li>
<a href="{{ settings.social_facebook_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
{% include 'icon-facebook' %}
<span class="icon__fallback-text">Facebook</span>
</a>
</li>
{% endif %}
{% if settings.social_twitter_link != blank %}
<li>
<a href="{{ settings.social_twitter_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
{% include 'icon-twitter' %}
<span class="icon__fallback-text">Twitter</span>
</a>
</li>
{% endif %}
{% if settings.social_pinterest_link != blank %}
<li>
<a href="{{ settings.social_pinterest_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
{% include 'icon-pinterest' %}
<span class="icon__fallback-text">Pinterest</span>
</a>
</li>
{% endif %}
{% if settings.social_instagram_link != blank %}
<li>
<a href="{{ settings.social_instagram_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
{% include 'icon-instagram' %}
<span class="icon__fallback-text">Instagram</span>
</a>
</li>
{% endif %}
{% if settings.social_google_plus_link != blank %}
<li>
<a href="{{ settings.social_google_plus_link }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
{% include 'icon-google-plus' %}
<span class="icon__fallback-text">Google Plus</span>
</a>
</li>
{% endif %}
{% if settings.social_tumblr_link != blank %}
<li>
<a href="{{ settings.social_tumblr_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
{% include 'icon-tumblr' %}
<span class="icon__fallback-text">Tumblr</span>
</a>
</li>
{% endif %}
{% if settings.social_youtube_link != blank %}
<li>
<a href="{{ settings.social_youtube_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
{% include 'icon-youtube' %}
<span class="icon__fallback-text">YouTube</span>
</a>
</li>
{% endif %}
{% if settings.social_vimeo_link != blank %}
<li>
<a href="{{ settings.social_vimeo_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
{% include 'icon-vimeo' %}
<span class="icon__fallback-text">Vimeo</span>
</a>
</li>
{% endif %}
{% if settings.social_fancy_link != blank %}
<li>
<a href="{{ settings.social_fancy_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
{% include 'icon-fancy' %}
<span class="icon__fallback-text">Fancy</span>
</a>
</li>
{% endif %}
{% if settings.main_blog != blank %}
<li>
<a href="/blogs/{{ settings.main_blog }}.atom">
{% include 'icon-rss' %}
<span class="icon__fallback-text">Blog</span>
</a>
</li>
{% endif %}
</ul>
</div>
<hr class="medium-up--hide hr--small {% if template.name == 'index' %}hr--border-bottom{% endif %}">
</nav>
</div>
{% schema %}
{
"name": "Sidebar",
"settings": [
{
"type": "link_list",
"id": "main_menu_link_list",
"label": "Menu",
"default": "main-menu"
}
]
}
{% endschema %}

Answer 1

一种可能的方法是，删除 4 次

<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>

也许那时您还必须从菜单中设置高度。 实际上，我在您的网站上看到了"菜单"以及汉堡菜单。

顺便说一句，这不是一个优雅的解决方案，它更快速和肮脏。

Answer 2

好吧，根据您已有的效果来工作。

var McButton = $("[data=hamburger-menu]");
var McBar1 = McButton.find("b:nth-child(1)");
var McBar2 = McButton.find("b:nth-child(2)");
var McBar3 = McButton.find("b:nth-child(3)");
McButton.click( function() {
$(this).toggleClass("active");

if (McButton.hasClass("active")) {
McBar1.velocity({ top: "50%" }, {duration: 200, easing: "swing"});
McBar3.velocity({ top: "50%" }, {duration: 200, easing: "swing"})
			.velocity({rotateZ:"90deg"}, {duration: 800, delay: 200, easing: [500,20] });
McButton.velocity({rotateZ:"135deg"}, {duration: 800, delay: 200, easing: [500,20] });
} else {
McButton.velocity("reverse");
		McBar3.velocity({rotateZ:"0deg"}, {duration: 800, easing: [500,20] })
			.velocity({ top: "100%" }, {duration: 200, easing: "swing"});
	McBar1.velocity("reverse", {delay: 800});
}
});

/* Global Styles */
body {
margin: 0;
padding: 0;
background-color: hsl(355, 75%, 56%);
}
/* Hamburger Menu */
.McButton {
position: absolute;
top: 50%;
left: 50%;
margin-left: -22px;
margin-top: -22px;
width: 44px;
height: 33px;
cursor: pointer;
}
.McButton b {
position: absolute;
left: 0;
width: 44px;
height: 3px;
background-color: white;
}
.McButton b:nth-child(1) {
top: 0;
}
.McButton b:nth-child(2) {
top: 50%;
}
.McButton b:nth-child(3) {
top: 100%;
}
/* McButton */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<!-- Hamburger Menu -->
<a class="McButton" data="hamburger-menu">
<b></b>
<b></b>
<b></b>
</a>