响应式菜单：在较小的屏幕上垂直但在较大的屏幕上水平答案

【问题标题】：Responsive menu: vertical on smaller but horizontal on larger screen响应式菜单：在较小的屏幕上垂直但在较大的屏幕上水平
【发布时间】：2015-06-15 20:21:55
【问题描述】：

在响应式网站上，我想在小屏幕上显示垂直菜单，在大屏幕上显示水平菜单。目前，以下 HTML 和 CSS 代码不会在较小的屏幕上显示垂直菜单。任何人都可以修改/改进此代码吗？提前致谢。

#menu {
	width: 100%;
	min-height: 40px;
	position: relative;
	background-color: rgb(52, 85, 154); 
}
#menu a {
	display: inline-block;
	padding: 10px 4% 0px 4%;
	font: 400 16px/32px 'Courier', sans-serif;
	min-height: 40px;
	color:white;
	text-decoration: none;
	font-weight:bold;
	transition: .5s;  
}
#menu a:hover {
	color: red;
	background-color: blue;
}

@media screen and (max-width:640px) {
#menu {
	max-width: 100%;
}
}

@media screen and (max-width:775px) {
#menu a {
	max-width: 100%;
	padding: 0px 5px 0px 5px;
	float: none;
	text-align: center;
}
}

@media screen and (max-width:980px) {
#menu {
	max-width: 100%;
}
}

<body>
<nav id="menu"> <a href="index.html">Home</a> <a href="aboutus.html">About</a> <a href="services.html">Services</a> <a href="http://srjtax.blogspot.com/" rel="external" target="_blank">Blog</a> <a href="taxlinks.html">Links</a> <a href="faq.html">FAQ</a> <a href="contact.html">Contact</a> 
</nav>
</body>

【问题讨论】：

标签： css html menu

【解决方案1】：

在创建响应式网站时，主导航通常是最棘手的，因为通常需要在移动屏幕上垂直（以及在汉堡下拉/弹出窗口中）显示项目，然后在桌面屏幕上水平显示

第一步是使用移动优先的方法进行开发。这意味着：

为所有内容设置样式，使其在小屏幕上看起来不错
使用媒体查询逐步设置更大的屏幕尺寸

这里是关于如何设置菜单样式的基本 sn-p，以便它在小屏幕中垂直显示并在大屏幕中水平显示。

/* Mobile style first */
.menu {
    text-align: center;
}
.menu a {
    display: block;
    padding: 10px;
}
.menu a:hover {
    background-color: #eee;
}

/* Desktop style after */
@media (min-width: 600px) {
    .menu a {
        display: inline-block;
    }
}

请参阅此jsFiddle 以获取示例

【讨论】：

【解决方案2】：

在此处添加display: block; 声明：

@media screen and (max-width:775px) {
   #menu a {
       max-width: 100%;
       padding: 0px 5px 0px 5px;
       float: none;
       text-align: center;
       display: block;
   }
}

【讨论】：

我刚刚添加了您建议的行。有用！谢谢。现在如何在较小的屏幕上显示/隐藏功能，以便隐藏占用这么多空间的垂直菜单？
如果您不必担心 IE8，您可以使用输入复选框方法（这种情况下您需要应用 js polyfill 来处理 :checked 选择器）。我猜你想要这样的东西：jsfiddle.net/yhcj9dsd
请详细写下代码（jsfiddle.net/yhcj9dsd – allienato），我可以试试。谢谢。
不好意思，你可以扫描我提供的jsfiddle上的代码。这超出了我已经回答的主要问题的范围
当我点击“jsfiddle.net/yhcj9dsd”时，我找到了代码。菜单是隐藏/取消隐藏菜单元素的切换。非常感谢您的帮助。

【解决方案3】：

你可以试试下面的代码sn-ps

HTML 只需在导航标签正上方添加一个跨度标签

<span id='trigger'> Menu </span>

CSS

在初始菜单中，标签定义将显示从 inline-block 更改为 block，并将 float 设置为 left。然后输入以下内容：

#trigger {
display: none;
}

@media screen and (max-width: 560px /* just as an example*/) {
#trigger {
    display: block;
}

#menu {
    display: none;
}

div.expand {
    display: block;
}

#menu a {
    float: none;
    border-bottom: 1px solid;
}
}

Javascript

jQuery("#trigger").click(function() {

    jQuery("#menu").slideToggle(500, function() {
        jQuery(this).toggleClass("expand").css('display','500');
    });

});

希望对你有帮助

【讨论】：