タイルナビゲーション- HTML CSSとJSを使ったWebページのNavbarの作り方

こんにちは、ようこそ.今日のブログでは、どのように素晴らしい完全にあなたのウェブサイトのタイルナビゲーションシステムを動作するように表示されます.
タイルナビゲーションは、ほとんど発見されません非常にユニークなナビゲーションです.あなたのポートフォリオにタイルナビゲーションを使用して良い印象を確認します.このナビゲーションは正常なNavbarより良い経験をする良いUXを持っています.
デモ、コードチュートリアルを説明します.下の動画を見ることができます.

ビデオチュートリアル

If you want to miss more amazing upcoming projects. Make sure to subscribe me on youtube. It really motivates me.

それで、より多くの時間を浪費することなく、これをコード化する方法を見ましょう.

コード

You can get my all project's source code in just 5$ membership on patreon. Support my work for more awesome and amazing projects. This is just a beginning.Source Code

タイルのナビゲーションには、3つのファイルが必要ですindex.html , style.css and app.js . そしてもちろん、我々はimg 画像のフォルダ.
ので、単にナビゲーションの見出しを作ることから始めましょう.基本的なHTMLテンプレートを起動し、タイトルを与えるstyle.css ファイルを追加することを忘れないでくださいapp.js .

<h1 class="heading">navigation</h1>

スタイル.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2f2f2f;
    color: #fff;
    font-family: 'roboto', sans-serif;
}

.heading{
    font-size: 100px;
    text-transform: uppercase;
}

出力

さて、重要なことをナビゲートしてみましょう.そのため、すべてのリンクを保持するコンテナを作る.

<!-- links -->
<div class="links-container hide">
</div>

この容器の中にa タグを使用してリンクを作成します.

<!-- links -->
<div class="links-container hide">
    <a href="#" class="link"></a>
</div>

今、多分、あなたは我々が内部にイメージを与えることができるということを知りませんa イメージ要素を作成するにはよく、私は前にそれを知りませんでした.
それで、我々はコースのリンクとしてイメージを必要とします.

<!-- links -->
<div class="links-container hide">
    <a href="#" class="link">
        <img src="img/img 1.jpg" alt="">
    </a>
</div>

ジャストコピーa タグ4より多くの時間とイメージパスを変更します.
大きいイメージのため、出力はひどく見えます.ので、スタイルのリンクをしましょう.

.links-container{
    width: 100%;
    height: 100vh;
    position: fixed; 
    top: 0;
    left: 0;
    display: flex;
}

与えるlinks-container ディスプレイflex . これはlink or a 並んで.位置fixed 我々はそれが画面にスクロールに関係なく滞在したいので.
今スタイルa その画像と一緒にタグ.

.link{
    position: relative;
    width: 20%;
    height: 100%;
    overflow: hidden;
}

.link img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

出力

今度はホバー効果を加えましょう.

.link:hover img{
    transform: rotate(-2deg) scale(1.1);
}

:hover this simply means when being hover. So, the whole line or selector simply means give these style to the img element when .link element is being hover.

我々は効果を得たが、非常に明るい.そして、それほど魅力的に見えない.だから、黒のオーバーレイを作りましょうlink .
オーバーレイ用に::after CSS擬似要素.詳しくはこちらをご覧ください.

.link::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    transition: .5s;
}

.link:hover::after{
    opacity: 0.4;
}

出力

今あなたがデモで見たように、我々はまた、下部にテキストがあります.それで、それらを作りましょう.テキストを追加するにはp 元素内部a タグ.

<div class="links-container hide">
    <a href="#" class="link">
        <img src="img/img 1.jpg" alt="">
        <p>home</p>
    </a>
    <a href="#" class="link">
        <img src="img/img 2.png" alt="">
        <p>project</p>
    </a>
    +3 links more
</div>

あなたがページを見るならば、あなたはテキストを見ることができません.テキストがイメージの後にあるので.トップでそれらを作るために、CSSを与えてください.

.link p{
    color: #fff;
    position: absolute;
    bottom: 220px;
    right: -120px;
    width: 150%;
    height: 30px;
    text-transform: uppercase;
    font-size: 50px;
    transform: rotate(-90deg);
}

出力

今、我々はトグルボタンを作成する必要があります.

<!-- toggle btn -->
<div class="toggle-btn">
    <span></span>
    <span></span>
</div>

ボタンをスタイル.

.toggle-btn{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    top: 20px;
    background: #2f2f2f;
    border-radius: 50%;
    z-index: 99;
    cursor: pointer;
}

.toggle-btn span{
    position: absolute;
    width: 50%;
    height: 2px;
    background: #fff;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .5s;
}

.toggle-btn span:nth-child(2){
    top: 60%;
}

出力

今我々はクロスXの効果をしたい.トグルボタンがあるとき、それは45 degによってスパンを回転させますactive クラス.このように.

.toggle-btn.active span{
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.toggle-btn.active span:nth-child(2){
    transform: translate(-50%, -50%) rotate(-45deg);
}

今すぐ追加active クラストゥtoggle-btn 出力を見るには

出力

リンクを隠す.使いましょうhide クラスlinks-container 要素.

.links-container{
    // previous styles
    opacity: 1;
    pointer-events: all;
    transition: .5s;
}

.links-container.hide{
    opacity: 0;
    pointer-events: none;
}

pointer-events property is used to set elements pointer interactivity. In this case we are setting all kind of pointer interaction as a default. But setting no interaction when the links are hidden using hide class.

さて、ここでJSがクラスをトグルするようにします.我々は、チェックボックスを使用して純粋なCSSでこの全体の効果を作ることができます.しかし、我々は若干の他の日それをします.
オープンapp.js ファーストセレクトtoggle-btn and links-container 使用querySelector メソッド.

const toggleBtn = document.querySelector('.toggle-btn');
const linksContainer = document.querySelector('.links-container');

その後、Clickイベントをtoggle-btn をクリックし、そのClickイベント内のクラスを切り替えます.

toggleBtn.addEventListener('click', () => {
    toggleBtn.classList.toggle('active');
    linksContainer.classList.toggle('hide');
})

出力

もう終わりです.私は、あなたが各々とすべてを理解したことを望みます.あなたが疑いを持っているか、私が何かを逃したならば、私にコメントで知らせさせました.私は別のタイルナビゲーションチュートリアルをした.しかし残念なことに、私はブログを書くのに慣れていません.あなたはそれをチェックすることができますhere .

あなたが役に立つかもしれない記事

あなたが私のYouTubeチャンネルを予約することができるならば、私は本当に感謝します.私は素晴らしいWebコンテンツを作成します.
読書ありがとう.