概要

movie2.mov

設定方法

{% unless request.path == routes.root_url %}
	{%- for link in linklists.main-menu.links -%}
    {%- if link.links != blank and link.links.size > 1 -%}
      {%- for childlink in link.links -%}
        {%- if childlink.url == request.path -%}
          <div class="inner-menu-wrapper page-width">
            <div id="inner-menu">
            <h3>{{ link.title }}</h3>
            <ul>{%- for childlink in link.links -%}
              {%- unless childlink.url == "#" -%}
              <li>{%- unless childlink.url == request.path -%}<a href="{{ childlink.url }}">{{ childlink.title }}</a>
							{%- else -%}
							<span>{{ childlink.title }}</span>{%- endunless -%}</li>
              {%- endunless -%}
            {%- endfor -%}</ul>
            </div>
          </div>
          {%- break -%}
        {%- else -%}
          {%- if childlink.links != blank and childlink.links.size > 1 -%}
            {%- for grandchildlink in childlink.links -%}
              {%- if grandchildlink.url == request.path -%}
                <div class="inner-menu-wrapper page-width">
                  <div id="inner-menu">
                  <h3>{{ childlink.title }}</h3>
                  <ul>{%- for grandchildlink in childlink.links -%}
                    {%- unless grandchildlink.url == "#" -%}
                    <li>{%- unless grandchildlink.url == request.path -%}<a href="{{ grandchildlink.url }}">{{ grandchildlink.title }}</a>
										{%- else -%}
										<span>{{ grandchildlink.title }}</span>{%- endunless -%}</li>
                    {%- endunless -%}
                  {%- endfor -%}</ul>
                  </div>
                </div>
                {%- break -%}
              {%- endif -%}
            {%- endfor -%}
          {%- endif -%}
        {%- endif -%}
      {%- endfor -%}
    {%- endif -%}
	{%- endfor -%}
{%- endunless -%}
<style class="for-inner-menu">
  section:has(#inner-menu) {
    display: block;
  }
  section:has(.for-inner-menu) {
    display: none;
  }
	/* styleの詳細はデザインに合わせて要変更 */
  .inner-menu-wrapper {
    padding: 0 5rem;
  }
  #inner-menu {
    background-color: #f6f6f6;
    padding: 2rem 0 2rem 3rem;
    width: 100%;
  }
  #inner-menu h3 {
    margin: 1rem 0;
    font-size: 20px;
    font-weight: 600;
  }
  #inner-menu ul {
    display: flex;
    margin: 0;
    padding: 0;
    background-color: #f6f6f6;
    overflow: scroll;
  }
  #inner-menu li {
    border: 1px solid #CCC;
    list-style-type: none;
    background-color: #FFF;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    max-width: 200px;
    width: fit-content;
    white-space: nowrap;
  }
  #inner-menu li {
    margin-right: 1rem;
  }
  #inner-menu li:not(:has(a)) {
    background-color: #000;
    border: 1px solid #000;
    color: #FFF;
  }
  #inner-menu li a {
    display: block;
    text-decoration: none;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #inner-menu li span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media screen and (max-width: 750px) {
    .inner-menu-wrapper {
      padding: 0;
    }
  }
</style>