Блог

Я разрабатываю адаптивный веб-сайт, и у меня возникла небольшая проблема с меню. Я покажу изображения ниже, чтобы было легче понять, что происходит…

Меню на рабочем столе отображается следующим образом:

А на мобильном устройстве это должно отображаться следующим образом:

И в настоящее время мой код отображается следующим образом:

Я бы хотел, чтобы подменю загружалось под меню при отображении на мобильном устройстве, есть предложения, как это сделать?

Вот мой HTML-код:

 <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li>
        <ul id="sub-menu">
            <li><a href="#">Todas as categorias</a></li>
            <li><a href="#">Logo</a></li>
            <li><a href="#">Campanha</a></li>
            <li><a href="#">Print</a></li>
            <li><a href="#">Digital</a></li>
            <li><a href="#">Indoor</a></li>
            <li><a href="#">Projetos Especiais</a></li>
        </ul>
    </li>
    <li><a href="#">Trabalhe Conosco</a></li>
    <li><a href="#">Quem Somos</a></li>
    <li><a href="#">Prêmios</a></li>
    <li><a class="select" href="#">Contato</a></li>
</ul>
  

Код Css для desktop:

 #menu{
    position: relative;
    width: 200px;
    margin: 0px 10px 0 0;
    float: right;
    background: rgba(255,255,255,0);
    text-align: left;
    text-transform:uppercase;
}
#menu li{
    list-style: none;
}
#menu li a{
    list-style: none;
    font-family: 'swiss921_btregular';
    text-decoration: none;
    font-size: 22px;
    line-height: 32px;
    color: #231f20;
}
#menu li a:hover{
    color: #ed1d24;
}
#menu li #sub-menu li a{
    margin: 0 0 0 20px;
    list-style: none;
    font-size: 17px;
    line-height: 34px;
    font-family: 'swiss921_btregular';
}
#menu li a.select{
    color: #ed1d24;
}
  

И фактический код Css для мобильных устройств:

 @media screen and (min-width: 0px) and (max-width: 768px){
    #menu{
        width: 100%;
        margin: 50px auto;
        float: none;
        text-align: center;
    }
    #menu li{
        display: inline-block;
        width: auto;
        margin: 0 13px;
    }
    #menu li #sub-menu li a{
        margin: 0;
    }
}
  

Я должен изменить его:http://jsfiddle.net/r3zeB

В принципе, это все, надеюсь, кто-нибудь сможет мне помочь и извините за мой плохой английский. Спасибо.

Вы всегда можете разместить другую копию своего подменю там, где вы хотите, чтобы оно было на мобильном устройстве. Затем используйте display:none; , чтобы он отображался только тогда, когда вы этого хотите, и скрывал другой.

Возможно, это неправильный способ сделать это, но это определенно сработает