1

メニューを表示するページがあり、@media スクリーン コーディングを使用してレスポンシブ レイアウトを作成し、コーディングする方法を学ぼうとしています。

だから私は次のページをコーディングしました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Header Test</title>

<meta name="viewport" content="width=1024">

<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<link type="text/css" rel="stylesheet" href="font.css" />
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'> 
$(function(){
  $(window).resize(function(){
    if (window.innerWidth > 850) {
      $("#nav").removeClass('vertical');
    }
  });

  $("#menu").click(function(){
    $("#nav").toggleClass('vertical');
    return false;
  });
});

</script>
</head>

<body>
<div id="header">
  <div class="wrap">
    <div id="logo">
      <img src="http://www.real-creative.co.uk/new/img/logo-white.png">
    </div>

    <span id="menu"><img src="img/menu-icon.png" width="40" height="40" /></span>

    <div id="navWrap">
      <ul id="nav">
        <li><h1><a href="#">HOME</a></h1></li>
        <li><h1><a href="#">WORK</a></h1></li>
        <li><h1><a href="#">SERVICES</a></h1></li>
        <li><h1><a href="#">ABOUT</a></h1></li>
        <li><h1><a href="#">CONTACT</a></h1></li>
      </ul>
    </div>
  </div>
</div><!--header-->

</body>
</html>

私が達成しようとしているのは、ページの幅が 800 ピクセル未満になると、ナビゲーションをドロップダウンするボタンが表示されることです。希望の外観を示すために Photoshop で画像を作成しましたが、途中でリストをスタイルする方法がわかりません私は画像で示します。

誰でも私を助けてください。

現在のサイトの URL: http://www.real-creative.co.uk/new/

これが画像です。 http://www.real-creative.co.uk/new/viewport.png

誰かが私を助けることができれば感謝します。

4

1 に答える 1

1

これを行うには多くの方法があります。1 つの方法は、メディア クエリがアクティブなときに移動するように、div#navWrap に絶対配置を使用することです。

何かのようなもの...

#navWrap{position:absolute;top:0;left:500px;}

@media all and (max-width: 800px) {

    #navWrap{top:100px;}
    #navWrap ul#nav{border:1px solid #f00;border-radius:10px;width:100px;}
    #navWrap ul#nav li{display:block;border-radius:10px;margin:4px auto;}
}

コードペンの例 - http://codepen.io/lukeocom/pen/pGjco

それが役立つことを願っています...

于 2013-10-30T02:20:45.607 に答える