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

有很多方法可以做到这一点，一种方法是为您的 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 回答