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

-1

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

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

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

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

 
@media screen and (max-width:980px) { 
 
#menu { 
 
\t 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>

来源

2015-06-15 sjhawar

添加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; 
    } 
}

来源

2015-06-15 20:32:40 alliuca

我只是说你的建议一致。有用！谢谢。现在，如何在较小的屏幕上显示/隐藏功能，以便占用这么多空间的垂直菜单隐藏起来？ – sjhawar

你可以使用输入复选框方法，如果你不必担心IE8（这种情况下，你需要应用js polyfill来处理：checked选择器）。我想你想要这样的：https://jsfiddle.net/yhcj9dsd/ – alliuca

请详细写下代码（jsfiddle.net/yhcj9dsd - allienato），这样我就可以试试。谢谢。 – sjhawar

当创建一个负责任的网站，主要的导航通常是因为经常需要垂直显示的项目中最棘手的（并在一个汉堡包下拉/飞出）在手机屏幕上，然后水平放在桌面屏幕上

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

款式应有尽有，使它看起来在小屏幕上好的
使用媒体查询，逐步风格更大的屏幕尺寸

下面是如何风格菜单，以便基本片段它在一个小屏幕上垂直显示，在大屏幕中水平显示。

/* 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

来源

2015-06-15 20:33:42 Jackson

你可以试试下面的代码片段

HTML 只需添加右侧的导航标签

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

CSS

以上的跨度标签

在最初的菜单中ag定义将显示从内嵌块更改为块并将浮点设置为左侧。然后把以下内容：

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

});

我希望这有助于

来源

2015-06-15 21:32:58 abm

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

回答

相关问题