首页 文章

仅可折叠菜单CSS

提问于
浏览 次
2

我想在CSS3中创建这个布局
LEFT: before collapsing. RIGHT: after

左上角的图像应折叠垂直菜单并仅显示图像 . 这应该是动画的，所以它会平滑地折叠 . 我想做一个只有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>

任何帮助表示赞赏 .

EDIT:

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

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

html css css3

2 回答

  • 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）

    • 它依赖于标签检查复选框（过去使这很困难）

    回复于
  • 1

    雅，如上面的回答所提到的那样_哈希'复选框 :checked css选择器 . 但是如果我能让动画工作的话，我会更新答案！ FIDDLE

    回复于

相关问题