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

我正在帮助一位朋友为他的网站设置一个响应菜单，并且从一些最初的研究中我们未能找到用CSS3实现这一点的方法，而且看起来好像是只能通过javascript/jquery实现。从未与这些语言合作过，我希望你能帮助我们实现这个目标：CSS/Javascript - 用于较小屏幕的移动响应菜单

我们希望通过在屏幕分辨率为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/

帮助是极大的赞赏。

问候， Ĵ

来源

2015-11-04 joebegborg07

类似的问题之前已经公布。请参阅THIS POST

来源

2015-11-04 07:33:12 MaartenPAC

感谢您的答复。当再次点击时，我能够实现点击和折叠的扩展吗？ – joebegborg07

是的。我想更改悬停操作上的展开，以便在小于1200像素的屏幕上单击悬停。 – joebegborg07

您可以通过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框架Bootstrap。这很简单，有很多现代的UI功能，并内置响应支持

来源

2015-11-04 08:02:59 Andrew

感谢您的回复。我试过使用媒体，但与CSS我只设法实现悬停的行动，而不是点击事件。使用Css点击是否可以实现展开/折叠？ – joebegborg07

是的，用css过渡。我认为你真的需要在你的项目中引导。不要发明自行车 - 它已经发明了:)只是使用它，忘记了必须具有的UI组件/逻辑 - 它已经为您编写。它也无关紧要您展开/折叠元素的屏幕宽度 – Andrew

我们想使子菜单扩展通过单击其父李每当屏幕分辨率为1200像素或更低

您需要使用media-queries来检测屏幕大小，然后相应地更改CSS。

看起来它通过JavaScript/jQuery的唯一实现

号不是。只需将相应的伪类和相邻的兄弟选择器巧妙地混合在一起即可。 提示：使用带有标签的隐藏复选框来控制兄弟元素。

这是一个小的演示。它基于我的旧回答，改为添加媒体查询，以便在屏幕大于768px（时，可以将其调整为1200的用例）时允许完全展开的手风琴风格菜单。它被折叠，然后由可点击的一级菜单项控制。没有Javascript，只是CSS。

在小提琴中，拖动并调整输出窗格的大小以查看它的行为。在代码片段中，点击全屏并返回以查看它的行动。使用这个演示，然后把它转发给你的确切用例。

演示小提琴：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>

来源

2015-11-04 08:08:29 Abhitalks

感谢您的回复。这似乎达到了我所需要的，但是我需要尝试一下，因为我从来没有使用CSS级别的语法。这将工作在我的小提琴找到的代码？ – joebegborg07

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

回答

相关问题