用于响应式的 HTML + CSS 菜单按钮

Posted 2023-05-08

【中文标题】用于响应式的 HTML + CSS 菜单按钮

【英文标题】：HTMl + CSS menu button for responsive

【发布时间】：2021-02-05 10:42:46

【问题描述】：

H，我是前端的初学者，我想显示移动设备的菜单按钮（响应式）。谁能帮帮我，怎么办？我认为需要javascript 或Query。我找到了一些解决方案但不起作用。我在后端使用 Django。 html

div class="header1">
        <div class="header1_box">
            <a href="/" class="logo left"><img src="static/css/covers/logos.png" ></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
    

【参考方案1】：

您是否使用过引导程序或其他响应式插件？如果只自定义响应布局，请参考 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>

改变页面宽度，菜单也会随之改变。

【讨论】：

当按钮被分配'href'时，它将显示类别。您需要添加属性：button