1. ホーム
  2. 質問と答え
  3. .btn-groupハンバーガーメニューの問題と混乱

.btn-groupハンバーガーメニューの問題と混乱

2017-04-26 12 views
0

私はレスポンシブウェブサイトを作成しています。私は1340px未満のハンバーガーメニューに変わる反応的なナビゲーションを作成しようとしています。私は今すぐ分割ボタンの設定を使用している、https://jsfiddle.net/ethacker/u38scspb/を参照してください、それは実際にはうまくいきません、それはスクロール可能なものに変わります。私は1340px以下のスクリーンでこのようなものを見たいと思っています。.btn-groupハンバーガーメニューの問題と混乱

​​

私は、ナビゲーションバーのクラスを（https://jsfiddle.net/ethacker/d306gphq/1/を参照）を追加しようとしています。私がこれをすると、navbarハンバーガーのアイコンはもう表示されません。

私の質問は次のとおりです。
1.ハンバーガーメニューのアイコンを表示するにはどうすればよいですか？
2.私はこれを正しい方法でやっていますか、それとも簡単な方法がありますか？
3. 1340ピクセル以下のモバイルデバイスでは、上記の画像のように見えるようにするにはどうすればよいですか？
4.ハンバーガーボタンを携帯電話の代わりに1340px未満でトリガーするにはどうすればよいですか？

私は学ぶことをしようとしているが、私はに向かうためにどの方向だけではわからない

私のCSSコード：

body { 
    background-image: url('backgroundarrows.png'); 
} 
body > div.container-fluid > header { 
    background-color: #e9e7ff; 
    margin-top: 0; 
    text-align: center; 
} 
.inline-display { 
    display: inline; 
} 

.float-right { 
    float: right; 
} 

#logo { 
    height: 90px; 
    width: 170px; 
} 

#search { 
    margin-right: 1%; 
} 

.container-fluid { 
    padding: 0; 
} 

.content { 
    padding: 1%; 
    background-color: #f9fdff; 
    border: solid thin lightgray; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    margin: 0 1%; 
} 

section.content { 
    width: 60%; 
} 

aside.content { 
    width: 30%; 
    text-align: center; 
} 

.btn { 
    color: rgb(181,181,225); 
} 

#my-btn-group{ 
    margin-left: 1%; 
} 

.mybtngroup { 
    border-right: solid thin rgb(181,181,225); 
    border-left: solid thin rgb(181,181,225); 
} 

.mybtngroup > a.btn.divider { 
    border-right: solid thin rgb(181,181,225); 
} 

.heading, div.quip{ 
    font-family: "Monotype Corsiva", cursive; 
    text-align: center; 
} 
div.quip, aside > h2.heading{ 
    border-bottom: thin solid grey; 
} 

div.quip { 
    font-size: 16px; 
} 
a{ 
    color: rgb(165, 165, 205); 
    text-decoration: none; 
} 

#blogposts { 
    margin-top: -5%; 
}

マイHTML：

<div class="container-fluid"> 
<header class="page-header"> 
    <!-- logo --> 
    <h1 class="inline-display"><a href="index.php"><img id="logo" src="mommyinfologo.png"/></a></h1> 
    <br/> 
    <div class="btn-group" id="my-btn-group"> 
     <!-- Home Group --> 
     <div class="btn-group mybtngroup"> 
      <a class="btn" href="index.php">Home</a> 
      <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
      </a> 
      <ul class="dropdown-menu mylist"> 
       <li><a href="/mommy-madness">This Mommy's Madness</a></li> 
       <li><a href="/about">About Mommy Info</a></li> 
       <li><a href="/contact">Contact Mommy Info</a></li> 
      </ul> 
     </div> 
     <!-- Pregnancy group--> 
     <div class="btn-group mybtngroup"> 
      <a class="btn" href="/pregnancy">Pregnancy</a> 
      <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
      </a> 
      <ul class="dropdown-menu mylist"> 
       <li><a href="/pregnancy/trying-to-conceive">Trying to Conceive</a></li> 
       <li><a href="/pregnancy/fetal-development">Fetal Development</a></li> 
       <li><a href="/pregnancy/gender-predictions">Gender Predictions</a></li> 
       <li><a href="/pregnancy/labor-and-delivery">Labor and Delivery</a></li> 
      </ul> 
     </div> 
     <!-- All About Baby group--> 
     <div class="btn-group mybtngroup"> 
      <a class="btn" href="/all-about-baby">All About Baby</a> 
      <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
      </a> 
      <ul class="dropdown-menu mylist"> 
       <li><a href="/all-about-baby/advice">Advice</a></li> 
       <li><a href="/all-about-baby/guidelines">Guidelines</a></li> 
       <li><a href="/all-about-baby/milestones">Milestones</a></li> 
       <li><a href="/all-about-baby/learning-development">Learning Development</a></li> 
      </ul> 
     </div> 
     <!-- Health and Nutrition group--> 
     <div class="btn-group mybtngroup"> 
      <a class="btn" href="/health-and-nutrition">Health and Nutrition</a> 
      <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
      </a> 
      <ul class="dropdown-menu mylist"> 
       <li><a href="/health-and-nutrition/pregnancy-nutrition">Pregnancy Nutrition</a></li> 
       <li><a href="/health-and-nutrition/breastfeeding">Breastfeeding</a></li> 
       <li><a href="/health-and-nutrition/formula-feeding">Formula Feeding</a></li> 
       <li><a href="/health-and-nutrition/toddler-nutrition">Toddler Nutrition</a></li> 
       <li><a href="/health-and-nutrition/prenatal-exercise">Prenatal Exercise</a></li> 
       <li><a href="/health-and-nutrition/postpartum-exercise">Postpartum Exercise</a></li> 
       <li><a href="/health-and-nutrition/organic-diy-health">Organic DIY Health</a></li> 
      </ul> 
     </div> 
     <!-- Party Momma group--> 
     <div class="btn-group mybtngroup"> 
      <a class="btn" href="/party-momma">Party Momma</a> 
      <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
      </a> 
      <ul class="dropdown-menu mylist"> 
       <li><a href="/party-momma/pregnancy-announcement">Pregnancy Announcement</a></li> 
       <li><a href="/party-momma/gender-reveal">Gender Reveal</a></li> 
       <li><a href="/party-momma/baby-shower">Baby Shower</a></li> 
       <li><a href="/party-momma/birth-announcement">Birth Announcement</a></li> 
       <li><a href="/party-momma/birthdays">Birthdays</a></li> 
      </ul> 
     </div> 
     <!-- Stations group--> 
     <div class="btn-group mybtngroup"> 
      <a class="btn" href="/stations">Stations</a> 
      <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
      </a> 
      <ul class="dropdown-menu mylist"> 
       <li><a href="/stations/hospital-bag">Hospital Bag</a></li> 
       <li><a href="/stations/diaper-bag">Diaper Bag</a></li> 
       <li><a href="/stations/changing-station">Changing Station</a></li> 
       <li><a href="/stations/baby-gear">Baby Gear</a></li> 
      </ul> 
     </div> 
     <!-- Memory Markers group--> 
     <div class="btn-group mybtngroup"> 
      <a class="btn" href="/memory-markers">Memory Markers</a> 
      <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
      </a> 
      <ul class="dropdown-menu mylist"> 
       <li><a href="/memory-markers/diy">Do It Yourself</a></li> 
       <li><a href="/memory-markers/buy-it">Buy It</a></li> 
      </ul> 
     </div> 
     <!-- Reviews group--> 
     <div class="btn-group mybtngroup"> 
      <a class="btn mycaret" href="/reviews">Reviews</a> 
      <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
      </a> 
      <ul class="dropdown-menu mylist"> 
       <li><a href="reviews/games">Game Reviews</a></li> 
       <li><a href="reviews/gear">Gear Reviews</a></li> 
       <li><a href="reviews/learning">Learning Reviews</a></li> 
      </ul> 
     </div> 
     <!-- Blog--> 
     <a class="btn mybtngroup" id="blog" href="/mommy-madness"> 
      Blog 
     </a> 
    </div> <!-- closing div#btn-group-justified --> 
    <input class="float-right" type="text" name="search" id="search" placeholder="Search"/>

出典

2017-04-26 ethacker

答えて

0

これをブートストラップのコードで、タブレットや携帯電話を使用しているときにナビゲーションバーが崩壊します。あなたがより多くのここでそれについて読むことができます

<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
    <li><a href="#">Link</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">One more separated link</a></li> 
     </ul> 
    </li> 
    </ul>

は：http://getbootstrap.com/components/#navbar

あなたは、特定の画面幅に変更する要素のためのあなたのmain.cssへ@mediaクエリセレクタを含める必要があります。例：

@media (min-width: 768px) { 
    p { color: red; } 
    }

出典

2017-04-26 21:53:25

関連する問題

 関連する問題