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
1 2 3 4 5 6 | <div class="mlp-language-box mlp_language_box"> <ul> <li><a rel="alternate" href="">日本語</a></li> <li><a rel="alternate" href="">English</a></li> </ul> </div> |
1 2 3 4 5 | .mlp-language-box ul li { display: inline; margin: 0 5px 0 0; list-style-type: none; } |
これらを元に構築する。
PCマウスオーバー限定 CSS only
- 表示・非表示切り替えは visibility でも可能だが、マウスオーバートリガー部分が横100%になっちゃうので display none / block
- MLPデフォルトクラスに width 90vw を指定し横スクロール表示防止
- ul に height 90vh / overflow auto を指定し言語が増えたらスクロール表示
1 2 3 4 5 6 | <nav id="nav-mlp"> <div class="nav-mlp"> <span>Languages</span> <?php dynamic_sidebar('lang_switch'); ?> <!-- /.nav-mlp --></div> <!-- /#nav-mlp --></nav> |
1 2 3 4 5 6 7 8 9 10 11 | <nav id="nav-mlp"> <div class="nav-mlp"> <span>Languages</span> <div class="mlp-language-box mlp_language_box"> <ul> <li><a rel="alternate" href="">日本語</a></li> <li><a rel="alternate" href="">English</a></li> </ul> <!-- /.mlp-language-box --></div> <!-- /.nav-mlp --></div> <!-- /#nav-mlp --></nav> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | @mixin cf { &:after { content: ""; display: block; clear: both; } } #nav-mlp { @include cf; ul { height: 90vh; overflow: auto; position: absolute; left: 0; top: 0; } li { margin: 0; display: block; border: 1px solid #ccc; @include lc-not { border-bottom: 0; } } a { color: black; text-decoration: none; padding: 5px 10px; display: block; background: white; &:hover { color: white; background: black; } } } /* トリガー */ .nav-mlp { cursor: pointer; float: left; position: relative; span { position: relative; &::after { content: ''; position: absolute; right: -15px; top: 10px; margin-top: -2px; border-style: solid; border-width: 7px 5px 0 5px; border-color: black transparent transparent transparent; } } &:hover { .mlp-language-box { display: block; } } } /* MLPデフォルトクラス */ .mlp-language-box { width: 90vw; position: relative; display: none; } |
レスポンシブクリック CSS with jQuery
- WordPressコードはCSS only同様
- JSコードは自作レスポンシブドロワーを流用、jQuery ver 1.7.0～
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <nav id="nav-mlp"> <div class="nav-mlp"> <span>Languages</span> <div class="mlp-language-box mlp_language_box"> <ul> <li><a rel="alternate" href="">日本語</a></li> <li><a rel="alternate" href="">English</a></li> </ul> <!-- /.mlp-language-box --></div> <!-- /.nav-mlp --></div> <!-- /#nav-mlp --></nav> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="js/mlp.js"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | @mixin cf { &:after { content: ""; display: block; clear: both; } } #nav-mlp { @include cf; ul { height: 90vh; overflow: auto; position: absolute; left: 0; top: 0; padding-bottom: 100px; background: white; } li { margin: 0; display: block; border: 1px solid #ccc; @include lc-not { border-bottom: 0; } } a { color: black; text-decoration: none; padding: 5px 10px; display: block; background: white; &:hover { color: white; background: black; } } } /* トリガー */ .nav-mlp { cursor: pointer; float: left; position: relative; span { position: relative; &::after { content: ''; position: absolute; right: -15px; top: 10px; margin-top: -2px; border-style: solid; border-width: 7px 5px 0 5px; border-color: black transparent transparent transparent; } } } /* MLPデフォルトクラス */ .mlp-language-box { width: 90vw; position: relative; display: none; &.block { display: block; z-index: 9; } } // 閉じるクリック用オーバーレイ #mlp-overlay { width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none; &.block { display: block; z-index: 1; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /* MultilingualPress Switcher Author: KEITA HIRAI URL: keitahirai.net */ $(function() { var scrollY; $("body").append('<div id="mlp-overlay"></div>'); var lang = $(".mlp-language-box"), overlay = $("#mlp-overlay"); $(".nav-mlp span").click(function(e) { scrollY = $(window).scrollTop(); $("body").css({ position: "fixed", top: -scrollY }); lang.addClass("block"); overlay.addClass("block"); e.preventDefault(); return false; }); $("#mlp-overlay").click(function(e) { $("body").attr("style", ""); $("html, body").prop({scrollTop: scrollY}); lang.removeClass("block"); overlay.removeClass("block"); e.preventDefault(); return false; }); }); |
コメントを投稿する