PDJ Brandbox

nav-mypage 

<nav class="myPageNav">
    <ul class="myPageNav__list">
        <li class="myPageNav__item myPageNav__item--main">
            <a href="#" class="myPageNav__link myPageNav__link--main">My page top</a>
        </li>
        <li class="myPageNav__item myPageNav__item--main">
            <a href="#" class="myPageNav__link myPageNav__link--main">Account</a>
            <ul class="myPageNav__list myPageNav__list--sub">
                <li class="myPageNav__item myPageNav__item--sub">
                    <a href="#" class="myPageNav__link myPageNav__link--sub">Registration information</a>
                </li>
                <li class="myPageNav__item myPageNav__item--sub">
                    <a href="#" class="myPageNav__link myPageNav__link--sub">Password management</a>
                </li>
                <li class="myPageNav__item myPageNav__item--sub">
                    <a href="#" class="myPageNav__link myPageNav__link--sub">Email reception settings</a>
                </li>
            </ul>
        </li>
        <li class="myPageNav__item myPageNav__item--main">
            <a href="#" class="myPageNav__link myPageNav__link--main">Hardware</a>
            <ul class="myPageNav__list myPageNav__list--sub">
                <li class="myPageNav__item myPageNav__item--sub">
                    <a href="#" class="myPageNav__link myPageNav__link--sub">Product registration</a>
                </li>
                <li class="myPageNav__item myPageNav__item--sub">
                    <a href="#" class="myPageNav__link myPageNav__link--sub">Purchase history</a>
                </li>
                <li class="myPageNav__item myPageNav__item--sub">
                    <a href="#" class="myPageNav__link myPageNav__link--sub">AlphaTheta Care Extended warranty service</a>
                </li>
            </ul>
        </li>
        <li class="myPageNav__item myPageNav__item--main">
            <a href="#" class="myPageNav__link myPageNav__link--main">Recordbox</a>
            <ul class="myPageNav__list myPageNav__list--sub">
                <li class="myPageNav__item myPageNav__item--sub">
                    <a href="#" class="myPageNav__link myPageNav__link--sub">Contract Plan/Purchase History</a>
                </li>
                <li class="myPageNav__item myPageNav__item--sub">
                    <a href="#" class="myPageNav__link myPageNav__link--sub">Purchase history</a>
                </li>
                <li class="myPageNav__item myPageNav__item--sub">
                    <a href="#" class="myPageNav__link myPageNav__link--sub">Cloud settings</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
 
<nav class="myPageNav">
    <ul class="myPageNav__list">
        {{#each lists }}
        <li class="myPageNav__item myPageNav__item--main{{#if (eq ../activeNav label) }} myPageNav__item--active{{/if}}">
            <a href="#" class="myPageNav__link myPageNav__link--main">{{ label }}</a>
            {{#if items }}
            <ul class="myPageNav__list myPageNav__list--sub">
                {{#each items }}
                <li class="myPageNav__item myPageNav__item--sub{{#if (eq ../../activeNav label) }} myPageNav__item--active{{/if}}">
                    <a href="#" class="myPageNav__link myPageNav__link--sub">{{ label }}</a>
                </li>
                 {{/each}}
            </ul>
            {{/if}}
        </li>
        {{/each}}
    </ul>
</nav>
 
lists:
  - label: My page top
  - label: Account
    items:
      - label: Registration information
        url: '#'
      - label: Password management
        url: '#'
      - label: Email reception settings
        url: '#'
  - label: Hardware
    items:
      - label: Product registration
        url: '#'
      - label: Purchase history
        url: '#'
      - label: AlphaTheta Care Extended warranty service
        url: '#'
  - label: Recordbox
    items:
      - label: Contract Plan/Purchase History
        url: '#'
      - label: Purchase history
        url: '#'
      - label: Cloud settings
        url: '#'
  • Content: 
    .myPageNav {
  position: sticky;
  top: 75px;
  display: block;
  width: 100%;
  background-color: var(--color--neutrals-1);

  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;

  &::-webkit-scrollbar {display: none; }

  @media all and (min-width: 1024px) {
    background-color: var(--color--neutrals-0);
  }

  ul.myPageNav__list {
    display: flex;
    align-items: center;
    text-align: center;
    padding: 0;
    margin: 0;
    list-style: none;

    @media all and (min-width: 1024px) {
      justify-content: center;
    }

    &--sub {
      display: none;

      @media all and (min-width: 1024px) {
        display: block;
        margin: var(--gap--2) 0 0 0 !important;
      }
    }


    @media all and (min-width: 1024px) {
      display: block;
      text-align: left;
    }
  }

  &__item {
    padding: var(--gap--4);

    @media all and (min-width: 1024px) {
      padding: 0;
    }

    &--active {
      border-bottom: 2px solid var(--color--theme);

      @media all and (min-width: 1024px) {
        border: none;
      }
    }

    @media all and (min-width: 1024px) {
      &--main {
        padding-bottom: var(--gap--8);

        &.myPageNav__item--active > .myPageNav__link {
          border-bottom: 2px solid var(--color--theme);
        }
      }

      &--sub {
        padding: 0;

        &.myPageNav__item--active {
          display: inline-block;
          border-bottom: 2px solid var(--color--theme);
        }
      }
    }
  }

  &__link {
    color: #000000;
    text-decoration: none;

    &--main {
      @media all and (min-width: 1024px) {
        font-weight: 600;
        font-size: 18px;
      }
    }

    &--sub {
      color: #707070;
      font-size: 14px;
    }

    &:hover {
      text-decoration: underline;
      text-decoration-thickness: 5px;
      text-underline-offset: var(--gap--10);

      @media all and (min-width: 1024px) {
        text-decoration: none;
      }
    }
  }
}
  • URL: /components/raw/nav-mypage/nav-mypage.scss
  • Filesystem Path: ../src/03_molecules/nav-mypage/nav-mypage.scss
  • Size: 2 KB

No notes defined.