2016-05-26 6 views
0

ウィンドウのサイズを変更しようとするたびに、navbarが反応しないようです。代わりに、コンポーネントは次の行に移動します。サイズを変更したときにすべてのコンテンツに対応できるように、Navbarのサイズが大きくなるようにするにはどうすればよいですか?navbar/buttonsが反応しないようにする

例:https://jsfiddle.net/pv860zh0/ 'ライダーアラート'と '翻訳 - 英語'ボタンは次の行に移動します。さらにサイズを変更すると、他のカテゴリも次の行に移動します。

<li><a class="dropdown-button" href="#!" data-activates="ridingdd">Riding TheBus<i class="material-icons right"></i></a></li> 
    <li><a class="dropdown-button" href="#!" data-activates="programsdd">Programs<i class="material-icons right"></i></a></li> 
    <li><a class="dropdown-button" href="#!" data-activates="csdd">Customer Service<i class="material-icons right"></i></a></li> 
    <li><a class="dropdown-button" href="#!" data-activates="visitorsdd">Visitors<i class="material-icons right"></i></a></li> 
    <li><a class="dropdown-button" href="#!" data-activates="aboutdd">About<i class="material-icons right"></i></a></li> 
    <li> <a class='dropdown-button btn red darken-3' href='#' data-activates='radd'>Rider Alerts</a></li> 
    <li> <a class='dropdown-button btn blue darken-3' href='#' data-activates='tdd'>Translate - English</a></li> 

ボタンからのものかもしれませんか?もしそうなら、私はどのようにそれらのボタンを反応させるでしょうか?マテリアライズdocumentationで述べたように

答えて

1

:また

<nav> 
    <div class="nav-wrapper"> 
    <a href="#!" class="brand-logo">Logo</a> 
    <a href="#" data-activates="mobile-demo" class="button-collapse"> 
     <i class="material-icons">menu</i> 
    </a> 
    <ul class="right hide-on-med-and-down"> 
     <li><a href="sass.html">Sass</a></li> 
     <li><a href="badges.html">Components</a></li> 
     <li><a href="collapsible.html">Javascript</a></li> 
     <li><a href="mobile.html">Mobile</a></li> 
    </ul> 
    <ul class="side-nav" id="mobile-demo"> 
     <li><a href="sass.html">Sass</a></li> 
     <li><a href="badges.html">Components</a></li> 
     <li><a href="collapsible.html">Javascript</a></li> 
     <li><a href="mobile.html">Mobile</a></li> 
    </ul> 
    </div> 
</nav> 

、あなたのjqueryのでdocument.ready()を含める:

$(".button-collapse").sideNav(); 

これは中規模の画面と大きなに関する定期的なメニューとナビゲーションバーを作成し、崩壊します小さな画面のメニュー

+0

返信いただきありがとうございます。このメソッドは、ページをサイズ変更するたびにボタンが他のdivにオーバーラップしているように見える以外は機能しません。たとえば、次のようになります。 この部分の修正方法はわかりますか? – DarkTakua

+0

htmlを投稿できますか? –

+0

https://jsfiddle.net/x45k56hk/ – DarkTakua

関連する問題