すたすた式
Blogger Vaster2
リスト内に出るようにしました。
元のデザインはこちら
【Vaster2】CSSでスマホの時のメニューバーを変更【jQueryなし】
jQueryを使わずにCSSのみでVaster2にトグルメニュー（アコーディオンメニュー）を設置しました。 スムーススクロールの部分はJavaScriptをつかっています。
追記：当初のものより少し HTML の構造を変更しました。また、メニューバーを上部に固定するとき用の CSS を追加しました。（コメントアウトしてあります）
<div class="cp_menu"> <div class="cp_menu-inner"> <div class="btn-content"> <label for="cp_menu_bar1"><span id="menu-btn"><i class="fas fa-bars" aria-hidden="true"></i> MENU</span></label> </div> <input type="checkbox" name="radio" id="cp_menu_bar1"/> <ul id="link1"> <li><a href="https://sutasutashiki.blogspot.com">ホーム</a></li> <li><a href="#Label1">カテゴリー</a></li> <li><a href="#PopularPosts1">よく読まれている記事</a></li> <li><a href="#related-posts-widget">関連記事</a></li> <li class="menu_li"> <script> <!-- ここにコードを貼り付け --> </li> </ul> </div> </div> <style> @media screen and (min-width:769px){/*PC時に非表示する要素*/ .cp_menu { display: none; }} @media screen and (max-width:770px){/*スマホ時に表示する要素*/ .cp_menu { /* margin: 52px auto; メニュー上部固定用 要数値調節 */ } .cp_menu-inner { max-width: 460px; margin: 0 auto; padding: 0; font-size: 1.2em; background: #1b2538; /* position: fixed; メニュー上部固定用 */ /* top: 0; メニュー上部固定用 */ /* z-index: 2; メニュー上部固定用 */ /* margin-left:0px; メニュー上部固定用 */ / *height: auto; メニュー上部固定用 */ } .btn-content { text-align: left;/* ボタン位置 */ } .cp_menu label { width: 25%; display: block; position: relative; margin: 0 0 2px 0; padding: 12px; line-height: 1.5; color: #ffffff; background: #1b2538; cursor: pointer; } #cp_menu_bar1 { /* チェックボックス非表示 */ display: none; } .cp_menu ul { margin: 0; padding: 0; background: #f4f4f4; list-style: none; } .cp_menu li { overflow-y: hidden; max-height: 0; transition: all 0.5s; padding: 0; line-height: 1.5em; } .cp_menu a { display: block; padding: 10px; text-decoration: none; color: #000000; line-height: 1.5; box-sizing: border-box; border-bottom: 1px solid rgba(78,78,78,0.3); } li.menu_li { line-height: 3; padding-left: 5px; } /*リストが増えたらULごとに追加してください*/ #cp_menu_bar1:checked ~ #link1 li { max-height: 3.0em; opacity: 1; }} </style>
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿