アイコンを作成する

7929 ワード
tutorial html css テキストリンク
今日のポストでは、私はあなたのWebプロジェクトのためのアイコンベースの、フローティングナビゲーションメニューを作成することがいかに簡単かを実証したい.

ビデオチュートリアル


あなたがビデオ形式でこのチュートリアルを好むならば、私のYouTubeチャンネル(DCODE)でそれをチェックしてください

ステップ1：アイコンライブラリの選択


あなたのプロジェクトのアイコンライブラリを既に使用している場合は、この手順を省略すること自由に感じてください.人のために、私は何かを使用することをお勧めしますGoogle Material Icons 彼らは超簡単に設定して使用するように.
あなたはそれを含めることによってライブラリを使用して起動することができます<head> :
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

ステップ2 : HTMLの追加


我々は、使用するつもりです<nav> クラスの.nav メニューを表す.その中で、アイコンのリンクを指定できます.
<nav class="nav">
    <a href="#" class="nav__link">
        <i class="material-icons nav__icon">dashboard</i>
        <span class="nav__text">Dashboard</span>
    </a>
    <!-- ... and more links below -->
</nav>
我々が見ることができるように、我々が使っている各々の関連のために<a class="nav__link"> , その中から以下の要素があります.
  • <i class="material-icons nav__icon">[icon_name]</i> - これはあなたの好みのアイコンを表示することです.この場合、私はdashboard アイコン.より多くのアイコンを見つけることができますhere .
  • <span class="nav__text"> - これは非常に自己説明され、我々は単にアイコンの下に表示するテキストを選択している.
    • HTMLを追加した後は、以下のようにします.

    ステップ3 : CSSの追加


    ここではすべての場所に該当する予定です-私たちは、ページの下部にあるメニューを配置し、他のすべての上に浮かんでCSSを使用するつもりです.

    メニューのスタイル


    使用position: fixed メニューが他のすべてのページより上に浮かんでいることを確認し、bottom: 0 これを下に移動します.
    body {
    margin: 0 0 55px 0;
}

.nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    display: flex;
    overflow-x: auto;
}
    私たちはdisplay: flex ここで我々は簡単に次のステップでは、個々のアイコンのリンクをレイアウトすることができますoverflow-x: auto ユーザーが小さく幅のデバイス上にあまりにも多くのアイコンがある場合に左と右にスクロールすることができます.
    あなたも気づいたかもしれないmargin で<body> - これは55px 下部には、同じ高さのメニューに設定され、既存のボディコンテンツのいずれもそれの下に隠されることを保証します.

    アイコンのリンクをスタイリング


    これは間違いなくチュートリアルの中で最大のルールセットになるでしょう.したがって、CSSを書きましょう.
    .nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    font-family: sans-serif;
    font-size: 13px;
    color: #444444;
    text-decoration: none;
}

.nav__link:hover {
    background-color: #eeeeee;
}
    重要なプロパティを見てみましょう.
  • display: flex - 私たちはアイコンを中心にラベルを整列させることができますalign-items: center; and justify-content: centre
  • flex-grow: 1 - 各アイコンが等しい幅を取ることを保証します
  • flex-direction: column - アイコンとラベルが並んでいるのを確実にします
  • white-space: nowrap - ラベルが新しい行に流れないようにします
    • 次のようになります.

    最終的なタッチ


    この解決策で、我々はまた、“アクティブビュー/ページ”またはその性質の何かとしてのリンクを表すことができます.CSSで修飾子クラスを追加しましょう.
    .nav__link--active {
    color: #009579;
}
    それから、HTMLのリンクの一つに追加できます.
    <a href="/profile" class="nav__link nav__link--active">
    これは以下のようなものです.

    そして、それ!誰かがどんな質問または提案をするならば、以下のままにしてください😁
    コンピュータの課題5-1
    210717 TIL