Menu/Prof
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。

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

Some visuals are licensed via Canva Pro (includes commercial rights).
Usage complies with Canva’s license terms at the time of use.
License policy: canva.com/policies/content-license-agreement

X
     この記事はプロモーションを含みます
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;
      }
    }

以上です

シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

makotoのアバター makoto Blogger&YouTuber

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

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

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

現在 ほぼ自由人。

contents