Question

我正在尝试通过在使用480px或更小的设备时创建可折叠菜单来使我的网站移动设备友好。我找到了一个很棒的演示，它完美无缺：How To Create A Responsive Navigation Menu Using Only CSS 我想自定义菜单并将其放在Header div标签中。您可以转到上面的链接查看完整代码。但是，如果我将HTML代码插入div标签，它会停止工作！我可以将全部代码放入div标签中，但这样做无法使用直接HTML和CSS来创建这个可折叠菜单！

我想在笔记本电脑或PC上用左侧菜单查看时将其设置为双列网站。我工作得很好，但是一旦我更改菜单以使用标题div中的可折叠菜单，它就会停止工作！

所以我的代码如下：

<div id="header">
<div class="topcenter">
    <p>Consultants and Suppliers of <br />Affordable, Natural, Quality,
    <br />Sustainable Power Solutions!</p>
</div>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
</div>

<div class="wrapper">
<div id="left">
    <ul id="menu">
        <li><a href="#" title="Power" >Power Up Belize</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Experience</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Contact Us</a></li>
    </ul>
</div>

CSS与示例中的几乎完全相同 - 我已经证明，当标签和输入框不在标题div标签内时它会起作用，但是当我将菜单HTML放入其中时它也会中断包装div！是什么赋予了？为什么我无法让输入框在div标签内正常工作？

对此的任何帮助将不胜感激！提前致谢！

这是我更新的代码（它仍然不起作用:-(）

    @media screen and (max-width : 480px)
{
    /*Change Header imge and font size for Mobile */
    #header
    {
        position: relative;
        top: .25em;
        text-align: center;
        font-size: 90%;
        font-weight: Bold;
        padding-bottom: 2.5em;
        background-image: url('../images/PUBLogoSm.png');
        background-repeat: no-repeat;
        background-position: center top;
        width: 100%;
        height: 130px;
        display: inline-block;
    }
    .topcenter
    {
        position: relative;
        top: 6em;
        text-align: center;
        color: #017f02;
        width: 99%;
        font-weight: bold;
        text-decoration: none;
        padding-bottom:1em;
    }

    /*Make dropdown links appear inline*/
    ul {
        position: static;
        display: none;
        }
    /*Create vertical spacing*/
    li {
        margin-bottom: 1px;
        }
    /*Make all menu links full width*/
    ul li, li a {
        width: 100%;
        }
    /*Display 'show menu' link*/
    #show-menu, #menu {
        display: none;
        }
    #show-menu:checked ~ #menu {
        display: block;
    }
}


    <div id="header">
    <div class="topcenter">
        <p>Consultants and Suppliers of <br />
         Affordable, Natural, Quality,<br />Sustainable Power Solutions!</p>
    </div>
    <label for="show-menu" class="show-menu">Show Menu</label>
    </div>

    <div class="wrapper">
        <div id="left">
            <ul id="menu">
                <li><a href="#" title="Power" >Power Up Belize</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Experience</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
        </div>
    </div>

Answer 1

您可以在<input type="checkbox" ...之前移动<ul id="menu">。这样，一般的兄弟选择器~或下一个兄弟选择器+将再次开始工作。

#show-menu, #menu {
    display: none;
}
#show-menu:checked ~ #menu {
    display: block;
}

<div id="header">
    <label for="show-menu" class="show-menu">Show Menu</label>
</div>

<div class="wrapper">
    <input type="checkbox" id="show-menu" role="button"/>
    <ul id="menu">
        <li><a href="#">Power Up Belize</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Experience</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

修改： JsFiddle example ，并实施了媒体查询。

插入<div>标记时，HTML“输入”按钮停止工作

1 个答案: