Bootstrap3によるドロップダウンメニューをPHPで実装 | リンギルミュージック

音楽素材のジャンルのカテゴリー分けをBootstrap3を使ってPHPで実装しました。サイトを改装する際にBootstrap3から4に移行するか迷ったのですが、後者はIE9に対応していないので今回は見送りました。

PHP側の実装

ドロップダウンメニューのhtml要素です。下記のgetDropdownLink()li要素を取得します。

ドロップダウンメニューを構成するli要素の一覧を取得します。表示されるページと同じジャンルであればspan要素を、それ以外にはa要素を選択します。

BGMに関する情報のリストです。

上記3つのファイルをincludeしてドロップダウンメニューを表示させます。getPagination()については過去記事に記載しています。

CSS側の実装

既存のdropdownに関するCSSを上書きするコードです。BootstrapのCSSではa要素のみ記述されているので、span要素をそれに合わせて調整しています。

URL: ringil-music.com
使用言語: PHP 7.1.19
ライブラリ: Bootstrap 3・JQuery 1.12.4

コメントを残す

メールアドレスが公開されることはありません。