반응형 웹사이트 드롭다운 양식 문제 (Responsive Website Dropdown form issue)

문제 설명

반응형 웹사이트 드롭다운 양식 문제 (Responsive Website Dropdown form issue)

Foundation 5 프레임워크의 드롭다운 양식에 약간의 문제가 있습니다.

기본적으로 입력 필드와 버튼을 드롭다운 메뉴에 할당하고 있는데 잘 작동합니다.

하지만 첫 번째 드롭다운에서와 같이 뒤로 버튼을 먼저 볼 수 없기 때문에 그 이유를 알 수 없습니다. 기본 코드가 복제일 때.

두 번째 드롭다운을 보고 메뉴로 돌아가서 드롭다운을 보려면 입력 필드와 버튼이 표시됩니다...

아래 소스 코드:

CSS:

      .has‑form‑small {

        top: 0rem;
        left: 0rem;
        min‑width: 15rem; }
      @media only screen and (max‑width: 40em) {
        .has‑form {
          min‑width: 10rem;
          top: 0 rem; }
        .has‑form .button {
          height: 3rem; } }
    </style>

HTML: 드롭다운 1:

<section class='top‑bar‑section'>
  <!‑‑ Right Nav Section ‑‑>
  <ul class='right'>
    <li><a href='#'>Button</a></li>
    <li class='has‑dropdown'>
      <a href='#'>Dropdown</a>
      <ul class='dropdown'>
        <li><a href='#'>link</a></li>
        <li><a href='#'>link</a></li>
      </ul>
    </li>
  </ul>
</section>

드롭다운 2:

    <section class='top‑bar‑section'>
      <!‑‑ Right Nav Section‑‑>
      <strong class='show‑for‑small‑only'>
      <ul class='right'>
        <li class='has‑dropdown'>
          <a href='#'>Dropdown2</a>
          <ul class='dropdown'>
              <li class='has‑form‑small'>
                <div class='row collapse'>
                  <div class='large‑9 small‑9 columns'>
                    <input type='text' placeholder='Find Stuff'>
                </div>
                <div class='large‑3 small‑3 columns'>
                    <a href='#' class='alert button expand'>Search</a>
                </div>
                </div>
              </li>
          </ul>
        </li>
      </ul>
      </strong>
    </section>

참조 솔루션

방법 1:

Managed to fix in the end. Turns out a drop down menu option isn't needed.

Code as below:

CSS:

    <style>
  .has‑form‑small {
    color: darkslategray;
    position: absolute;
    top: 0rem;
    left: 0rem;
    min‑width: 26rem;
    min‑height: 2.7rem;}
  @media only screen {
    .has‑form‑small {
      color: darkslategray;
      min‑width: 26rem;
      min‑height: 2.7rem;
      top: 0rem; }
    .has‑form‑small .button {
      color: darkslategray;
      width:  10rem;}}
</style>

HTML:

<nav class='top‑bar' data‑topbar role='navigation'>
    <ul class='title‑area'>
      <li class='name'>
        <h1><a href='#'>My Site</a></h1>
      </li>
      <strong class='hide‑for‑small‑only'>
      <li class='has‑form'>
        <div class='row collapse'>
          <div class='large‑9 small‑9 columns'>
            <input type='text' placeholder='Find Stuff'>
          </div>
          <div class='large‑3 small‑3 columns'>
            <a href='#' class='alert button expand'>Search</a>
          </div>
        </div>
      </li>
      </strong>
      <!‑‑ Remove the class 'menu‑icon' to get rid of menu icon. Take out 'Menu' to just have icon alone ‑‑>
      <li class='toggle‑topbar menu‑icon'><a href='#'><span>Menu</span></a></li>
    </ul>

    <section class='top‑bar‑section'>
      <!‑‑ Right Nav Section ‑‑>
      <ul class='right'>
        <li><a>&nbsp</a></li>
        <li>
        <strong class='show‑for‑small‑only'>
          <li class='has‑form‑small'>
              <div class='large‑12 small‑9 columns'>
                <input type='text' placeholder='Find Stuff'>
              </div>
              <div class='large‑3 small‑3 columns'>
                <a href='#' class='alert button expand'>Search</a>
              </div>
          </li>
        </strong>
        </li>
      </ul>



      <ul class='right'>
        <li><a href='#'>Button</a></li>
        <li class='has‑dropdown'>
          <a href='#'>Dropdown</a>
          <ul class='dropdown'>
            <li><a href='#'>link</a></li>
            <li><a href='#'>link</a></li>
          </ul>
        </li>
      </ul>

      <!‑‑ Left Nav Section ‑‑>
      <ul class='left'>

      </ul>
    </section>
  </nav>

There may be better ways to do this (e.g. remove blank row with "&nspb") but I was having issues with background colours, and this is supposed to only be a demo site.

(by Nathan English、Nathan English)

참조 문서

1. Responsive Website Dropdown form issue (CC BY‑SA 2.5/3.0/4.0)