我想在我的大卡特尔网站上添加一个下拉菜单。
在Big Cartel上,您可以使用Big Cartel的信息中心创建类别。这些类别可用于创建下拉菜单。我知道这个。在尝试调整代码时,我注意到Big Cartel的类别选项会作为下拉列表进入子导航。
我希望子导航显示为导航链接" Jewelry"下的下拉导航菜单。它会像这样列出:
珠宝
- 耳环
- 项链和套装
- 戒指
- 手臂糖果
我想要的类似下拉菜单设计就像www.fashionative.com"配件"。
以下是我的布局代码
{{ ---------------------------BEGIN HEADER NAVIGATION--------------------------- }}
{% capture Main_Header_Links %}
{% assign: current_page = page.name %}
{% for page in pages.all %}
{% unless page.name contains '-hide-' or page.name contains '-footer-' or page.name contains '-sidebar-' or page.name contains '-subnav-' or page.name contains '-content_block-' %}
{% if page.name == current_page %}
<li class="block current-page">
{% else %}
<li class="block">{% endif %}<a href="{{ page.url }}"><span>{{ page.name }}</span></a></li>
{% endunless %}
{% endfor %}
{% if page.full_url contains '/contact' %}
<li class="current-page">
{% else %}
<li>
{% endif %}
{{ pages.contact | link_to }}
</li>
{% endcapture %}
{% capture Category_Links %}
{% for category in categories.all %}
{% assign parent_cat_name = category.name %}
{% assign parent_cat_url = category.url %}
{% capture sub_cat_list %}
{% for cat2 in categories.active %}
{% unless cat2.name == parent_cat_name %}
{% capture parent_cat_string %}{{ parent_cat_name }} - {% endcapture %}
{% capture parent_cat_url_string %}{{ parent_cat_url }}-{% endcapture %}
{% if cat2.name contains parent_cat_name %}
{% assign has_sub_cats = 'true' %}
{% capture new_sub_cat_name %}{{ cat2.name | replace_first: parent_cat_string, "" }}{% endcapture %}
{% if cat2.url contains parent_cat_url_string %}<li>{{ cat2 | link_to: new_sub_cat_name }}</li>{% endif %}
{% endif %}
{% endunless %}
{% endfor %}
{% endcapture %}
{% unless category.name contains ' - ' %}
<li><a href="{{ category.url }}"><span>{{ category.name }}</span></a>{% if has_sub_cats == 'true' %}<ul id='sub-categories'><div id='subcat-container'>{{ sub_cat_list }}</div></ul>{% endif %}</li>
{% endunless %}
{% assign has_sub_cats = 'true' %}
{% endfor %}
{% endcapture %}
{% capture Alternate_Category_Links %}
{% for category in categories.all %}
{% assign parent_cat_name = category.name %}
{% capture sub_cat_list %}
{% for cat2 in categories.active %}
{% unless cat2.name == parent_cat_name %}
{% capture parent_cat_string %}{{parent_cat_name}} - {% endcapture %}
{% if cat2.name contains parent_cat_name %}
{% assign has_sub_cats = 'true' %}
{% capture new_sub_cat_name %}{{ cat2.name | replace_first: parent_cat_string, "" }}{% endcapture %}
<li>{{ cat2 | link_to: new_sub_cat_name }}</li>
{% endif %}
{% endunless %}
{% endfor %}
{% endcapture %}
{% unless category.name contains ' - ' %}
{% if page.full_url contains 'product' or page.full_url contains 'category' or page.full_url contains 'artist' %}
<li class="current-page">
{% else %}
<li>{% endif %}<a href="{{ category.url }}"><span>{{ category.name }}</span></a>{% if has_sub_cats == 'true' %}<ul class='category-dropdown'>{{ sub_cat_list }}</ul>{% endif %}</li>
{% endunless %}
{% assign has_sub_cats = 'false' %}
{% endfor %}
{% endcapture %}
<div id="header-navigation">
<ul>
{% if page.permalink contains 'home' %}
<li class="current-page">
{% else %}
<li>{% endif %}<a href="/"><span>Home</span></a></li>
{% if page.full_url contains '/product' or page.full_url contains 'category' or page.full_url contains 'artist' or page.full_url contains '/cart' or page.full_url contains '/cart' or page.full_url contains '/new' or page.full_url contains '/sale' or page.full_url contains '/latest' %}
<li class="current-page">
{% else %}
<li>{% endif %}<a href="/products"><span>Jewelry</span></a>
{% if Categories_in_Nav_Display contains 'down' %}<ul class="category-dropdown">{% for page in pages.all %}{% if page.name contains '-subnav-' or page.name contains '-sidebar-' %}<li><a href="{{ page.url }}"><span>{{ page.name | remove: '-sidebar-' | remove: '-subnav-' }}</span></a></li>{% endif %}{% endfor %}{{ Category_Links }}</ul>{% endif %}
</li>
{% if Categories_in_Nav_Display contains 'ain' %}{% for page in pages.all %}
{% if page.name contains '-subnav-' or page.name contains '-sidebar-' %}
{% if page.full_url contains 'product' or page.full_url contains 'category' or page.full_url contains 'artist' or page.full_url contains '/cart' %}
<li class="current-page">
{% else %}
<li>{% endif %}<a href="{{ page.url }}"><span>{{ page.name | remove: '-sidebar-' | remove: '-subnav-' }}</span></a></li>
{% endif %}{% endfor %}
{{ Alternate_Category_Links }}
{% endif %}
{{ Main_Header_Links }}
</ul>
</div>
{{ ---------------------------END HEADER NAVIGATION--------------------------- }}
</div>
</div>
</div>
{{ ---------------------------END HEADER AREA--------------------------- }}
{{ --BEGIN ERROR DISPLAY-- }}
<noscript>
<div class="error" id="error">
<ul>
<li>JavaScript must be enabled to use this store!</li>
</ul>
</div>
</noscript>{% if errors != blank %}
<div id="error" class="error">
<ul>{% for error in errors %}
<li><u>Error:</u> {{ error }}</li>{% endfor %}</ul>
</div>{% endif %}
{{ --END ERROR DISPLAY-- }}
<div id="contents">
{{ ------------BEGIN SUB-NAVIGATION------------------- }}
{% capture Sub_Navigation %}
<div id="sub-navigation" >
<div id="categories">
{% capture Category_Links %}
{% for page in pages.all %}
{% if page.name contains '-sidebar-' or page.name contains '-subnav-' %}
<li><a href="{{ page.url }}"><span>{{ page.name | remove: '-sidebar-' | remove: '-subnav-' }}</span></a></li>
{% endif %}
{% endfor %}
{% for category in categories.all %}
{% assign parent_cat_name = category.name %}
{% capture sub_cat_list %}
{% for cat2 in categories.active %}
{% unless cat2.name == parent_cat_name %}
{% capture parent_cat_string %}{{parent_cat_name}} - {% endcapture %}
{% if cat2.name contains parent_cat_name %}
{% assign has_sub_cats = 'true' %}
{% capture new_sub_cat_name %}{{ cat2.name | replace_first: parent_cat_string, "" }}{% endcapture %}
<li><span>{{ cat2 | link_to: new_sub_cat_name }}</span></li>
{% endif %}
{% endunless %}
{% endfor %}
{% endcapture %}
{% unless category.name contains ' - ' %}
<li><a href="{{ category.url }}"><span>{{ category.name }}</span></a>{% if has_sub_cats == 'true' %}<ul class="sub-categories"><div id="subcat-container">{{ sub_cat_list }}</div></ul>{% endif %}</li>
{% endunless %}
{% assign has_sub_cats = 'false' %}
{% endfor %}
{% endcapture %}
<ul class="categories-list">
<li>{{ Category_Nav_Title_Text }}</li>
<li><a href="/products"><span>ALL</span></a></li>
{{ Category_Links }}
</ul>
</div>
{{ --BEGIN SEARCH-- }}
{% capture search_form %}
<div id="search" >
<form class="form-search" name="search" action="/products" method="get">
<input id="search-input" name="search" type="text" placeholder="Search" />
<button id="search-submit" name="search-submit" type="submit" title="Search"></button>
</form>
</div>
{% endcapture %}
{{ search_form }}
{{ --END SEARCH-- }}
</div>
{% endcapture %}
{% if page.full_url contains '/product' or page.full_url contains '/category' or page.full_url contains '/artist' or page.full_url contains '/cart' or page.full_url contains '/new' or page.full_url contains '/sale' or page.full_url contains '/latest' %}
{{ Sub_Navigation }}
{% endif %}
{{ ------------END SUB-NAVIGATION------------------- }}
<div id="main">
<div id="main-content">
{% unless page.full_url contains '/product/' or page.full_url contains 'blog' %}
<h1 class="page-title">{{ page.name | remove: '-footer-' | remove: '-hide-' | remove: '-sidebar-' | remove: '-subnav-' | remove: '-f1-' | remove: '-f2-' | remove: '-f3-' }}</h1>
{% endunless %}
{% if page.category == 'custom' %}
{{ page_content | paragraphs }}
{% else %}
{{ page_content }}
{% endif %}
</div>
</div>
</div>