純粋なCSSメニューの構築

37236 ワード
scss css frontend beginners テキストリンク
さて、私たちの使命は、ドロップダウンメニューを構築することです.それで、行きましょう.
以下に結果のcodepenを示します.
ドロップダウンが水平になるにつれて、それは完全に応答しません.また、Moboの問題でなければならないトリガとしてホバーを使用します.あなたはそれが成長する方法を変更することができますかハンバーガーサイドバーに何か、別のポストの主題をthats.とにかく、このコードはJavaScriptをたくさん保存します.
今のところ、我々は単にドロップダウン構造を構築することに集中するつもりです.このポストのために、あなたはちょうどHTMLとCSS/SCSSに関する基本的な知識を必要とします.

初期構造
最初のHTML構造は、メニューを保持するためのnavbarを作成するのに使われます.
<div class="menu">
  <ul> 
    <li class="link">
      <a href="">This is a link</a>
    </li>
    <li>
      This will open a dropdown soon
    </li>
  </ul>
</div>
ドロップダウンメニューをどこでも追加できます.すべきではありません.ここでは、我々は我々のnavbarを加えます.したがって、“メニュー”のdivは、ページの上部に固定されます.< Navi >タグも使えます.ここでは、上のdivを修正するためのCSSです.
.menu {
  // define the height of the menu
  --menu-height: 40px;
  // holder and ul general style
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
}
CSS VARSに慣れていないなら、この投稿を読むことができます.
メニューの高さは、私たちのNavbarの高さを定義するCSS Varです.これは子プロセスの位置を定義するのにも役立ちます.
私たちの固定Navを持っているので、その中にULをターゲットにするときには3つのスコープがあることに注意してください.
  • 私たちはすべてのUL(全範囲)を対象とすることができます.スコープ全体については、単に“menu . ul”をセレクタとして使用する必要があります.
  • 私たちは最初のul(内視鏡)だけを対象とすることができます.これはメニューホルダーで、メニューの最初のレベルになります.あなたはそれを使用して選択することができます:“. menu > ul”、私たちは後でそれについてもっと話します.
  • 私たちはネストしたULの(ネストしたスコープ)だけを対象とすることができます.これは我々のドロップダウンになります.' em＞UL Li ul 'を選択することができます.これは、すべてのULの内部リスト項目を選択します.これは、途中で、固定した部門
    • の最初のUL(メニューホルダー)の中に置かれます
    そこで、まず、すべてのULをターゲットにして、コードの繰り返しを避けるために共通の外観を追加します.
    私たちが< A >タグをスタイルにすることに注意してください、これはすべてのLiの外観を正常にします.
    .menu {
  // ...
  ul {
    list-style: none;
    padding: 16px;
    margin: 0;
    li, li a {
      opacity: .8;
      color: #ffffff;      
      cursor: pointer;
      transition: 200ms;
      text-decoration: none;
      white-space: nowrap;
      font-weight: 700;
      &:hover {
        opacity: 1;
      }
      a {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;      
      }      
    }
  }
}
    さて、メニュー内のULとLiのタグは、上記のスタイルを継承します.また、ドロップダウンを開くメニューの項目をマークする矢印が必要になります.
    しかし、CSSの用語では、どの項目をドロップダウンし、誰がdont知っている?
    私たちは単純にLiを区別するためにクラスを追加します.「リンク」クラスで< li >を持っているとき、そのリンク.
    それを知って、私たちは、このようにLiに矢を加えることができます:
    .menu {
  // ...
  ul {
    // ...
    // lets put an arrow down 
    // to the li`s with dropdown
    li {
      padding-right: 36px;
      &::before {
        content: '';
        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #FFA500;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .link {
      // links dont need arrow
      &::before {
        padding-right: 0;
        display: none;
      }      
    }
  }
}
    CSSのみを使用して矢印を作成する方法を理解するには、CSSトリックにこの投稿を読むことができます.
    https://css-tricks.com/snippets/css/css-triangle/
    メニュー
    ". menu "divの中の最初の< ul >はメニューホルダーです.我々はそれがリンクやドロップダウンすることができます項目の水平リストであることを望む.そこで、リスト項目を並んで配置し、子を隠します.
    .menu {
  // ...
  // the first ul inside the container
  // is the menu, so must be visible 
  // and have its own style
  > ul {
    display: flex;
    height: var(--menu-height);
    align-items: center;
    background-color: #000000;
    // the first ul elements can be a
    // link or an li with a nested ul. 
    // the nested ul will be a dropdown
    li {
      position: relative;
      margin: 0 8px;
      // the dropdown style
      ul {
        // THE DROPDOWN GOES HERE
      }
    }
  }
}
    メニューの中の最初のul要素を選択するには、演算子を使用する必要があります.
    このコード例では、/dropdownがここにあります.HTML構造を見た場合、リスト項目はUL(ドロップダウン)を保持しなければなりません.このコメントは、我々のCSSコードでこのドロップダウンを狙っているところを正確に示しています.
    しかし、最初に、それをHTMLに加えましょう
    <div class="menu">
  <ul>
    <li class="link">
      <a href="">This is a link</a>
    </li>   
    <li>
      Now we have a dropdown
      <ul>
        <li class="link">
          <a href="">Sub A</a>
        </li>
        <li class="link">
          <a href="">Sub B</a>
        </li>        
      </ul>
    </li>
  </ul>
</div>

    ドロップダウン
    ドロップダウンはメニューホルダのリスト項目内のすべての< ul >です.しかし最初に、CSSがどう対処するかを理解できます.
    // the menu
.menu {
  // the menu holder with options
  > ul {
     // the menu items
     li {
        // the item dropdown
        ul {
        }
     }
  }
}
    LiはHOMEのときに< UL >子を示さなければなりません.だから、それを行うには、リスト項目を教えてください.しかし、前に、ドロップダウンをどのように、どこで表示する必要があります:
    .menu {
  // ...
  > ul {
    // ...
    li {
      // the holder
      position: relative;
      margin: 0 8px;
      ul {
        // the dropdown
        visibility: hidden;
        opacity: 0;        
        padding: 0;
        min-width: 160px;
        background-color: #333;
        position: absolute;
        top: calc(var(--menu-height) + 5px);
        left: 50%;
        transform: translateX(-50%);
        transition: 200ms;
        transition-delay: 200ms;
        // the dropdown items style
        li {
          margin: 0;
          padding: 8px 16px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          height: 30px;
          padding-right: 40px;
          // lets put an arrow right
          // to the inner li`s with
          // dropdowns
          &::before {
            width: 0; 
            height: 0; 
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid #FFA500;
          }
          // every dropdown after the
          // first must open to the right
          ul {
            top: -2%;
            left: 100%;
            transform: translate(0)
          }
          &:hover {
            background-color: #000000;
          }
        }
      }
      // on hover an li (not an <a>)
      // must show its ul (dropdown)
      &:hover {
        > ul {
          opacity: 1;
          visibility: visible;
          transition-delay: 0ms;
        }
      }
    }
  }
}
    これは非常に長く重要な部分です.理解しましょう.
    我々は、リストの項目内のすべてのULのを選択してドロップダウンに回している.それを達成するためには、以下の手順に従ってください.
  • は、CSSにネストしたULを描画し、どこに配置するかを説明する.最初に、このULは見えなくなって、我々が親を支えるとき、示されます.表示されると、次のコードがすべての適切な場所に配置されます.
    • // ...
position: absolute;
top: calc(var(--menu-height) + 5px);
left: 50%;
transform: translateX(-50%);
transition: 200ms;
transition-delay: 200ms;
    上部はNavbarの直後にドロップダウンを設定します、なぜ我々はSEND -メニュー高さVARをthats.
    左+変換は、その親に対するドロップダウンを中心にします.トランジションがスムーズになり、遅延は、カーソルをドロップダウンの間に移動する間隔を与える.
  • ドロップダウン(UL)を保持しているリスト項目は相対的でなければなりません.したがって、ドロップダウンに絶対位置を与え、その位置を親に対して相対的にすることができます.コードでは、このLIはそのコンテンツを集中化するためのFlexスタイルを持っています.
  • トリッキーなことがあります.最初のレベルの後にドロップダウンの位置をオーバーライドします.それ以降、ドロップダウンは右側にある必要があります.
    • Dropdownsが底になることを望むならば、あなたはここの「左の」セレクターを無視することができます.しかし、トッププロパティを無視することはできません.
    これは入れ子になったdropdownsの正しい位置を与えるコードの一部です.
    // every dropdown after the first level
// must pair the top with its parent, 
// and must tend to the right
ul {
  top: -2%;
  left: 100%;
  transform: translate(0)
}
    そして最後に、親をホバリングする際にドロップダウンを表示します.
    // when hover an li (not an <a>)
// must show its ul (dropdown)
&:hover {
  > ul {
    opacity: 1;
    visibility: visible;
    transition-delay: 0ms;
  }
}

    完了
    最後に、次のコードが必要です
    .menu {
  // define the height of the menu
  --menu-height: 40px;
  // holder and ul general style
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  ul {
    list-style: none;
    padding: 16px;
    margin: 0;
    li, li a {
      opacity: .8;
      color: #ffffff;      
      cursor: pointer;
      transition: 200ms;
      text-decoration: none;
      white-space: nowrap;
      font-weight: 700;
      &:hover {
        opacity: 1;
      }
      a {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;      
      }      
    }
    // lets put an arrow down 
    // to the li`s with dropdown
    li {
      padding-right: 36px;
      &::before {
        content: '';
        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #FFA500;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .link {
      // links dont need arrow
      &::before {
        padding-right: 0;
        display: none;
      }      
    }
  }
  // the first ul inside the container
  // is the menu, so must be visible 
  // and have its own style
  > ul {
    display: flex;
    height: var(--menu-height);
    align-items: center;
    background-color: #000000;
    // the first ul elements can be a
    // link or an li with a nested ul. 
    // the nested ul will be a dropdown
    li {
      position: relative;
      margin: 0 8px;
      // the dropdown style
      ul {
        visibility: hidden;
        opacity: 0;        
        padding: 0;
        min-width: 160px;
        background-color: #333;
        position: absolute;
        top: calc(var(--menu-height) + 5px);
        left: 50%;
        transform: translateX(-50%);
        transition: 200ms;
        transition-delay: 200ms;
        // the dropdown items style
        li {
          margin: 0;
          padding: 8px 16px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          height: 30px;
          padding-right: 40px;
          // lets put an arrow right
          // to the inner li`s with
          // dropdowns
          &::before {
            width: 0; 
            height: 0; 
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid #FFA500;
          }
          // every dropdown after the
          // first must open to the right
          ul {
            top: -2%;
            left: 100%;
            transform: translate(0)
          }
          &:hover {
            background-color: #000000;
          }
        }
      }
      // on hover an li (not an <a>)
      // must show its ul (dropdown)
      &:hover {
        > ul {
          opacity: 1;
          visibility: visible;
          transition-delay: 0ms;
        }
      }
    }
  }
}
    そして、上記のCSSはそのようなHTML構造を許すでしょう
    <div class="menu">
   <ul>
     <li>
       Dropdown A
       <ul>
         <li class="link">
           <a href="">Im a link</a>
         </li>
         <li class="link">
           <a href="">Im a link</a>
         </li>
         <li>
           Nested dropdown
           <ul>
             <li class="link">
               <a href="">Im a link</a>
             </li>
             <li class="link">
               <a href="">Im a link</a>
             </li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>
</div>
    理想は、理解しやすい時間がかかるとしても、非常に一般的で簡単です.すべてのリスト項目は、HOMEの上でその子ul要素を示さなければなりません.
    いくつかの複雑さは、私たちがドロップダウンの異なるレベルのためにCSS規則を変更しなければならないという事実です.
    最初のULレベルはメニュー自体とその水平バーです.番目のULレベルは、水平および中央のドロップダウン線です.次のULレベルは、内側のドロップダウンであり、彼らは右側に傾向があります.
    あなたはドロップダウンに衝突システムを追加するJavaScriptを使用して、彼らが成長する方法を変更したり、ハンバーガーメニューなどにすべてを変更します.
    私はそれを説明しようとしてベストを尽くしました、しかし、私は何かを説明したいと思いませんでした.そのようなことについては、いくつかの例、全体的な説明、Googleのツールとしてのアイデアを得るために十分である必要があります.
    結局初心者を助けることができる望み.
    そして覚えておいてください:最良の教師はその実践です.)
    あなたの時間をありがとう.
    すべての人々thats.
    ( UnsplashによるジョーSzczepanskaのカバー写真)
    問題を解く-テトロミノ
    Android開発の小さな経験