如何使用纯CSS创建移动导航切换？

我有一个老网站。 现在我想让它对手机友好。 所以我试图添加一个移动导航，为了让它工作，我只想使用纯css。没有javascript。 我不允许在文件中添加JS代码

我尝试了以下几点：

标记（我不能触摸

nav菜单中的任何内容

class）：

我想在这之前一切都很好。 现在我想为动画/切换工作（仅使用CSS）

我如何实现：

默认情况下，不应显示

ul

/

nav菜单。只应显示
菜单图标

当访客点击

菜单图标时，
ul
应显示/向下切换

当用户再次单击

菜单图标时，
ul
应消失/切换并显示：无

我只想用CSS来做这件事

---

您的最佳选择很可能是：目标CSS选择器和锚定标记。 在下面的代码段中，有一个菜单按钮，它有一个a标记到#菜单，如果目标使菜单可见，并显示一个div，在该div下面链接到#，如果用户单击外部，则隐藏菜单

重要部分

#tabhelper {
    display:none;
    position:fixed;
    right:0;
    width:20%;
    height:100%;
    top:0;
    z-index: 10;
}

#menu:target ~ #content > a#menubtn {
    left:80%;
}

#menu:target ~ #content > article {
    left:80%;
    right:-80%;
  -webkit-filter: blur(3px);
}

#menu:target ~ #tabhelper {
    display:block;
}

其他一切

@导入url(http://fonts.googleapis.com/css?family=Open+Sans:400300700）；
html{
宽度：100%；
}
* {
框大小：边框框；
}
身体{
显示：块；
保证金：0；
宽度：100%；
字体系列：“开放式Sans”，无衬线；
字体大小：300；
颜色：#222；
}
#内容{
位置：固定；
身高：100%；
宽度：180%；
左-80%；
背景#ecf0f1；
}
#内容>导航{
位置：固定；
宽度：80%；
身高：100%；
背景#34495e；
}
#内容>导航>ul{
列表样式：无；
保证金：0；
填充：0；
边缘顶部：5px；
}
#内容>导航>ul>li>a{
显示：块；
宽度：100%；
填充：10px；
背景#2c3e50；
边缘底部：5px；
颜色：#ddd；
文字装饰：无；
}
#内容>菜单项{
位置：固定；
背景：#9b59b6；
宽度：40px；
高度：40px；
左：0；
排名：0；
z指数：100；
}
#content>a#menubtn:before{/*http://css-tricks.com/three-line-menu-navicon/*/
内容：“；
位置：绝对位置；
左：10px；
顶部：12px；
宽度：20px；
高度：3倍；
背景：#fff；
框阴影：
0 6px 0 0#fff，
0 12px 0 0#fff；
}
#内容>文章{
位置：固定；
填充：25px；
左：0；
右：0；
身高：100%；
溢出y：滚动；
-webkit溢出滚动：触摸；
}
#tabhelper{
显示：无；
位置：固定；
右：0；
宽度：20%；
身高：100%；
排名：0；
z指数：10；
}
#内容，#菜单，#内容>文章{
过渡：全部。4s；
}
#菜单{
显示：无；
}
#菜单：目标~#内容{
左：0；
}
#菜单：目标~#内容>菜单{
左：80%；
}
#菜单：目标~#内容>文章{
左：80%；
右图：-80%；
-webkit过滤器：模糊（3px）；
}
#菜单：target~#tabhelper{
显示：块；
}

在turpis枕面部。乌特·费利斯

标题级别2
Lorem ipsum dolor sit amet，是一位杰出的领导者
毛里斯·尤里索斯的阿利夸
Lorem ipsum dolor sit amet，是一位杰出的献身者。麦格纳万岁。我在felis aliquet congue的家里。这是一个最容易引起胎动的孕妇。马萨库拉比图酒店。多内克·埃利芬德，莫利斯射手座的自由人，泰勒斯和马利苏亚达·泰勒斯，卢克图斯·图皮斯的精英们坐在阿梅特广场。小飞蛾

标题级别3

Lorem ipsum dolor sit amet，是一位杰出的领导者
毛里斯·尤里索斯的阿利夸

仅CSS和HTML就可以响应单击

您应该能够使用

：focus

，只要每个元素被离散地包装在它自己的HTML元素中，该元素有一个选项卡索引

您可以通过打开dev工具，在此页面上选择一个元素，然后选择

：focus

来强制设置焦点状态（右键单击）来尝试此操作

在HTML中，您需要

tabindex

——这是必需的，但也确保您的UI响应键盘和鼠标

这把小提琴提供了一个演示：

要针对父元素中您无权访问的元素，您可以直接在css中的：focus中使用html标记，如fiddle with span元素所示

这是一个基本的例子来证明这个概念，焦点将在点击css时触发更改，应用动画可以通过关键帧和过渡来完成

下面是一个转换示例：

---

最后一点，这样做违反了关注点分离。Javascript应该处理功能，css应该处理样式。最好的方法是设置允许您添加javascript，然后使用javascript处理菜单功能

CSS不知道单击事件，只知道悬停。您可以在菜单按钮上显示/隐藏带有悬停效果的菜单，但只要您在其他地方触摸屏幕，它就会消失。两个选项：1）始终显示菜单2）使用JS…在许多情况下，焦点设置为单击，CSS识别焦点：-）不过，我同意，JS应该用于响应用户操作而发生的事件

.tm_menu_mobile { width: 100%; max-width: 1005px; margin: 0 auto; display: block; background-color: #0071b7; }
.menu_icon { width: 100% }
.tm_menu_mobile .menu_icon{ width:50px; height:50px; border-radius: 10px; border:2px solid #fff; float:right; margin-right:10px; }
.menu_icon .three_line{ float:none; width:36px; height:5px; background:#fff;    margin:9px auto; }
.tm_menu_mobile  .nav-menu ul { text-align: center; }
.tm_menu_mobile  .nav-menu ul li { border-bottom: 1px solid #fff; padding: 15p

#tabhelper {
    display:none;
    position:fixed;
    right:0;
    width:20%;
    height:100%;
    top:0;
    z-index: 10;
}

#menu:target ~ #content > a#menubtn {
    left:80%;
}

#menu:target ~ #content > article {
    left:80%;
    right:-80%;
  -webkit-filter: blur(3px);
}

#menu:target ~ #tabhelper {
    display:block;
}