ホテルや結婚式場、リフォーム業者など、プランやカテゴリーの多いサイトを作る際にメニューをどう表示するか考えた場合、レスポンシブも構成しやすいmegamenu.jsをオススメします。
実装方法とサンプル
実装したものはこちらからご覧ください。
公式サイトからファイルをダウンロードしてください。
実装したいファイルにcssファイルとjsファイルを設定。ファイルパスの指定は各環境によって指定してください。jQueryの設定も忘れないでください。
メニューのカラーや大きさなどはcssで適宜調整してください。
<link rel="stylesheet" href="css/iziModal.min.css" type="text/css" />
<script src="megamenu.js"></script><nav>
<div class="menu-container">
<div class="menu">
<ul>
<li class="sp"><a href="tel:05011111111"><img id="sp-tel" src="assets/img/header/header_tel.png" alt="電話番号" /></a></li>
<li class="sp"><a href="inq.html"><img id="sp-inq" src="assets/img/header/header_inq_btn.png" alt="お問い合わせはこちらから" /></a></li>
<li><a href="about.html">私たちについて</a>
<ul>
<li><a href="about.html">イケダリフォームについて</a>
<ul>
<li><a href="about.html#overview">▷ 会社概要</a></li>
<li><a href="about.html#greeding">▷ 代表挨拶</a></li>
<li><a href="#">▷ お客様の声</a></li>
</ul>
</li>
<li><a href="selected.html">イケダが選ばれる理由</a>
<ul>
<li><a href="selected.html#put_yourself">▷ 寄り添う姿勢</a></li>
<li><a href="selected.html#sign_of_trust">▷ 任させる信頼の証し</a></li>
</ul>
</li>
<li>
<ul>
<li><img src="assets/img/nav/nav-img1.jpg" alt="nav-img1" /></li>
<li>本社外観</li>
</ul>
</li>
</ul>
</li>
<li><a href="list.html">施工事例</a>
<ul>
<li><a href="list.html">建て物別</a>
<ul>
<li><a href="list.html">マンション</a></li>
<li><a href="list.html">戸建</a></li>
<li><a href="list.html">店舗・その他</a></li>
</ul>
</li>
<li><a href="list.html">箇所別</a>
<ul>
<li><a href="list.html">キッチン</a></li>
<li><a href="list.html">風呂</a></li>
<li><a href="list.html">トイレ</a></li>
<li><a href="list.html">洗面所</a></li>
<li><a href="list.html">リビング</a></li>
<li><a href="list.html">洋室</a></li>
<li><a href="list.html">和室</a></li>
</ul>
</li>
<li><a style="border: unset;"> </a>
<ul>
<li><a href="list.html">玄関・ドア</a></li>
<li><a href="list.html">押入れ・クローゼット</a></li>
<li><a href="list.html">階段</a></li>
<li><a href="list.html">外観・屋根・外壁</a></li>
<li><a href="list.html">ベランダ・バルコニー</a></li>
<li><a href="list.html">その他</a></li>
</ul>
</li>
<li><a href="list.html">価格帯</a>
<ul>
<li><a href="list.html">〜300万</a></li>
<li><a href="list.html">300万〜500万</a></li>
<li><a href="list.html">500万〜1000万</a></li>
<li><a href="list.html">1000万〜</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="guide.html">リフォームガイド</a>
</li>
<li><a href="faq.html">よくあるご質問</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</div> <!-- end .menu -->
</div> <!-- end .menu-container -->
</nav>実装したものはこちらからご覧ください。
フッターにメニューを盛り盛り表示させてるのもありだと思うんですが、スマホサイトを考えると（私の場合）デザインに手間取ることもあるのですが、これを使えばレスポンシブに適したものもサクっと出来上がるのでおすすめします。
SATOWEBではホームページの新規制作、リニューアル、業務委託等、受付中です。
お問い合わせはこちらから受け付けていますので、お気軽にご相談ください。