質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

638閲覧

"css" ハンバーガーメニューの閉じるボタンの表示方法

3-plaisir

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/06/04 02:26

<!-- ヘッダーナビ --> <header id="headNav"> <ul> <li ><a href="https://item.rakuten.co.jp/" target="_top"><img src="https://shop.r10s.jp/antelp/cabinet/banner1/enjoyhome-616.jpg" alt="画像"></a></li> </ul> <ul> <li class="drawer-toggle-left"> <i class="fa fa-bars" aria-hidden="true" style="font-size:20px"></i> </li> <!-- <li class="drawer-toggle-left1"> <i class="fa fa-circle-thin" aria-hidden="true" style="font-size:20px"></i> </li> --> <li class="headNav_cart"> <h1 class="font-alt"><a href="index_sp.html" target="_top" onclick="ga('send', 'event', ' sp_header_b', 'click', 'logo');"><img src="sp/3a/sp/shop/img/logo.png" alt="and Me..."></a></h1> </li> <li class="drawer-toggle-right"> <a href="https://sp.basket.step.rakuten.co.jp/rms/mall/bss/cartall/"> <i class="fa fa-shopping-cart" aria-hidden="true" style="font-size:20px"></i> </a> </li> </ul> </header> <!-- ドロワーナビゲーション --> <nav class="drawer-nav" role="navigation"> <div id="close_button"><a href="#headNav" onclick="jQuery.sidr('close','sidr-left');"><div class="icon-close"></div></a></div> <div class="drawer-nav_wrapper"> <div id="sidr">

.
.
.

.icon-close {
position: relative;
width: 24px; /* ボタンのサイズ /
height: 24px; /
ボタンのサイズ /
-webkit-appearance: none;
border-radius: 0;
}
.icon-close::before,
.icon-close::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 50% -15% auto 115%;
width: 100%;
height: 2px; /
線の太さ /
background: #fff; /
線の色 */
z-index: 99999999;
-webkit-appearance: none;
border-radius: 0;
}
.icon-close::before {
transform: rotate(45deg);
-webkit-appearance: none;
border-radius: 0;
}
.icon-close::after {
transform: rotate(-45deg);
-webkit-appearance: none;
border-radius: 0;
}

ハンバーガーメニューを開いた際に閉じるボタンがiPhone6だと表示されません。
表示する方法を教えていただきたいです。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/06/04 02:30

コードはマークダウンのcode機能にてご提示ください。質問は編集できます。 また、コードが半端だとこちらの手元で再現確認できません。再現確認できないと答えようがないときも多いです。ご配慮願います。
3-plaisir

2021/06/04 02:35

コードはマークダウンのcode機能にてご提示ください。の方法はわかりません。
m.ts10806

2021/06/04 02:38

ヘルプページなり過去質問なり調べてください。
Lhankor_Mhy

2021/06/04 03:06

jQuery.sidr() は標準のメソッドではないように思うのですが、なにかライブラリを使っていますか? また、ga はアナリティクスでしょうか? この辺りは気にしなくて大丈夫なやつですよね?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問