如何在我的大卡特尔网站上添加下拉菜单?

时间:2014-04-17 21:41:30

标签: html css drop-down-menu navigation bigcartel

我想在我的大卡特尔网站上添加一个下拉菜单。

在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>   

0 个答案:

没有答案