MultilingualPress 言語切り替えテキストリンクをドロップダウン化

レスポンシブもCSSのみにしたかったが面倒なのでJS使用。
アニメーションはなし、動きをつけたいと言われたらお見積りしてコード作成。

検証済みブラウザ

  • Firefox
  • Google Chrome
  • IE 11
  • MacOS Safari
  • Android 6.0 / 6.0.1
  • iOS 9.3.5 / 11.1.2

 

MLP埋め込みコードが吐き出すHTML/CSS

これらを元に構築する。

 

PCマウスオーバー限定 CSS only

  • 表示・非表示切り替えは visibility でも可能だが、マウスオーバートリガー部分が横100%になっちゃうので display none / block
  • MLPデフォルトクラスに width 90vw を指定し横スクロール表示防止
  • ul に height 90vh / overflow auto を指定し言語が増えたらスクロール表示

 

レスポンシブクリック CSS with jQuery

  • WordPressコードはCSS only同様
  • JSコードは自作レスポンシブドロワーを流用、jQuery ver 1.7.0~

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。