Блог

H, я новичок в интерфейсе, я хочу показать кнопку меню для мобильных устройств (отзывчивая). кто-нибудь может мне помочь, как это сделать? я думаю, что нужно JavaScript или Query . я нахожу какое-то решение, но не работает. я использую Django в фоновом режиме. HTML

 div class="header1">
        <div class="header1_box">
            <a href="/" class="logo left"><img src="static/css/covers/logos.png" alt="logo"></a>
            <ul class="content_menu hide_mob" style="position:relative;"></ul>
            <ul class="content_menu hide_mob">
                <li><a href="/" class="active">Horoscope</a></li>
                <li><a href="blog">Blog</a></li>

            </ul>
            <div class="right">
                <a class="mob_menu" id="menu_button"></a>
               
                  </a>
            </div>
        </div>
    </div>
  

css

 .mob_menu {
        float: right;
        cursor: pointer;
        width: 29px;
        height: 29px;
        background-image: url("covers/header_menu.png");
        background-repeat: no-repeat;
        margin: 10px 10px 0 0;
        background-size: 29px
    }
    .mobile_menu {
        width: 100%;
        overflow: auto;
        height: 100%
    }
    .mobile_menu li {
        width: 100%
    }
    .mobile_menu li a {
        color: #fff;
        padding: 13px 15px;
        font-family: font2;
        display: block;
        font-size: 13px;
        border-top: 1px solid #2f41a7
    }
  

Вы использовали bootstrap или другие адаптивные плагины? Если вы настраиваете только макет ответа, пожалуйста, обратитесь к css3 @media . Например.

 <style> 
@media  (min-width:600px){ 
.trans_menu{
    float: right;
    cursor: pointer;
    width: 29px;
    height: 29px;
    background-image: url("covers/header_menu.png");
    background-repeat: no-repeat;
    margin: 10px 10px 0 0;
    background-size: 29px
  }
}
@media (max-width:400px){ 
.mobile_menu {
    width: 100%;
    overflow: auto;
    height: 100%
}
.trans_menu{
    width: 100%;
    overflow: auto;
    height: 100%
}
.mobile_menu li {
    width: 100%
}
.mobile_menu li a {
    color: #fff;
    padding: 13px 15px;
    font-family: font2;
    display: block;
    font-size: 13px;
    border-top: 1px solid #2f41a7
 }
}

</style>
  

Это меню, класс которого был изменен.(html)

 <div class="right">
   <a class="trans_menu" id="menu_button" href="/">button</a>
</div>
  

Измените ширину страницы, меню изменится соответствующим образом.