CSS/Javascript-适用于较小屏幕的移动响应菜单

我正在帮助一位朋友为他的网站设置一个响应菜单，从一些初步研究中，我们没有找到用CSS3实现这一点的方法，而且似乎只有通过javascript/jquery才能实现。由于从未使用过此类语言，我希望您能帮助我们实现这一目标：

我们希望在屏幕分辨率为1200px或更低时，通过单击其父菜单来扩展子菜单

下面是有关菜单的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>

用小提琴来解释：

非常感谢您的帮助

问候,，

---

J

通过css媒体查询，您可以满足所有的响应需求。如果指定

max width

条件并描述指定宽度下所有必要的css类行为，则当前元素将有另一个不同分辨率的样式。比如说,

.foo类{
背景颜色：绿色
}

.foo类：悬停{
背景色：红色；
颜色：白色；
}

@仅媒体屏幕和（最大宽度：768px）{
.foo类{
背景颜色：蓝色；
}
.foo类：悬停{
背景色：白色；
颜色：绿色；
}
}

因此，在这种情况下，如果监视器/屏幕的实际宽度>768px，则class

。foo class

将具有绿色背景，悬停时将具有红色背景和白色文本颜色。如果您的屏幕宽度为768px或更小，则此元素将为蓝色背景，并在悬停操作时具有白色背景和绿色文本颜色。它不需要任何额外的javascript逻辑，非常简单

您还可以使用流行的ui框架。它非常简单，具有许多现代ui功能，并内置了响应性支持

我们希望通过单击子菜单的父菜单使其展开 当屏幕分辨率为1200px或更低时

您需要使用媒体查询来检测屏幕大小，然后相应地更改CSS

似乎只有通过javascript/jquery才能实现

不，一点也不。您只需将元素与相应的伪类和相邻的同级选择器巧妙地结合起来，就可以很好地做到这一点。提示：使用带标签的隐藏复选框来控制同级元素

这里是一个小演示。它基于我的一个旧答案，更改为添加媒体查询，以允许在屏幕大于

768px

时完全扩展手风琴式菜单（您可以将其调整为1200）。它被折叠，然后由可单击的第一级菜单项控制。没有Javascript，只有CSS

在fiddle中，拖动输出窗格并调整其大小，以查看其实际操作。在代码段中，单击全屏并返回以查看其实际操作。使用此演示，然后将其用于您的确切用例

演示小提琴：

演示片段：

*{框大小：边框框；填充：0；边距：0；}
正文{字体系列：无衬线；字体大小：1em；}
手风琴{
显示：内联块；垂直对齐：顶部；
宽度：240px；边距：16px；边框：1px实心#ddd；
}
div.accordion标签：类型{border:none；}的最后一个
输入{显示：无；}
输入+标签{
显示：块；背景色：#eee；
填充：8px；光标：指针；边框底部：1px实心#ddd；
字体系列：“segoe ui”，无衬线；字体重量：300；过渡：全部0.25秒；
}
输入+标签：悬停{背景色：#ddd；}
输入+标签：：在{
内容:'→'; 
显示：内联块；右边距：6px；
字体系列：calibri，无衬线；字体重量：400；过渡：全部0.5s；
}
部门内容{
溢出：隐藏；高度：0px；填充：0px；
字体系列：calibri，无衬线；字体重量：300；
背景色：rgba（250250,0.6）；过渡色：全部0.5s；
}
输入：checked+label+div.content{height:64px；padding:6px；}
输入：选中+标签{背景色：#ddd；}
输入：选中+标签：：在{font-weight:600；transform:rotate（90度）；}
@媒体屏幕和屏幕（最小宽度：768px）{
div.content{高度：64px；填充：6px；}
输入+标签：：在{字体重量：600；变换：旋转（90度）；}之前
}

一个
乱数假文
两个
乱数假文
三
乱数假文
四
乱数假文

谢谢您的回复。我尝试过使用媒体，但是使用css，我只实现了悬停动作，而不是点击事件。是否可以使用Css实现单击时展开/折叠？是的，使用Css转换。我认为你的项目确实需要一个引导。不要发明自行车——它已经发明了：）只要使用它，忘记必备的ui组件/逻辑——它已经为你编写好了。在屏幕宽度上展开/折叠元素也无关紧要。谢谢您的回复。这似乎达到了我所需要的，但是我需要尝试一下，因为我从来没有使用过那种级别的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;
    }
}