前提・実現したいこと
デバイスによってナビゲーションを変更したい
・PC、ipad → 幅100% ドロップダウン した時に、タイル状の画像を配置
・スマホ → 文字のみのドロップダウン メニューにしたい
###使用言語
Bootstrap4、html5、css3
###質問
スマホの時だけ、文字のみに切り替えるにはどうしたらいいでしょうか。
該当のソースコード
<nav id="menu-wrap" class="navbar navbar-expand-lg navbar-light bg-white text-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- ロゴ --> <a class="navbar-brand" href="index.html" data-aos="zoom-in"><img src="images/logo.svg" width="96" height="61"></a> <!-- ナビゲーション --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item m-2 dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">〇〇について</a> <div class="dropdown-menu p-5" aria-labelledby="navbarDropdown"> <h4 class="tit justify-content-center">〇〇について</h4> <div class="nav d-flex"> <ul class="mx-5"> <a href="#about" class="nav-link active"> <li class="nav-item">〇〇とは</li> <li class="nav-item mt-2"> <img src="images/gift_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> <ul class="mx-5"> <a href="#about_us" class="nav-link active"> <li class="nav-item">〇〇の特徴</li> <li class="nav-item mt-2"> <img src="images/systra_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> </div> </div> </li> <li class="nav-item m-2 dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> カリキュラム</a> <div class="dropdown-menu p-5" aria-labelledby="navbarDropdown"> <h4 class="tit justify-content-center">カリキュラム</h4> <div class="nav d-flex"> <ul class="mx-5"> <a href="#overview" class="nav-link active"> <li class="nav-item">概 要</li> <li class="nav-item mt-2"> <img src="images/overview_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> <ul class="mx-5"> <a href="#goal" class="nav-link active"> <li class="nav-item">目 標</li> <li class="nav-item mt-2"> <img src="images/goal_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> <ul class="mx-5"> <a href="#curriculum" class="nav-link active"> <li class="nav-item">科目内容</li> <li class="nav-item mt-2"> <img src="images/subjects_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> </div> </div> </li> <li class="nav-item m-2 dropdown"> <a class="nav-link dropdown-toggle active" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">募集要項</a> <div class="dropdown-menu p-5" aria-labelledby="navbarDropdown"> <h4 class="tit justify-content-center">募集要項</h4> <div class="nav d-flex"> <ul class="mx-5"> <a href="#subject" class="nav-link active"> <li class="nav-item">対象者</li> <li class="nav-item mt-2"> <img src="images/target_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> <ul class="mx-5"> <a href="#apply" class="nav-link active"> <li class="nav-item">申込方法</li> <li class="nav-item mt-2"> <img src="images/hellowa_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> </div> </div> </li> <li class="nav-item m-2"> <a class="nav-link text-dark" href="#Qa">よくあるご質問</a> </li> <li class="nav-item m-2"> <a class="nav-link text-dark" href="contact.html">お問い合わせ</a></li> </ul> </div> </nav>
css
1@media screen and (min-width: 768px) { 2 /* ナビゲーション */ 3 .nav { 4 margin-bottom: 0; 5 } 6 .dropdown { 7 position: static; 8 } 9 .dropdown-menu { 10 width: 100%; 11 text-align: left; 12 } 13 .dropdown-menu>li { 14 display: inline-block; 15 } 16}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/08 08:27
2019/07/08 08:33
2019/07/08 08:53
2019/07/08 08:58 編集