代码之家 › 专栏 › 技术社区 › user2371684

移动菜单问题复选框

flexbox css html

user2371684 · 技术社区 · 7 年前

我使用复选框和标签来隐藏移动视口上的菜单,但我似乎为我的:checked属性定位了错误的元素。

<header id="wrapper">
        <label for="toggle">&#9776</label>
            <input type="checkbox" id="toggle">
            <nav>
                <ul>
                    <li><a href="">Meny 1</a></li>
                    <li><a href="">Meny 2</a></li>
                    <li><a href="">Meny 3</a></li>
                    <li><a href="">Meny 4</a></li>
                    <li><a href="">Meny 5</a></li>
                </ul>
            </nav>                    
        </header>

#toggle{
    display:none;
}

#toggle:checked + #wrapper nav{
    display:block;
}

-谢谢

1 回复 | 直到 7 年前

Gerard 7 年前

不确定我是否理解正确,但这是你需要的吗?

#toggle {
  display: none;
}

#toggle:not(:checked)+nav {
  display: none;
}

#toggle:checked+nav {
  display: block;
}

<header id="wrapper">
  <label for="toggle">&#9776</label>
  <input type="checkbox" id="toggle">
  <nav>
    <ul>
      <li><a href="">Meny 1</a></li>
      <li><a href="">Meny 2</a></li>
      <li><a href="">Meny 3</a></li>
      <li><a href="">Meny 4</a></li>
      <li><a href="">Meny 5</a></li>
    </ul>
  </nav>
</header>

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

7 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

7 年前

Adam Olsson · 在中心CSS中对齐单个列表项

7 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

7 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

7 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

7 年前