ナビゲーションメニューのアイデア

動くってステキやん(笑)

サンプルのcodepenの内容のまんまでは実装できませんが、うちのサイトに導入してみました。

参考: blazechariot -Xdomain-

スマホの時はひとまず現状は考慮してませんが、PCでは動作しているようです。
報告まで。

サンプル: fork :: menu, vertical slide 主にWordpress theme Simplicity用

既存のメニューにより簡単に適用させる方法として改造してみました。
ただし、オープンなul等の設定で、何かしらのスタイルがある場合は、それを打ち消すスタイルを書かねばなりません。

オープンなulの設定とは、例えば、何かしらのセレクタ内のulではなく、ulそのものが単体で設定されている場合です。

例えば、

ul {   /*　← これ　*/
  padding: 0;
  margin: 0;
  color: #666;
  line-height: 1.3;  /*こういうのが残ったりするので*/
}

.test ul { /* こちらはok */
  //何かしらのプロパティ
}

■打ち消す方法とは
例えば上記のline-heightの場合、

.vsMenu ul {
  line-height: initial;
}

このようなものを、サンプルのcssよりも前に書きます。

・本来のul設定
・その他諸々
・打ち消すulの設定があって、ここで初期化
・サンプルのulの設定

こういう感じで読み込まれるので、サンプルのcssが実行される前に不要なプロパティが初期化されるというわけです。

■フォントカラーについて
基本的なカラーについては、.vsMenuのcolorをいじれば変わります。メニューのaの色については、

.vsMenu {
  color: red; /*例えばの例*/
}

.vsMenu a {
  color: inherit;
}

このようになっているので、リンク色とテキスト色を変えたい場合は、各々に設定して、テキストもリンクも同じ色で良い場合は、そのまま利用できます。inheritは継承という意味です。

■.sub-menuの位置について
.sub-menuのプロパティで、justify-contentと言うのがあります。これで左右中央寄せが可能です。

・左寄せ flex-start
・右寄せ flex-end
・中央寄せ center

これらは、.menuも同様です。

Hidekichi様、わいひら様、初めまして。ゆうこと申します。
Simplicity2でブログを作成中です。素敵なテーマとカスタマイズ情報をありがとうございます。

こちらのグローバルナビのアイディアに惚れてしまい、ぜひ導入したいのですが、
どうやってカスタマイズすれば良いかわかりません。
子テーマのstyle.cssにcssを、footer-insert.phpにjsを、とコードをそのまま追加するのでは動かないのでしょうか。
また、html（php）をいじる必要があるとすれば、どこに書く必要がありますか？

超初心者の質問で大変恐縮ですが、どうしてもこちらのナビを使ってみたいので、教えていただけますと嬉しいです。
よろしくお願いします！

これは、こちらのサンプルの方が新しく、導入方法としては、子テーマjavascript.jsにjavascript欄のスクリプトを丸ごと追記して、スクリプト冒頭にある、naviEnableSize = 320; で、このメニューが有効になる最小サイズを指定します。
オリジナルのメニューとこのメニューの切り替え自体は、メニューを複製したものにcssを当てていて、この設定した数値以上の場合は、オリジナルのメニューを非表示にし、複製したメニューを有効にしています。
これ以下になると、複製したメニューが非表示になって、オリジナルメニューが表示されると言う具合です。

上記だと、320px以下は通常のSimplicityのメニューになります(はずです)。iPhone6等の幅のあるスマホなどはオリジナルのメニューにするのであれば、上記の値に480pxとかその辺りを指定すればよいかと思います。横向きも考慮する場合は768px以上はこのメニューを有効にするとかにすると、タブレット以上は有効になると言う感じです。

次にcssはscssで書いてありますので、サンプルのcss欄の下向き三角より、view compiledでcssに変換したものを子テーマstyle.cssの最後にコピペします。

外観は .vsMenu でだいたい設定できます。
細かな部分、例えばhoverした時とかは別途それぞれの要素に指定してありますが、まぁcolorとかの事なので好きにいじれるかと思います。

何かしら不具合があった場合は、追記したスクリプトを、

/*
(function($){
  //略
})(jQuery);
*/

こんな感じに/**/で囲めば、ひとまずオリジナルのメニューが表示されるはずですので、何がどう問題であったかを報告して頂いて修正を待ってください。

自分のサイトでも以前利用しており、特に大きな問題はなかったですが、全ての環境でテストしているとかではないので何かしらあればお気軽に。

hidekichi様、とっても早くにお返事いただいてありがとうございます。
実装できました！嬉しいですー！！

しかしながら、モバイル表示でメニューが表示されない問題が起きました。
ナビゲーションバーのモバイル設定は「スライドインライト(ボタン下)」を選択しておりますが、一番左のメニューボタンをタップしてもメニューが画面左からスライドインせず、画面全体が曇りガラスのままになっています。サイドメニューボタンを押しても曇ったままです。

試しにモバイルメニューをデフォルトの「アコーディオン」に設定してもメニューが降りてこない状況です。

ご教示いただいたjsの「naviEnableSize」の部分は、480pxに設定しています。

聞いてばかりで申し訳ございません。もしよければ修正個所を教えていただきますと嬉しいです。

すみません、ナビ自体がレスポンシブなので、切り替え部分の処理をしてませんでした（笑）

サンプルをアップデートして切り替えができるようにしてあるひとまずのスクリプトを用意しました。と言っても同じものですが。

このjavascript部分を前回のものと入れ替えてください。
そこそこ直したので、部分的にコピペよりは全部を入れ替えたほうが良いかと思います。
おそらくですが、動作的にはうまく行くんじゃなかろうかと。

場合によってはまだなにかしら問題があるかもしれません。またスクリプト自体のコンパクト化もまだしてないので、ここらは引き続き何かしら手を入れていきます。

問題があればその都度直していきますので、何かあれば報告いただけると助かります。

サンプルを見ていただければ理解してもらえると思いますが、画面を480px以下のサイズにした時(リザルトとcssやらのソースの境界線をいじれます※)に、通常のulのリストが表示されると思います。これがオリジナルのメニューです。

また全てのモバイル端末で動作するのかはわかりませんが、端末の向き(縦・横)も検知して、その場合に指定幅より広い場合はこのサンプルのメニュー、狭い場合はSimplicityのオリジナルメニューが出るようにしました。

※ ソースが画面上部にある場合は、右上にあるchange viewから横にソースを持っていけます。

この投稿現在、サンプルのjavascriptとcssをアップデートしましたので、両方共変更してください。

ちなみに、マルチレベルに対応しているわけではないので、メニューの構造として、親・子までにしてください。
孫レベルのメニューの階層がある場合は問題が出ることがあります。

Simplicity公式で言うと、

ダウンロード
  親テーマダウンロード
  子テーマダウンロード

これはOK。

ダウンロード
  親テーマダウンロード
    スキン //←これはダメ
  子テーマダウンロード

こんな感じにダウンロード(親メニュー)、親テーマダウンロード(子)まではOKですが、スキン(孫)までになるとダメです。

普通にこのサンプルのように表示を変えるのではなく、表示を変えずにやる場合は、まだ作成中ですが、こちらのサンプルっぽいのを使われるのが良いかと思います。

hidekichi様、直りましたーー！！
最高です！ありがとうございます（号泣）
スマホでも元のメニューが問題なく表示されました。（iPhone5sのみの確認ではありますが。）

hidekichi様のおかげで、思い通りのナビが出来ました。
そして、jsの書き込み方など、勉強させていただきました。

また、万が一不具合等があった場合、報告させていただきます。
本当にありがとうございました！
m(_ _)m