Q&A
###前提・実現したいこと
ハンバーガーメニューをLuxbarを使って実装しようと思っているのですが、画面幅が狭くなったときメニューが開きっぱなしで開閉しないです。
参考サイト
現状
###該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>岩谷水産</title> 6 <link rel="stylesheet" type="text/css" href="css/normalize.css"> 7 <link rel="stylesheet" type="text/css" href="css/header.css"> 8 <link rel="stylesheet" type="text/css" href="css/footer.css"> 9 <link rel="stylesheet" type="text/css" href="css/style.css"> 10 <link rel="stylesheet" href="css/small.css" media="screen and (max-width:600px)"> 11 <link rel="stylesheet" href="css/medium.css" media="screen and (min-width:600px) and (max-width:1024px)"> 12 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 13 <link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css"> 14</head> 15<body id="top"> 16 17 <header id="luxbar" class="luxbar-fixed"> 18 <input type="checkbox" id="luxbar-checkbox"/> 19 <div class="luxbar-menu luxbar-menu-right luxbar-menu-material-cyan"> 20 <ul class="luxbar-navigation"> 21 <li class="luxbar-header"> 22 <a href="#" class="luxbar-brand">ロゴ</a> 23 <label class="luxbar-hamburger luxbar-hamburger-doublespin" 24 id="luxbar-hamburger" for="luxbar-checkbox"> <span></span> </label> 25 </li> 26 <li class="luxbar-item"><a href="#">アイテム 1</a></li> 27 <li class="luxbar-item"><a href="#">アイテム 2</a></li> 28 <li class="luxbar-item"><a href="#">アイテム 3</a></li> 29 <li class="luxbar-item"><a href="#">アイテム 4</a></li> 30 </ul> 31 </div> 32 </header>
回答1件
0
ベストアンサー
バージョンが変わったのか、書き方が変わっています。
HTML
1<!-- 2<input type="checkbox" id="luxbar-checkbox"/> 3 ↓ --> 4<input type="checkbox" class="luxbar-checkbox" id="luxbar-checkbox"/>
【Luxbar Demo】
https://balzss.github.io/luxbar/
投稿2017/12/13 02:21
総合スコア69398
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/13 02:24