ドロップダウン方式のボタンに変えたらスッキリしすぎた

ある程度表示する内容も増えて 妙に長ったらしくなったおかげで 見た目的にも若干残念な感じになりつつあるので なんかいい方法ないかなぁとbootstrapの内容を眺めてたら ドロップダウンのボタンでスッキリすることが判明。

んで、最初ドロップダウンってなんやねんって正直思ったけど Dropdown Bootstrap スクリーンショット 2017-08-08 15.50.50.png

こんな感じでクリックしたらデローンと下に表示できるようにしてくれるらしい。 これは使わないわけにはいかないので早速実装。

んー。結構色々種類あるなぁ。。

個人的には右側の下向き三角がわかりやすく縦線で区切られてる方がいいので 中段くらいにあるセパレートタイプを使うことに。

ひとまず、ログインした後の部分で実装。

設定 Toggle Dropdown

ひとまず、こんな感じにしといて確認。スクリーンショット 2017-08-08 16.56.44.jpeg

ん?なんだこのコレジャナイ感。。

これはいかん。ダサすぎる。。 やっぱボタンにしたのがまずかったか・・。

これなら文字のままドロップダウンにした方が良さそうな気がする。。

ってことで違う方法を模索。

ひとしきりgoogleさんをこき使って探し回った結果 ようやく、文字でのドロップダウンのコードを見つける。

<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><%= current_user.email %> <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="dropdown-header">設定</li>   <li><a href="#">パスワード変更</a></li> <li role="separator" class="divider"></li> <li><%= link_to "ログアウト", destroy_user_session_path, method: :delete %></li> </ul> </li>

なんか適当なボーダーも付けれるようなので ついでにログアウトの上の部分にパスワードの編集ページへのリンクも付け足しといた。 (まだこの時点でページは作ってないのでトップに戻るだけっていう・・。)

dividerってのが区切りの意味らしく role="separator"の部分で『ここから切り離しなさいよ』ってことらしい。

ん〜やっぱり英語はようわからん。。

とりあえずこのコードに入れ替えて一旦確認してみる。スクリーンショット 2017-08-10 16.57.41.jpeg

修正したら物の見事に文字潰れるという どうしようもない状態・・。

まぁとりあえず、これでがっつり目立つことがなくなったので よしとしておこう。

この辺りのデザイン考えてくれる人ほしいわぁ。。

 

さて、次はどこいじろ・・。 作るところ多すぎるけどページ作ってリンクさせたら なんとか形にはなってくるかな。

よし、今回はここまでにしとこ。

 

ではー。

この記事をシェアする