CSS / Javascript-適用於較小屏幕的移動響應菜單

Question

我正在幫助一個朋友為他的網站設置一個響應菜單，並且從一些初步研究中，我們未能找到使用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

Answer 1

每當屏幕分辨率小於或等於1200px時，我們都想通過單擊其父級li來擴展子菜單

您將需要使用媒體查詢來檢測屏幕尺寸，然后相應地更改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> 

Answer 2

您可以使用CSS媒體查詢來滿足您的所有需求。 如果指定max-width條件並描述指定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功能，並內置了響應式支持