Как создать выпадающее меню в зависимости от размера экрана смартфона?

Question

Я хотел бы, чтобы мое выпадающее меню реагировать на экране смартфона размер @media экрана и (макс-ширина: 360 пикселей) Может кто-то пожалуйста, скажите мне, как это возможно Моя текущая html5 разметка меню заключается в следующем:

<div id="menu" > 
<nav id="primary_nav_wrap"> 
<ul> 
<li class="currentmenuitem"><a href="#">Home</a></li> 
<li><a href="aboutus.html">about us</a></li> 
<li><a href="#">day course</a> 
<ul> 
    <li class="submenu"><a href="threedaycourse.html">3 Day Course 
    </a></li> 
    <li class="submenu"><a href="#">6 Day Course</a></li> 
    </ul></li> 
    <li><a href="#">short course</a> 
    <ul> 
    <li class="submenu"><a href="#">Pasta course</a></li> 
    <li class="submenu"><a href="#">Pizza course</a></li> 
    <li class="submenu"><a href="#">Fettucine course</a></li> 
    </ul></li> 
    <li><a href="#">Tours</a></li> 
    <li><a href="#">recipes</a></li> 
    <li><a href="#">reviews</a></li> 
    <li><a href="contact.html">Contact Us</a></li> 
    <li class="last"><a href="location.html">Location</a></li> 
    </ul> 
    </nav></div> 

устанавливаемого сотовый стиль заключается в следующем:

#menu{ 
    width:960px; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
    position: relative; 
    z-index:1;} 
    #primary_nav_wrap{ 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:5px; 
    text-align:center; 
    /*margin-left:50px; */} 

    #primary_nav_wrap ul{ 
    list-style:none; 
    position:relative; 
    /*float:left;*/ 
    text-align: center; 
    margin:0; 
    padding:0;} 


    #primary_nav_wrap ul a{ 
    /*display:block;*/ 
    color:#333; 
    text-decoration:none; 
    font-weight:500; 
    font-size:14px; 
    text-transform: uppercase; 
    line-height:32px; 
    padding-top:10px; 
    font-family:'Raleway',sans-serif; 
    display: inline-block;} 

    #primary_nav_wrap ul li{ 
    display:inline-block; 
    position:relative; 
    /*float:left;*/ 
    margin:0px; 
    padding:0px;} 

    #primary_nav_wrap ul li:after{ 
    margin-left: 10px; 
    margin-right: 10px; 
    content: " | ";} 

    #primary_nav_wrap ul li.last:after{content: none !important;} 


    #primary_nav_wrap ul li li.submenu:after{content: none !important;} 

    #primary_nav_wrap ul li a:hover{ 
    background:#efefef;} 

    #primary_nav_wrap ul ul{ 
    display:none; 
    position:absolute; 
    top:100%; 
    left:0; 
    background:#fff; 
    opacity: .8; 
    padding:0;} 

    #primary_nav_wrap ul ul li{ 
    float:none; 
    text-align: left; 
    width:200px;} 

    #primary_nav_wrap ul ul a{ 
    line-height:120%; 
    padding:10px 15px;} 

    #primary_nav_wrap ul ul ul{ 
    top:0; 
    left:100%;} 

    #primary_nav_wrap ul li:hover ul{ 
    display:inline-block;} 

Answer 1

вы можете проверить ширину экрана, и если это меньше, чем определенное количество (в данном случае, 500px), а затем изменить CSS (вы также можно сделать это с высотой)

@media screen and (max-width: 500px) { 
    // Change element CSS here 
} 

Answer 2

Использование медиа-запроса, который запускается при ширине страницы < 360px и изменении внешнего вида в запросе. Предоставление #menu в width:100%; сделает его более отзывчивым

@media screen and (max-width: 360px) { 
    . . . 
} 

нажмите запустить фрагмент кода и полная страница затем изменить размер, чтобы увидеть изменения

#menu{ 
 
    width:100%; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    text-align:center; 
 
    position: relative; 
 
    z-index:1;} 
 
    #primary_nav_wrap{ 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    margin-top:5px; 
 
    text-align:center; 
 
    /*margin-left:50px; */} 
 

 
    #primary_nav_wrap ul{ 
 
    list-style:none; 
 
    position:relative; 
 
    /*float:left;*/ 
 
    text-align: center; 
 
    margin:0; 
 
    padding:0;} 
 

 

 
    #primary_nav_wrap ul a{ 
 
    /*display:block;*/ 
 
    color:#333; 
 
    text-decoration:none; 
 
    font-weight:500; 
 
    font-size:14px; 
 
    text-transform: uppercase; 
 
    line-height:32px; 
 
    padding-top:10px; 
 
    font-family:'Raleway',sans-serif; 
 
    display: inline-block;} 
 

 
    #primary_nav_wrap ul li{ 
 
    display:inline-block; 
 
    position:relative; 
 
    /*float:left;*/ 
 
    margin:0px; 
 
    padding:0px;} 
 

 
    #primary_nav_wrap ul li:after{ 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    content: " | ";} 
 

 
    #primary_nav_wrap ul li.last:after{content: none !important;} 
 

 

 
    #primary_nav_wrap ul li li.submenu:after{content: none !important;} 
 

 
    #primary_nav_wrap ul li a:hover{ 
 
    background:#efefef;} 
 

 
    #primary_nav_wrap ul ul{ 
 
    display:none; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0; 
 
    background:#fff; 
 
    opacity: .8; 
 
    padding:0;} 
 

 
    #primary_nav_wrap ul ul li{ 
 
    float:none; 
 
    text-align: left; 
 
    width:200px;} 
 

 
    #primary_nav_wrap ul ul a{ 
 
    line-height:120%; 
 
    padding:10px 15px;} 
 

 
    #primary_nav_wrap ul ul ul{ 
 
    top:0; 
 
    left:100%;} 
 

 
    #primary_nav_wrap ul li:hover ul{ 
 
    display:inline-block;} 
 

 
    #nav-toggle{ 
 
     position: fixed; 
 
     margin: 0; 
 
     padding: 10px; 
 
     z-index: 99999; 
 
     background: darkgrey; 
 
     color: white; 
 
     cursor: pointer; 
 
     display: none; 
 
    } 
 

 
@media screen and (max-width: 360px) { 
 
    
 
    nav{ 
 
    display: none; 
 
    } 
 
    
 
    input[type=checkbox]:checked ~ nav { 
 
    display: block; 
 
    } 
 
    
 
    nav ul{ 
 
    width: 100%; 
 
    } 
 
    
 
    #nav-toggle{ 
 
    padding: 20px; 
 
    display: block; 
 
    } 
 
    
 
    nav{ 
 
    padding-top: 60px; 
 
    width: 100%; 
 
    } 
 
    
 
    #primary_nav_wrap ul li:after{ 
 
    display: none; 
 
    } 
 
    
 
    #primary_nav_wrap ul li{ 
 
    width: 100%; 
 
    } 
 

 
}

<div id="menu" > 
 
    <input type="checkbox" id="nav-toggle"><label for="nav-toggle"><div id="nav-toggle">Menu</div></label> 
 

 
    <nav id="primary_nav_wrap"> 
 
    <ul> 
 
     <li class="currentmenuitem"><a href="#">Home</a></li> 
 
     <li><a href="aboutus.html">about us</a></li> 
 
     <li><a href="#">day course</a> 
 
    <ul> 
 
     <li class="submenu"><a href="threedaycourse.html">3 Day Course</a></li> 
 
     <li class="submenu"><a href="#">6 Day Course</a></li> 
 
    </ul></li> 
 
     <li><a href="#">short course</a> 
 
    <ul> 
 
     <li class="submenu"><a href="#">Pasta course</a></li> 
 
     <li class="submenu"><a href="#">Pizza course</a></li> 
 
     <li class="submenu"><a href="#">Fettucine course</a></li> 
 
    </ul></li> 
 
     <li><a href="#">Tours</a></li> 
 
     <li><a href="#">recipes</a></li> 
 
     <li><a href="#">reviews</a></li> 
 
     <li><a href="contact.html">Contact Us</a></li> 
 
     <li class="last"><a href="location.html">Location</a></li> 
 
    </ul> 
 
    </nav> 
 
</div>