こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

luxbarの表示について2

luxbarについて再度お聞きしたいです。
.luxbar-navigation{
justify-content: flex-start;
}
でIE11でもうまく表示されましたが、どのブラウザもハンバーガーメニューにした時、階層下メニューは開いたままでした。これを閉じた状態から開くように修正できないのでしょうか?また、ナビバー時の背景色は任意で好みの色に変更できないでしょうか?よろしくお願いいたします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css">
<style>
<!--
.luxbar-navigation{
justify-content: flex-start;
}
-->
</style>
</head>
<body>
<div class="luxbar luxbar-static">
<input type="checkbox" id="luxbar-checkbox" class="luxbar-checkbox">
<div class="luxbar-menu luxbar-menu-right luxbar-menu-dark">
<ul class="luxbar-navigation">
<li class="luxbar-header">
<a class="luxbar-brand" href="#">Brand</a>
<label class="luxbar-hamburger luxbar-hamburger-doublespin"
for="luxbar-checkbox"> <span></span> </label>
</li>
<li class="luxbar-item active"><a href="#">Home</a></li>
<li class="luxbar-item dropdown"><a href="#">Users</a>
<ul>
<li class="luxbar-item" ><a href="#">Max</a></li>
<li class="luxbar-item" ><a href="#">Edgar</a></li>
<li class="luxbar-item" ><a href="#">John</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>

投稿日時 - 2019-06-02 00:19:54

QNo.9622213

すぐに回答ほしいです

質問者が選んだベストアンサー

ハンバーガーメニューにしたときにドロップダウンメニューが開いたままなのは元の仕様に則った正常な動作で、IE対応による弊害ではありません。
タッチデバイスではhoverの動作がPCと異なることが考慮されているのではないでしょうか。
無理やり対応させたいのであれば下記CSSを追記してください。タッチデバイスの場合はタップで開き、ほかの場所をタップすると閉じるような動作になります。

.dropdown>ul{
 display: none;
}

また、背景色や文字色は任意で好みの色に変更することが可能です。
詳細は下記CSSを参照してください。

/******* カスタムの色設定 *******/
.luxbar-menu-custom,
.luxbar-menu-custom .dropdown ul {
 background-color: #212121; /* 背景色 */
 color: #fff; /* 文字色 */
}
.luxbar-menu-custom .active,
.luxbar-menu-custom .luxbar-item:hover {
 background-color: #424242; /* アクティブなメニューとhover時の色 */
}
.luxbar-menu-custom .luxbar-hamburger span,
.luxbar-menu-custom .luxbar-hamburger span::before,
.luxbar-menu-custom .luxbar-hamburger span::after {
 background-color: #fff; /* ハンバーガーメニューの色 */
}

HTMLのclass属性にある"luxbar-menu-dark"を"luxbar-menu-custom"に置換すると上記CSSで指定した色にできます。

※OKWAVEの仕様上、コードのインデントを全角スペースで表示していますのでご注意ください。

投稿日時 - 2019-06-02 01:21:48

お礼

回答ありがとうございます。お陰様で改善できました。

投稿日時 - 2019-06-03 08:47:46

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問