ボックスナビと可愛らしいナビゲーションメニュー
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;
}
}以上です
あわせて読みたい
SWELLで 最新版 Font Awesomeや GoogleFontを 高速に使う方法
【最新版Font AwesomeやgoogleフォントをWordPress ローカルで 高速に読み出す。】 Blogでも普通にHTML書いてもやはりかっこいいアイコンは使いたい。 私のBLOGもアイコ…
SWELL - シンプルなのに、高機能 – もっと気軽に、楽しく記事を書こう。 それを可能にするWordPressテーマです。
SWELLはGPL100%テーマです。
ライセンス制限はなく、複数サイトでご自由にご利用頂けます。
このBLOGももちろんSWELL使ってますよ！
ロリポップレンタルサーバー
筆者もこのBLOGでお世話になっているレンタルサーバー。 ハイスピードプランはLiteSpeed採用でガチで速いっすよ。
筆者もこのBLOGでお世話になっているレンタルサーバー。
ベーシックプランはガチで速いっすよ。コストパフォーマンス満足度
使い続けたいレンタルサーバー
アフィリエイト、ブログで使いたいレンタルサーバー
サポート対応満足度
すべて1位
この記事を書いた人
関連記事
-
SWELLとEWWW Image Optimizerの相性問題 -
しまったピンタレストのハッシュタグの存在忘れてた -
twitter reply deboosting（リプライデブーステイング）とその他のシャドウバン
-
広告エコシステムの健全性を堅持するため、不正を検知する目的での IP アドレスの使用が認められるように、ポリシーの文言を変更しました
-
strong と b タグは SEO的に Googleは どうみてるのか問題 そして SWELLで回避策を考えてみよう
-
BLOG流入と被リンク。seo的に考える被リンク獲得効果について考察
-
【swellカスタマイズ】javascript/cssだけで変な動きのあるページを作る
-
ランクダウンを狙う逆SEO（低品質リンク爆弾）
