ドロップダウンメニュー
デモ
CSSコードコピー
※ 当サイトのリセットCSSにはressを使用しています。
コピーする
使い方
ul要素を１つ用意し、class="cca-dropdown"を付与してください。
子要素の構成は直下にli要素、その子に第１のメニューボタンとなるp要素と第２のメニューボタンをまとめるul要素を並べてください。
第２のメニューボタンの構成は直下にli要素、その下にリンクのa要素を置いてください。
解説
横並びはdisplay: flex;で実現します。
第１のメニューを基準に第２のメニューの配置を決めるため、position: relative;を当てておきます。
境界線はメニューの間にのみ出すようにするため、li要素が続いている場合にのみ右側に境界線を表示しています。
第１のメニューのホバー時のスタイルを当てておきます。
cursor: pointer;でホバー時のカーソルをリンクと同様のものにしています。
:hoverという擬似要素でホバー時の背景色を少し明るいものに変更します。
第２のメニューの位置調整と、表示・非表示を実現していきます。
第１のメニューを基準にするためにposition: absolute;を指定します。
top: 100%;とすることで第１のメニューの下から表示されるようにします。
z-index: 1;は他の要素よりも全面に配置するための指定です。
表示・非表示は通常時を非表示に、:hoverという擬似要素でホバーした時に表示されるようにします。
第２のメニューにもスタイルを当てていきます。
white-space: nowrap;というスタイルは、横幅が第１のメニューに縛られないよう、改行を禁止して無理矢理横幅を伸ばすための指定です。
ヘルプ・コンタクト
機能に関するご質問は、このページの下部に表示されている Twitter
のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM
等でご連絡ください。