Question

在响应式网站上，我想在较小的屏幕上显示垂直菜单，在较大的屏幕上显示水平菜单。目前，以下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>

Answer 1

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

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

将所有内容设置为样式以便在小屏幕上显示效果
使用媒体查询逐步设置更大的屏幕尺寸

以下是如何设置菜单样式以使其在小屏幕中垂直显示并在大屏幕中水平显示的基本代码。

 #include <iostream>
using namespace std;
 int main()
{
char a = 9.95;
char  b = 19.95;
char  c = 39.95;
char packagetype;

int  x=1, messageunits, Atotalcost, Btotalcost, Ctotalcost;

do
{
cout << "Which package do you choose(enter a, b, c,)" << endl;
cin >> a || b || c;
x++;
}
while(x < 2);       
{
cout << "how many message units(enter 1 - 672)" << endl;
cin >> messageunits;
x++;
}
while(x < 2);

Atotalcost = 995; // cost of package a, in cents
if(messageunits > 5){
Atotalcost += 100 * (messageunits - 5);
}

cout << "Your total cost is " << Atotalcost/100 << "." << Atotalcost%100 

Btotalcost = 1995;
if(messageunits > 15){
    Btotalcost += 50 * (messageunits - 15);


cout << "Your total cost is " << Btotalcost/100 << "." << Btotalcost%100 

Ctotalcost = 3995;
cout << "Your total cost is " << Ctotalcost/100 << "." << Ctotalcost%100 
 }

请参阅此jsFiddle以获取示例

Answer 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;
   }
}

Answer 3

您可以尝试以下代码段

HTML 只需在导航标记正上方添加span标记

即可

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

CSS

在初始菜单中，标签定义将显示更改为从内联块阻止，并将float设置为左。然后提出以下内容：

#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');
    });

});

我希望这会有所帮助

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

3 个答案: