Question

我正在尝试在CSS3

中创建此布局

左上角的图像应折叠垂直菜单并仅显示图像。这应该是动画的，所以它会平滑地折叠。我想做一个只有CSS的解决方案，没有JS / JQuery，如果可能的话没有Bootstrap。折叠时，绿色和黄色框也应向左移动。蓝色和绿色框都应该固定，黄色框可以滚动。

This有一些我想要的潜在功能。 This并不是我想要的，它在我的浏览器中不起作用。

我不知道如何只使用CSS，左上角的图像链接来调整垂直菜单的大小，只隐藏链接的文本（不在一个范围内，因为我不喜欢用它来仅演示），并改变自己的形象。当然，通过再次点击新的右上角图像，它应该“解除崩溃”。

我遇到的一个问题是我使用绿色和黄色方框填充this Website，这对我来说似乎不对。它们应该自动重新适应新的布局，而不必切换填充。

我创建了一个JSfiddle。

<body>
<header>
<nav>
<a href="#">
<img src="logo.png" alt="logo">
</a>
    <ul>
    <li><a href="...html"><img src="option1.jpg">Option 1</a></li>
    <li><a href="...html"><img src="option2.jpg">Option 2</a></li>
    <li><a href="...html"><img src="option3.jpg">Option 3</a></li>
    </ul>
</nav>
</header>
<main>
<nav>
    <ul>
    <li><a href="...html">LINK</a></li>
    <li><a href="...html">LINK</a></li>
    <li><a href="...html">LINK</a></li>
    </ul>
</nav>
<h1>Main title</h1>
TEXT TEXT TEXT
</main>
</body>

感谢任何帮助。

修改

浏览器支持 - 我想主要针对现代浏览器，所以我不会太在意旧的IE技巧。

似乎不可能只使用CSS（我觉得从我以前的旧CSS体验，但不确定最近的改进是否已经到目前为止允许它）。如果需要JS / JQuery，我想解决方案是捕获图像上的点击并更改DOM。不知道动画是如何完成的。基本布局怎么样？有没有办法在左侧保持绿色和黄色，靠近蓝色框，而不是根据崩溃不同填充它们？

Answer 1

在没有JS的情况下实现切换的最常用方法是使用checkbox hack。这是一个简单的示例来帮助您入门（单击菜单将切换列表样式）：

.main_nav__checkbox {
  position: absolute;
  top: -1000em;
}


.main_nav__checkbox:checked ~ ul {
  background: red;
}

<nav>
  <input type="checkbox" name="togglenav" id="togglenav" class="main_nav__checkbox" aria-label="Toggle Menu" />
  
  <label class="main_nav__toggle" for="togglenav">Menu</label>
  
   <ul>
    <li><a href="...html">Option 1</a></li>
    <li><a href="...html">Option 2</a></li>
    <li><a href="...html">Option 3</a></li>
   </ul>
  
</nav>

请注意，有理由不经常使用它：

这是'hacky'
它依赖于:checked属性（IE9 +）
它依赖于标签检查复选框（firefox bug过去使这很困难）

Answer 2

ya，正如上面的回答中提到的，我已经编辑了你的小提琴，它使用了'hacky'复选框:checked css选择器。但是我无法为它制作动画尝试修改小提琴或我会更新答案，如果我可以让动画工作！ FIDDLE

仅可折叠菜单CSS

2 个答案: