CSS/Javascript-适用于较小屏幕的移动响应菜单
CSS / Javascript - Mobile responsive menu for smaller screens
我正在帮助一位朋友为他的网站设置响应菜单，根据一些初步研究，我们未能找到使用CSS3实现这一目标的方法，而且似乎只能通过javascript/jquery实现。我从未使用过这样的语言，我希望你能帮助我们实现这一点：
每当屏幕分辨率为1200px或更低时，我们都希望通过单击父菜单li来扩展子菜单。
下面是当前鼠标悬停时展开的有问题菜单的HTML和CSS。
HTML
<nav id="main_navbar_container" class="navbar navbar-default ">
<div class="container">
<div class="row">
<!-- Brand and expand button get grouped for better mobile display -->
<div id="main_logo_container" class="navbar-header">
<!--Main logo container-->
<div="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a id="brand_name_header" class="navbar-brand" href='http://localhost/wordpress/' title='test' rel='home'>
<div>
<img src='http://localhost/wordpress/wp-content/uploads/2015/10/2015.10.13-jbits.png'width="100px">
</div><!-- site-logo -->
</a>
</div>
<!--main logo container-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="menu_container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav id="primary_menu" class="nav navbar-nav">
<div class="menu-home-screen-menu-container">
<ul id="menu-home-screen-menu" class="menu">
<li id="menu-item-447" class="menu-item-447"><a href="http://localhost/wordpress/index.php/home-2/">Home</a>
</li>
<li id="menu-item-428" class="menu-item-428"><a href="http://localhost/wordpress/index.php/about-us/">About us</a>
</li>
<li id="menu-item-429" class="menu-item-429"><a href="http://localhost/wordpress/index.php/recommendations/">Recommendations</a>
</li>
<li id="menu-item-427" class="menu-item-427"><a href="http://localhost/wordpress/index.php/slogans/">Gallery</a>
</li>
<li id="menu-item-13" class="menu-item-13"><a>Services</a>
<ul class="sub-menu">
<li id="menu-item-421" class="menu-item-421"><a href="http://localhost/wordpress/index.php/evacuation-plans/">Evacuation Plans</a>
</li>
<li id="menu-item-425" class="menu-item-425"><a href="http://localhost/wordpress/index.php/risk-assessment/">Risk Assessment</a>
</li>
<li id="menu-item-417" class="menu-item-417"><a href="http://localhost/wordpress/index.php/fire-safety-advice/">Fire safety advice</a>
</li>
<li id="menu-item-424" class="menu-item-424"><a href="http://localhost/wordpress/index.php/risk-management/">Risk Management</a>
</li>
<li id="menu-item-423" class="menu-item-423"><a href="http://localhost/wordpress/index.php/fire-training/">Fire Training</a>
</li>
<li id="menu-item-422" class="menu-item-422"><a href="http://localhost/wordpress/index.php/fire-drills/">Fire Drills</a>
</li>
</ul>
</li>
<li id="menu-item-16" class="menu-item-16"><a>Products</a>
<ul class="sub-menu">
<li id="menu-item-430" class="menu-item-430"><a href="http://localhost/wordpress/index.php/fire-blankets/">Fire blankets</a>
</li>
<li id="menu-item-431" class="menu-item-431"><a href="http://localhost/wordpress/index.php/fire-extinguishers/">Fire extinguishers</a>
</li>
<li id="menu-item-432" class="menu-item-432"><a href="http://localhost/wordpress/index.php/fire-alarms/">Fire alarms</a>
</li>
</ul>
</li>
<li id="menu-item-426" class="menu-item-426"><a href="http://localhost/wordpress/index.php/faqs/">FAQs</a>
</li>
<li id="menu-item-420" class="menu-item-420"><a href="http://localhost/wordpress/index.php/contact-us/">Contact Us</a>
</li>
</ul>
</div>
</ul>
</div>
</div>
</div>
</div>
</nav>
CSS
#main_navbar_container{
margin-bottom:0;
background:white;
}
.navbar-collapse {
text-align:center;
}
#menu_container{
width:80%;
float:right;
display:block;
}
#primary_menu{
display:block;
float:left;
width:100%;
}
#primary_menu ul{
list-style: none;
margin: 0;
padding-left: 0;
}
#primary_menu a,
#primary_menu a:visited,
#primary_menu a:link{
color:#ea474b;
font-weight: 600;
display: block;
text-decoration: none;
padding: 15px 20px;
margin:auto;
}
#primary_menu a:hover{
color:#F9690E;
background: #f1f1f1;
}
#primary_menu li{
float:left;
position:relative;
margin:0
}
#primary_menu ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
border-radius: 0 0 4px 4px;
border-width:0 !important;
border: 1px solid #dadada;
background: #fff;
width:100%;
color: #8c9398;
position: absolute;
top: 3.5em;
max-height:0;
overflow-y: hidden;
}
#primary_menu ul li:hover ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
border-radius: 0 0 4px 4px;
border-width:0 !important;
border: 1px solid #dadada;
background: #fff;
width: 200px;
position:absolute;
padding:0;
margin:0;
max-height:400px;
left:-50px;
z-index:999;
transition: max-height 1s;
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
}
.sub-menu li{
width:100%;
}
#primary_menu ul li ul a{
color:#ea474b;
}
#primary_menu ul li ul li:hover a{
color:#F9690E;
background: #f1f1f1;
}
@media (max-width: 1200px){
#main_navbar_container .container, #menu_container { width: 100%;}
#menu_container .navbar-collapse { padding: 0;}
#primary_menu{
width:100%;
margin:0;
}
#primary_menu li{
width:100%;
margin:5px 0 0 0;
}
#primary_menu ul li ul {
border-radius: 0 !important;
border-color: transparent !important;
background-color:rgb(238,238,238);
display:block;
max-height:0;
-webkit-transition: all 0s;
transition: all 0s;
}
#primary_menu ul li:hover{
background:none;
}
#primary_menu ul li:hover a{
font-color:black;
/*'color:rgb(207,0,15);*/
}
#primary_menu ul li:hover ul{
display:block;
position:initial;
background-color:rgb(238,238,238);
width:100%;
padding:0;
margin:0;
max-height:400px;
transition:max-height 1s;
}
#primary_menu ul li:hover li:first-of-type{
border-top:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover li:last-of-type{
border-bottom:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover a:link,
#primary_menu ul li:hover a:visited{
color:#ea474b;
}
#menu-home-screen-menu{
margin-left:0;
}
}
费力地解释：http://jsfiddle.net/ee7zdtb4/
我们非常感谢您的帮助。
谨致问候，J
我们希望通过单击父菜单来扩展子菜单只要屏幕分辨率为1200px或更低
您需要使用媒体查询来检测屏幕大小，然后相应地更改CSS。
似乎只有通过javascript/jquery 才能实现
没有。一点也不。只需巧妙地将元素与相应的伪类和相邻的同级选择器混合，就可以很好地实现这一点提示：使用带有标签的隐藏复选框来控制同级元素。
这是一个小演示。它基于我的一个旧答案，更改为添加媒体查询，以便在屏幕大于768px时可以完全扩展手风琴式菜单（您可以将其调整为1200的用例）。它被折叠，然后由可点击的一级菜单项控制。没有Javascript，只有CSS。
在fiddle中，拖动并调整输出窗格的大小以查看它的动作。在片段中，单击全屏并返回以查看它的实际操作。使用此演示，然后将其用于您的确切用例。
演示Fiddle：http://jsfiddle.net/abhitalks/Lqpc2Len/
演示代码段：
* { box-sizing: border-box; padding: 0; margin: 0; }
body { font-family: sans-serif; font-size: 1em; }
div.accordion {
display: inline-block; vertical-align: top;
width: 240px; margin: 16px; border: 1px solid #ddd;
}
div.accordion label:last-of-type { border: none; }
input { display: none; }
input + label {
display: block; background-color: #eee;
padding: 8px; cursor: pointer; border-bottom: 1px solid #ddd;
font-family: 'segoe ui', sans-serif; font-weight: 300; transition: all 0.25s;
}
input + label:hover { background-color: #ddd; }
input + label::before {
content: '→';
display: inline-block; margin-right: 6px;
font-family: calibri, sans-serif; font-weight: 400; transition: all 0.5s;
}
div.content {
overflow: hidden; height: 0px; padding: 0px;
font-family: calibri, sans-serif; font-weight: 300;
background-color: rgba(250,250,250,0.6); transition: all 0.5s;
}
input:checked + label + div.content { height: 64px; padding: 6px; }
input:checked + label { background-color: #ddd; }
input:checked + label::before { font-weight: 600; transform: rotate(90deg); }
@media screen and (min-width: 768px) {
div.content { height: 64px; padding: 6px; }
input + label::before { font-weight: 600; transform: rotate(90deg); }
}<div class="accordion">
<input id="i12" name="handle2" type="checkbox" />
<label for="i12">One</label>
<div class="content">Lorem ipsum</div>
<input id="i22" name="handle2" type="checkbox" />
<label for="i22">Two</label>
<div class="content">Lorem ipsum</div>
<input id="i32" name="handle2" type="checkbox" />
<label for="i32">Three</label>
<div class="content">Lorem ipsum</div>
<input id="i42" name="handle2" type="checkbox" />
<label for="i42">Four</label>
<div class="content">Lorem ipsum</div>
</div>您可以通过css媒体查询实现响应能力方面的所有需求。如果指定max-width条件并描述指定宽度下所有必要的css类行为，则当前元素将有另一种不同分辨率的样式。例如，
.foo-class {
background-color: green
}
.foo-class:hover {
background-color:red;
color: white;
}
@media only screen and (max-width: 768px) {
.foo-class {
background-color: blue;
}
.foo-class:hover {
background-color: white;
color: green;
}
}
因此，在这种情况下，当您拥有实际宽度>768px的监视器/屏幕时，类为.foo-class的元素将具有绿色背景，悬停时将具有红色背景和白色文本颜色。如果你的屏幕宽度为768px或更小，那么这个元素将是蓝色背景，悬停时有白色背景和绿色文本。它不需要任何额外的javascript逻辑，非常简单。
此外，您还可以使用流行的ui框架引导程序。它非常简单，具有许多现代ui功能，并内置了响应式支持
相关文章：
- 我的响应菜单在移动版中不起作用
- 响应菜单问题-如何在移动环境中处理HREF和onclick事件
- 弹出框在移动设备上的响应方式
- 响应网页手风琴在移动
- 响应式设计适用于桌面浏览器、移动模拟器(Safari和Mozilla Firefox），但不适用于真正的智能手机(And
- 响应式视频简介适用于网络和移动设备的全屏
- 如何删除响应式移动设备的脚本
- 使用 bootstrap 3，您如何为移动设备而不是响应式导航栏提供完全不同的导航栏
- 如何为移动体验制作响应式图像
- 移动响应表单不起作用
- HTML 范围输入在尝试移动时无响应
- 如何修复移动响应式网站上的粘性滚动
- 如何从移动响应屏幕中删除悬停功能
- CSS/Javascript-适用于较小屏幕的移动响应菜单
- jQuery移动响应面板滑动打开/关闭解散
- 使网站移动响应，但重定向到其他网站
- Emberjs embercli foundation 5 scrolltop未定义移动响应
- 按钮和链接是否会增加移动响应度
- 移动响应式显示
- Mediaelements.js音频播放器需要修复移动响应大小
