是否可以让我的固定菜单响应？答案

【问题标题】：Is it possible to make my fixed menu responsive?是否可以让我的固定菜单响应？
【发布时间】：2014-12-24 06:52:17
【问题描述】：

我一直在尝试使我的菜单具有响应性。 www.treytrumble.com
似乎因为它是固定的，所以在比笔记本电脑更小的设备上查看时，它不会正确缩放。当屏幕缩放到小于 1,150 像素宽时，我该怎么做才能使菜单看起来像这样？ http://www.adtile.me

HTML

<div class="contactcontainer">
<div class="contactmenu">Trey Trumble<br /><br/>804-513-7704 <br/><br/>
<a href="mailto:trey@treytrumble.com" class="font5">trey@treytrumble.com</a><br/><br/><a      
href="images/Trey Trumble Resume.pdf" class="font5">Resume</a>
</div><!-- end .contactmenu -->

</div><!-- end .contactcontainer -->
<div class="container">

<div class="sidebar1">
<table width="120" height="104" border="0">
<tr>
<th scope="col"></th>
</tr>
</table>
<ul class="nav">
  <li><img src="images/logo.jpg" width="180"/></li>
  <li><a id="webbutton" class="nav">WEB DESIGN</a></li>
  <li><a id="printbutton" class="nav">PRINT DESIGN</a></li>
  <li><a span class="contactbutton">CONTACT &amp; RESUME</span></a></li></ul>
</div><!-- end .sidebar1 -->

CSS

.content ul, .content ol { 
padding: 0 15px 15px 40px;
}


ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px; 
position:fixed;
}
ul.nav li {
border-bottom: 1px solid #666;
letter-spacing: 2px;
font-family: "Helvetica", Arial, sans-serif;
cursor: pointer;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background: #fff;
inline-box-align:initial;
color:#F60;

}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background:#F60;
color: #FFF;
font-family: "Helvetica", Arial, sans-serif;
letter-spacing: 2px;
font-size: 9px;
}

【问题讨论】：

为什么只有菜单？该网站没有响应，没有元视口标签，使用的是旧的 jQuery，没有使用 html5，等等。如果您在移动设备上查看它会很好看，并且用户可以捏缩放。

标签： html css menu responsive-design fixed

【解决方案1】：

这很容易实现，但很难解释。您必须使用媒体查询来完成此操作，甚至可能是 JavaScript。

媒体查询

Chris Coyier 在 CSS-TRICKS 中有一篇非常有趣的文章，在这里解释了响应式菜单的各种概念：http://css-tricks.com/responsive-menu-concepts/

至于主要问题，您绝对可以使该菜单响应式，不过，我不建议您将与台式机完全相同的布局用于移动设备，因为那会是个问题由于屏幕太小，我建议让它像普通菜单一样一直到顶部，响应式，您也可以将其修复到顶部并将padding-top添加到其余元素，这样它们就不会' t 到菜单下方。

如果您决定菜单应始终位于顶部，请确保将 z-index 属性添加到 nav 或 div 元素，这样其他人也不会越过它。

弹性盒

您也可以采用另一种方法，但取决于您为某些浏览器提供的支持，我建议或不使用 Flexbox。如果您将导航显示为display: flex 并明智地调整它的 CSS，您可以获得漂亮的组合，但请记住，这是一个稍微新的 CSS3 属性，主要是 Internet Explorer 最近才开始支持它。

更多关于 Flexbox 的信息可以在这里找到：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

响应式设计

如果您是响应式/自适应设计的新手，那么先生，您还有很多工作要做，但幸运的是，今天有大量免费和/或付费资源可以为您提供一个很好的想法做什么。

我发现这篇关于 Team Tree House 的文章非常有用：http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

您可以从那里继续寻找其他资源，其中一些在此答案中提到：

媒体查询
弹性盒

其他提示

如果您想让您的菜单具有响应性，您还需要使您的网站具有响应性，请确保您拥有所有这些：

响应式视口标签
HTML5 文档类型
计划（网格系统、媒体查询、弹性盒等）
不支持的内容的回退

【讨论】：

【解决方案2】：

当然可以，

使用媒体查询来选择您希望它捕捉到的分辨率。

在查询中定义您的类并将其应用到菜单中。

【讨论】：