上のキャプチャのように、常に画面下部に固定表示されるメニューバーの作り方を紹介します。

 

「MAIN MENU」「SUB MENU」の部分は横からスライドインするメニューボタンになります。

 

このスライドインメニューの実現は以下のページを参考にしてください。

 

 

フッター直前の位置にHTMLを記述する

先ずは、メニューバーを表示するHTMLを記述します。

 

記述の際、どの位置に記述をしても表示上問題はないのですが、
後から「どこに記述したっけ?」とならないためにも、

 

  • ページ上部に表示するものはコンテンツ上部に記述する
  • ページ下部に表示するものはページ下部に記述する

 

という癖をつけておきましょう。

 

HTML

 

CSSを記述する

ページ下部に常に固定表示するための設定をCSSに記述します。

 

CSS

 

 

おすすめの記事