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

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

体ぶっ壊して死にかけたので人生RESET中。
\ ポイント最大10倍! /

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

contents

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

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

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

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

私も使ってみたくて

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

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

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

アイコンは Font Awesome 6.0使用。

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

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

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

ナビサンプル1

STEP
色合いが可愛らしく無くなったナビゲーションメニュー

ナビサンプル2

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

ナビサンプル3

STEP
フワッとアイコンが現れるおとなしい版
STEP
それぞれに使用するcssそのままコピペして上のナビに使えます。

以上です

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