Question

我有一个显示菜单的页面，我试图制作并学习使用@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中制作了一个图像，以显示我想要的外观，但我不确定如何设置样式列表我在图像中显示的方式。

任何人都可以帮助我。

当前网站的网址是： http://www.real-creative.co.uk/new/

这是图像; http://www.real-creative.co.uk/new/viewport.png

感谢任何人都可以帮助我。

Answer 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

希望有所帮助...

<ul>的Css样式，带下拉</ul>

1 个答案: