shopify吧 关注:5,593贴子:25,316
  • 12回复贴,共1

Shopify(1) 在店铺创建下拉式菜单。Create a drop-down menu

只看楼主收藏回复

惯例1L


IP属地:贵州1楼2015-08-10 11:30回复
    A drop-down menu displays a drop-down list of links when your customer hovers their mouse over a link in your store's navigation menu.当顾客将鼠标浮动在导航目录上时,链接列表就会展示在下拉菜单里。


    IP属地:贵州2楼2015-08-10 11:31
    收起回复
      2025-07-25 20:33:11
      广告
      不感兴趣
      开通SVIP免广告
      Create a drop-down menu (e.g. from the Catalog button)创建下拉式菜单1. Click to the Navigation page of the admin在后台管理页面点击Navigation page。The navigation page of most new stores has both a Main Menu link list and a Footer link list. You can make drop-down menus on your storefront that from any link in the Main Menu.多数新店铺的Navigation page有一个主目录链接菜单和一个页脚链接菜单。你可以在主目录的任意链接上创建下拉目录。

      This means you can drop-down from an existing link, or add a new link to the main menu first, to use as the head of your drop-down menu before proceeding.你可以在已有链接上创建下拉目录。也可以在主目录先创建一个新链接,将此新链接做为下拉目录的head,然后继续创建。
      This walkthrough will show you how to make a drop-down from the existing Catalog link.这份指导会告诉你如何在已有目录链接上创建下拉菜单。


      IP属地:贵州3楼2015-08-10 11:32
      回复
        2. Click Add link list.点击Add link lis


        IP属地:贵州4楼2015-08-10 11:33
        回复
          3. Type in the name for your navigation. The handle will be automatically generated for you (do not edit it):输入你的导航名称。handle会自动生成,请不要编辑此项。

          For this walkthrough to work, the name you enter MUST be the same as the name of the link in your Main Menu that you wish to drop-down from. Because we want to drop-down fromCatalog, we will name our link list "Catalog".请注意你输入的名称必须与主目录里,你要创建下拉菜单的那个链接名称一样。如,我们要在Catalog创建下拉菜单。我们就将我们的链接菜单命名为“Catalog”。


          IP属地:贵州5楼2015-08-10 11:34
          回复
            4. Click Add another link one time for each link you want to include in your drop-down menu.点击Add another link。每个你要加入创建的链接都需要点击到。

            5. For each link you've clicked to add, type in a Link Name, then click Links To... drop-down box and choose your destinations for these links (e.g. you can link to specific collections, all products, or pages etc.)每个你已添加的链接,都需要输入链接名称(Link Name)。然后点击Links To...,出现一个下拉选择,将你的链接指定到你想要的位置。(如,你可以指定到某一collection,all products,或者是页面等)

            You can set anything you like for these Link Names (they will appear to your customers), there are no naming rules like when we named the Link List.你可以为这些链接设立你喜欢的链接名称(Link Name),这些名称会被展现在客户面前。


            IP属地:贵州6楼2015-08-10 11:36
            回复
              6. Click Save.点击save
              7. To check your work, click back into the Navigation page of your admin. You should have a new link list with the same name as one of the Main Menu links, like this:检查此项工作,点击后台管理的 Navigation page,就可以看到一个新的链接菜单,这个菜单名和主目录里某个链接名称是一样的,如

              8. You can check your work in your storefront by clicking the "View your website" button in the bottom left:在店铺展示页查看此项工作,你可以点击View your website。
              9. Hover over the Catalog button to view the drop-down menu:在店铺展示页,将鼠标浮动到Catalog按钮上查看下拉式菜单。
              http://docs.shopify.com/manual/your-website/navigation/create-drop-down-menu


              IP属地:贵州7楼2015-08-10 11:37
              回复
                另附:Using non-English characters in drop-down menus非英语如何创建下拉目录。
                If your Theme is "Translation-ready", you should follow the simplified translation process instead. How do I know if my Theme is "Translation-ready?"如果你的主题包含有翻译模块,你应该查看simplified translation process(译为简化翻译过程,有需要再翻译此篇,地址http://docs.shopify.com/manual/your-website/themes/translate-theme)而不是How do I know if my Theme is "Translation-ready?"(怎样确定我的主题有否翻译模块,地址http://docs.shopify.com/manual/configuration/store-customization/currencies-and-translations/translations/is-my-store-translation-ready)。
                If the name of your linklist uses the Arabic, Hebrew or Cyrillic alphabet, or is in Chinese or Japanese, your Shopify theme might be unable to find your drop-down menu.如果你的链接目录使用语言是阿拉伯语,希伯来语,西里尔字母,中文或日语,shopify主题可能无法识别你创建的下拉菜单。
                Use this liquid code for your main navigation (either intheme.liquid or called from it using an include statement):在主目录导航上使用下面的liquid code。(也可用在theme.liquid或在include指令下进行释放。)
                role="navigation">
                id="nav"> {% for link in linklists.main-menu.links %} {% assign has_drop_down =false %} {% assign child_list_handle = link.title | handle %} {% comment %}If the link uses the arabic, hebrew or cyrillic alphabet, or is in Chinese or Japanese, the handle will be empty.{% endcomment %} {% if child_list_handle == '' %} {% fori in (0..8) %} {% unless has_drop_down %} {% if forloop.first %} {% assign temp ='link-list' %} {% else %} {% capture temp %}link-list-{{ i }}{% endcapture %} {%endif %} {% if linklists[temp] and linklists[temp].links.size > 0 andlinklists[temp].title == link.title %} {% assign has_drop_down = true %} {% assignchild_list_handle = temp %} {% endif %} {% endunless %} {% endfor %} {% else %} {%if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}{% assign has_drop_down = true %} {% endif %} {% endif %}
                class="nav-item{% if forloop.first %} first{% elsif forloop.last %} last{% endif%}{% if link.active %} active{% endif %}{% if has_drop_down %} dropdown{% endif%}"> class="nav-item-link smooth" href="{{ link.url }}"> {{ link.title }} {% ifhas_drop_down %}
                class="sub-nav">
                class="sub-nav-niblet">
                {% for l in linklists[child_list_handle].links %}
                class="sub-nav-item{% if forloop.first %} first{% elsif forloop.last %} last{%endif %}"> class="sub-nav-item-link {% if forloop.first %}first{% endif %} {%if forloop.last %}last{% endif %}" href="{{ l.url }}">{{ l.title }}
                {% endfor %}
                {% endif %}
                {% endfor %}
                在这里查看完整代码:https://gist.github.com/f95b1e4d0f9401ce6d20The part of the code that locates a drop-down menu is定位下拉目录的代码:
                {% assign has_drop_down = false %}{% assign child_list_handle = link.title | handle %}{% comment %}If the link uses the arabic, hebrew or cyrillic alphabet, or is in Chinese or Japanese, the handle will be empty.{% endcomment %}{% if child_list_handle == '' %} {% for i in (0..8) %} {% unless has_drop_down %} {% if forloop.first %} {% assign temp = 'link-list' %} {% else %} {% capture temp %}link-list-{{ i }}{% endcapture %} {% endif %} {% if linklists[temp] and linklists[temp].links.size > 0 and linklists[temp].title == link.title %} {% assign has_drop_down = true %} {% assign child_list_handle = temp %} {% endif %} {% endunless %} {% endfor %} {% else %} {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %} {% assign has_drop_down = true %} {% endif %}{% endif %}
                The key pieces of information in the above code are:以上代码的关键信息在
                has_drop_down, a boolean
                child_list_handle, the handle of the drop-down menu


                IP属地:贵州8楼2015-08-10 11:39
                回复
                  2025-07-25 20:27:11
                  广告
                  不感兴趣
                  开通SVIP免广告
                  我想请问一下,下拉菜单里能不能再加入下拉菜单。也就是三级菜单?我试了一下似乎是不可以,是不是有什么方法可以实现?


                  IP属地:浙江10楼2015-12-30 10:48
                  回复

                    有没有大神请教这个插件叫什么


                    12楼2019-12-04 18:33
                    回复