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

<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)

<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>

<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>

.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;
      }
    }