-1

私は Twitter Bootstrap 3 を使用して、このサイトwww.peoplespropertyshop.co.ukを作成しています。大きな画面でのナビゲーションには、ボックスをドロップダウンする jquery 効果があることがわかります。

私の問題は、これが小さな画面でも発生していて、見栄えが悪いことでした。さまざまなナビゲーション セクションを作成し、メディア クエリを介してアニメーション化されたものを非表示にし、他のすべてのデバイスから他のナビゲーションを非表示にしました。

しかし、私の人生では、小さな画面ビューでアイコンをクリックするとアニメーションが表示されなくなり、リストも表示されない理由がわかりません。

<link href="css/styles.css" rel="stylesheet" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic|Cinzel' rel='stylesheet' type='text/css'>
    <link href="css/menu.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><img src="images/Logo.png" alt="People's Property Shop Logo"></a>
        </div>
        <!-- Small Screens Nav Bar -->
         <div class="navbar-collapse collapse hidden-sm hidden-md hidden-lg smallscreennav visible-xs">
          <ul class="nav nav-pills navbar-right hidden-xs">
            <li><a href="index.html">Home</a></li>
            <li><a href="whoweare.html">Who We Are</a></li>
            <li><a href="whatwedo.html">What We Do</a></li>
            <li><a href="whowehelp.html">Who We Help</a></li>
            <li><a href="news.html">News/Events</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->    
        <!-- Larger Screens Nav Bar -->
        <div class="navbar-collapse collapse">
          <ul class="nav nav-pills navbar-right hidden-xs">
            <li class="blue">
                <a href="index.html">Home</a>
                    <p class="subtext"><img src="images/Home_img.png" alt="home image" style="margin-top: -10%;"></p>
            </li>
            <li class="blue">
                <a href="whoweare.html">Who We Are</a>
                    <p class="subtext"><img src="images/whoweare_img.png" alt="who we are image" style="margin-top: -10%;"></p>
            </li>
            <li class="blue">
                <a href="whatwedo.html">What We Do</a>
                    <p class="subtext"><img src="images/whatwedo_img.png" alt="what we do image" style="margin-top: -8%;"></p>
            </li>
            <li class="blue">
                <a href="whowehelp.html">Who We Help</a>
                    <p class="subtext"><img src="images/whowehelp_img.png" alt="who we help image" style="margin-top: -10%;"></p>
            </li>
            <li class="blue">
                <a href="news.html">News/Events</a>
                    <p class="subtext"><img src="images/new_img.png" alt="news image" style="margin-top: -10%;"></p>
            </li>
            <li class="blue">
                <a href="contact.html">Contact</a>
                    <p class="subtext"><img src="images/contact_img.png" alt="contact image" style="margin-top: -8%;"></p>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
4

1 に答える 1

1

私の意見では、余分な div は必要ありません。メディアクエリで div を変更できます

#divMenu{
/* do something when it is normal */
max-width:1000px;
}

@media all and (min-width: 333px) and (max-width: 960px){
#divMenu{
 /* do something when it's too small */
max-width:800px;
}
}
于 2013-09-30T15:54:27.493 に答える