最近は、ひと昔のように"ハンバーガーメニュー"一色ではなくなってます。
スマホで新しいアプリを入れると、どこにメニューがあるのか判らないものが多くて厄介です。
画面が大型化して左上が片手で届きにくくなったせいでしょうか・・・
いずれにしても、レスポンシブなメニューを考えると似たような機能は必要です。
Bootstrap ではどうでしょうか。
要するに、公式サイト と同じに実装をするということ。
(最近は右上に表示するのね・・・。)
Bootstrap でのハンバーガーメニュー
レスポンシブと言えば、代表的なものの一つがハンバーガーメニューでしょうか。
Semantic UI での機能としては、sidebar を使います。サイドバーの例
ただ、実装しようと思った際、MUI(MUIのサイドバーの例)と異なる挙動として、
一つ目の問題は、メニューを出しながらコンテンツを参照できなくなります。
Semantic UI のサイトの作りもそうなっているので、想定された動作なのでしょう。
なので、"右端がはみ出しても問題は無い"という事でしょうか・・・。
画面サイズが小さい場合はそれで良いのですが、PCのサイズだとグレーアウトする必要は無いのではと思ってしまいます。
標準動作のようですが、詳しくは、Sidebarの設定 で変更可能でした。
$('.ui.sidebar').sidebar('setting', 'dimPage', false);
とすれば、とりあえずグレーアウトだけは回避できます。
コンテンツの上部が固定メニューで隠れる問題は、コンテンツ側に幅分の padding を入れるしかないようです。
Semantic UI ではこのように結構個別に CSS を書いて調整する場合が多くなります。
自由度があるという反面、面倒だという感じもあります。
右端がはみ出して見れなくなる問題も同様ですが、サイドメニューの表示、非表示によって動的に padding を変える必要もあります。
ブラウザの表示サイズによって、サイドメニューを自動で閉じたい場合があります。
例えば、PCではサイドメニューは気になりませんが、スマートフォンでは必要の無い時は閉じておきたいような場面です。
Semantic UI でも javascript と css を書けば出来ますが、もっとシンプルに書けると良いのですが残念です。
カスタマイズをバリバリしたい人向けなのかもしれません。
とりあえず、自動でサイドバーを開閉する以外は、下記の処理で対応できました。
// ■ SemanticUI 用の処理
// ui メニューボタン
$('.ui.sidebar').sidebar('setting',
{
dimPage: false ,
onShow: function(){
$('.pusher').css('padding-right','260px');
return false;
},
onHide: function(){
$('.pusher').css('padding-right','0px');
return false;
}
}
);
| « 前頁 | 次頁 » |