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

解決済みの質問

luxbarの表示について3

Proof4さん回答ありがとうございます。お陰様で改善できました。
申し訳ないのですがあと数点教えてください。
1.luxbarの上部にヘッダー用のlogo画像等設置用のスペースの開けたいのですが可能でしょうか?試しに<br>でスペースを開けてみたのですが不可でした。もしもスペースが確保できた場合のスマホ用の大きさになった場合、ハンバーガーメニューは右上に表示しているのでしょうか?
2.配色を試しに#91D0CDで行ってみましたが色は変わりませんでした。
3.全てのメニューに多階層を設置したいのですが、メニュー一番初めの
 <li class="luxbar-item active"><a href="#">Home</a></li>を
 <li class="luxbar-item dropdown"><a href="#">Home</a></li>
にすると問題があるのでしょうか?
4.https://okwave.jp/qa/q9621783.htmlにFlexboxのレシポンシブCSSで困って質問しています。かなりお詳しそうなので是非教えて頂けないでしょうか?
初心者なものですから多数質問して申し訳ないのですが宜しくお願い致します。

<!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;
}
.dropdown >ul{
display: none;
}

/******* カスタムの色設定 *******/
.luxbar-menu-custom,
.luxbar-menu-custom .dropdown ul{
background-color: #91D0CD; /* 背景色 */
color: #fff; /* 文字色 */
}
.luxbar-menu-custom .active,
.luxbar-menu-custom .luxbar-item:hover{
background-color: #91D0CD; /* アクティブなメニューとhover時の色 */
}
.luxbar-menu-custom .luxbar-hamburger span,
.luxbar-menu-custom .luxbar-hamburger span::before,
.luxbar-menu-custom .luxbar-hamburger span::after {
background-color: #91D0CD; /* ハンバーガーメニューの色 */
}
-->
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<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 dropdown"><a href="#">Home</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>
<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>
<li class="luxbar-item dropdown"><a href="#">HomeHome</a>
<ul>
<li class="luxbar-item" ><a href="#">MaxMaxMax</a></li>
<li class="luxbar-item" ><a href="#">Edgar</a></li>
<li class="luxbar-item" ><a href="#">JohnMax</a></li>
</ul>
</li>
<li class="luxbar-item dropdown"><a href="#">HomeHomeHome</a>
<ul>
<li class="luxbar-item" ><a href="#">Max</a></li>
<li class="luxbar-item" ><a href="#">EdgarMax</a></li>
<li class="luxbar-item" ><a href="#">John</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

投稿日時 - 2019-06-03 08:28:15

QNo.9622576

すぐに回答ほしいです

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

1.タグの構造上はluxbarの内部になりますが、設置用のスペースを開けることは可能です。
ハンバーガーメニューをluxbar上ではなく、ロゴエリアの右上に表示させることも可能です。
※設置用スペースの実装にはIE11でサポートされていない機能(CSSの変数)を使用しているため、ponyfillをあてています。

2.https://okwave.jp/qa/q9622213/a26877489.htmlの末尾に記述したため見落とされてしまったかもしれませんが、class属性にある"luxbar-menu-dark"を"luxbar-menu-custom"に書き換える必要があります。
具体的には、
変更前:<div class="luxbar-menu luxbar-menu-right luxbar-menu-dark">
変更後:<div class="luxbar-menu luxbar-menu-right luxbar-menu-custom">
のように書き換えてください。

3.問題ありません。必要があればactiveとdropdownを両方指定することもできます。

4.また後で回答いたします。

主題とはそれますが、styleタグ内にHTMLのコメントアウト(<!-- ... -->)がありますが、これはCSSのコメントアウトとして効力を持ちません。
CSSのコメントアウトには/* ... */を用いるようにしましょう。

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

<!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>
  :root{
   --logo-height: 40px; /* logo画像スペースの高さ */
  }
  .luxbar-navigation{
   justify-content: flex-start;
  }
  .dropdown >ul{
   display: none;
  }
  /******* カスタムの色設定 *******/
  .luxbar-menu-custom,
  .luxbar-menu-custom .dropdown ul{
   background-color: #91D0CD; /* 背景色 */
   color: #fff; /* 文字色 */
  }
  .luxbar-menu-custom .active,
  .luxbar-menu-custom .luxbar-item:hover{
   background-color: #91D0CD; /* アクティブなメニューとhover時の色 */
  }
  .luxbar-menu-custom .luxbar-hamburger span,
  .luxbar-menu-custom .luxbar-hamburger span::before,
  .luxbar-menu-custom .luxbar-hamburger span::after {
   background-color: #000; /* ハンバーガーメニューの色 */
  }
  /* ロゴエリア */
  .logo-area{
   display: block;
   width: 100%;
   height: var(--logo-height);
   background: white;
   color: black;
  }
  .luxbar-menu {
   min-height: calc(58px + var(--logo-height));
  }
  .luxbar-navigation{
   flex-wrap: wrap;
  }
  /* ハンバーガーメニューをロゴエリア右上に表示 */
  .luxbar-hamburger {
   position: fixed;
   right: 0;
   top: calc((var(--logo-height) - 38px) / 2);
  }
 </style>
 <!-- IE11用ponyfill -->
 <script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>
 <script>cssVars({});</script>
 <!-- END IE11用ponyfill -->
</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-custom">
   <ul class="luxbar-navigation">
    <li class="logo-area">
     logo画像等設置用のスペース
    </li>
    <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 dropdown">
     <a href="#">Home</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>
</html>

投稿日時 - 2019-06-03 20:43:59

お礼

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

投稿日時 - 2019-06-03 23:07:59

ANo.1

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

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

回答(1)

あなたにオススメの質問