ボックスナビと可愛らしいナビゲーションメニュー

contents

ボックスナビと可愛らしいナビゲーションメニューを試す

ぽんひろさんのボックスナビ。kodocode.netさんのナビゲーションメニュー。

どちらもとても有名な方ですね。

そこで公開されている「ボックスナビ」と「可愛らしいナビゲーションメニュー」を

私も使ってみたくて

自分のSWELLのブログパーツ化できるようにしてみました。

実際の動作はこのBLOGに設置してあるとおりなのですが

一応表示の仕方として複数あります。

アイコンは Font Awesome 6.0使用。

すべてレスポンシブなのでブラウザの横幅サイズを変更して動きをみてください。

現在のSWELLのバージョンではボックスナビ（ボックスメニュー）は標準機能になりましたので

この記事はあくまで参考としてお読みください。

ナビサンプル1

STEP

色合いが可愛らしく無くなったナビゲーションメニュー（現在停止中）

HTML ブログパーツ用

<nav class="mnavi">
    <ul class="is-style-default">
        <li class="var_nav">
            <div class="link_bg"></div>
            <div class="link_title">
                <div class="icon"> 
                    <span class="swl-fz u-fz-l"><i class="fa-solid fa-display"></i></span>
                </div>
                    <a href="/category/computer/"><span class="navi-word">computer</span></a>
            </div>
        </li>
        <li class="var_nav">
            <div class="link_bg"></div>
            <div class="link_title">
                <div class="icon"> 
                    <span class="swl-fz u-fz-l"><i class="fas fa-blog"></i></span>
                </div>
                    <a href="/category/blog/"><span class="navi-word">Blog</span></a>
            </div>
        </li>
        <li class="var_nav">
            <div class="link_bg"></div>
            <div class="link_title">
                <div class="icon"> 
                    <span class="swl-fz u-fz-l"><i class="fa-solid fa-cart-plus"></i></span>
                </div>
                    <a href="/category/review/"><span class="navi-word">review</span></a>
            </div>
        </li>
        <li class="var_nav">
            <div class="link_bg"></div>
            <div class="link_title">
                <div class="icon"> 
                    <span class="swl-fz u-fz-l"><i class="fas fa-carrot"></i></span>
                </div>
                    <a href="/category/life/"><span class="navi-word">Life</span></a>
            </div>
        </li>
    </ul>
</nav>

一部SWELLのサイズ用クラスを流用してます(swl-fz u-fz-l)

ナビサンプル2

STEP

SWELLがBOXMENU対応前に使用してたやつ

HTML ブログパーツ用

<div class="mmnav">
<ul>
  <li>
    <a href="/category/computer/">
      <div class="iconz">
        
      </div>
      <span class="mm-nt">computer</span>
    </a>
  </li>
  <li>
    <a href="/category/blog/">
      <div class="iconz">
        
      </div>
      <span class="mm-nt">blog</span>
    </a>
  </li>
  <li>
    <a href="/category/review/">
      <div class="iconz">
        
      </div>
      <span class="mm-nt">review</span>
    </a>
  </li>
  <li>
    <a href="/category/life/">
      <div class="iconz">
        
      </div>
      <span class="mm-nt">life</span>
    </a>
  </li>
</ul>
</div>

ナビサンプル3

STEP

フワッとアイコンが現れるおとなしい版

HTML ブログパーツ用

<div class="mmnav">
<ul>
  <li>
    <a href="/category/computer/">
      <div class="iconfade">
        
      </div>
      <span class="mm-nt">computer</span>
    </a>
  </li>
  <li>
    <a href="/category/blog/">
      <div class="iconfade">
        
      </div>
      <span class="mm-nt">blog</span>
    </a>
  </li>
  <li>
    <a href="/category/review/">
      <div class="iconfade">
        
      </div>
      <span class="mm-nt">review</span>
    </a>
  </li>
  <li>
    <a href="/category/life/">
      <div class="iconfade">
        
      </div>
      <span class="mm-nt">life</span>
    </a>
  </li>
</ul>
</div>

STEP

それぞれに使用するcssそのままコピペして上のナビに使えます。

cssは長くなるので可読性が良いテーマファイルエディターでSWELL CHILD: スタイルシート (style.css)に追加しても良いしそのままカスタマイズ＞追加cssに追加しても構いません。

.mnavi{
    margin:0px;
    padding:5px;
}
    
    .mnavi ul {
        margin:0px;
        padding:0px;
        list-style-type:none;
        -webkit-backface-visibility: hidden; backface-visibility: hidden;  
    }
    
    .var_nav {
        position:relative;
        background:#3a3a3a; 
        width:300px;
        height:50px;
        margin-bottom:1px;
        opacity: 0.7;
    }

    .link_bg {
        width:50px;
        height:50px;
        position:absolute;
        background:#04384c;
        color:#fff;
        z-index:2;
    }

    .link_bg i {
        position:relative;
    }

    .link_title {
        position:absolute;
        width:100%;
        z-index:3;
        color:#fff;
    }

    .link_title:hover .icon {
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);  
    }

    .var_nav:hover .link_bg {
        width:100%;
        background:#04384c;
        -webkit-transition: all 0.1s ease-in-out;
        -moz-transition: all 0.1s ease-in-out;
        -o-transition: all 0.1s ease-in-out;
        -ms-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;  
    }
    
    .var_nav:hover a {
        font-weight:bold;
        -webkit-transition:all 0.1s ease-in-out;
        -moz-transition:all 0.1s ease-in-out; 
        -o-transition:all 0.1s ease-in-out; 
        -ms-transition:all 0.1s ease-in-out;
        transition:all 0.1s ease-in-out;  
    }

    .icon {
        position:relative;
        width:50px;
        height:50px;
        text-align:center;
        color:#fff;
        -webkit-transition:all 0.1s ease-in-out;
        -moz-transition:all 0.1s ease-in-out; 
        -o-transition:all 0.1s ease-in-out; 
        -ms-transition:all 0.1s ease-in-out;   
        float:left;
        transition:all 0.2s ease-in-out;   
        float:left;  
    }

    .icon i {top:10px;position:relative;}
    
    .mnavi a {
        display:block;
        position:absolute;
        float:left;
        font-family:arial;
        color:#fff;
        text-decoration:none;
        width:100%;
        height:50px;
        text-align:center;
    }

    .mnavi .navi-word {
        margin-top:15px;
        display:block;
    }

/////　以下ボックスナビ
.mmnav {
    margin:0 0;
    padding:0;
}
    .mmnav ul {
        margin:0;
        padding:0;
        border:none;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        list-style:none;
    }

    .mmnav ul li {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        margin:0;
        padding:0;
        text-align:center;
        box-shadow: inset 1px 1px 0 0 #999, 1px 1px 0 0 #999, 1px 0 0 0 #999;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        min-height:73px;
        cursor:pointer;
        background:#fff;
    }

    @media screen and (max-width: 600px) {
        .mmnav ul li{
            -ms-flex-preferred-size: 45%;
            flex-basis: 45%;
        }
    }
    
    .mmnav ul li a i,.mmnav ul li a svg {
        font-size: 25px;
        display:inline-block;
    }
    
    .mmnav ul li:hover .iconz {
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);  
    }

    .mmnav ul li:hover .iconfade {
        animation-name: fade;
        animation-duration: 2s;
    }
    
    .iconz {
        text-align:center;
        -webkit-transition:all 0.1s ease-in-out;
        -moz-transition:all 0.1s ease-in-out; 
        -o-transition:all 0.1s ease-in-out; 
        -ms-transition:all 0.1s ease-in-out;   
        transition:all 0.2s ease-in-out;   
    }

    .iconz i {
        top:0px;
        position:relative;
    }

    .mmnav ul li:hover {
        z-index:2;
        transition: 0.35s ease-in-out;
        width:100%;
        background:#5f6c78;	
    }
    
    .mmnav ul li:before {
        content:unset !important;
    }

    .mmnav ul li a {
        display:block;
        padding: 0.5em 1em;
        text-decoration:none;
        width:100%;
    }

    .mmnav ul li a:hover {
        background:none;
        opacity:1;
        color:#fff;
    }

    .mmnav .mm-nt {
        display: block;
    }

    #sidebar .mmnav ul li {
        -ms-flex-preferred-size: 45%;
        flex-basis:45%;
    }
    
    @keyframes fade{
      0%{
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
    }

以上です

この記事を書いた人

makoto Blogger&YouTuber

サーバー管理者として17年ほど仕事でサーバー触ってました。
www,mail,dns,sql各鯖をすべてFreeBSDで運用してましたが現世ではかなりレアなタイプになるみたいですね笑

viやシェルスクリプトとかperlとかgccとかFreeBSDとか実はbashよりtcshが好きとか時々寝ぼけるのは
その名残でしょう。

今まで縁の下の力持ち的な他人のためにプログラムを書き他人のためにサーバー構築し他人のためにWEBサイトを創る的な世界から
自分の好きなことに集中できる環境は実に気持ち良いですね。
現役は引退済みなので難しいことはやりませんしやれません。

現在　ほぼ自由人。