如何使用纯 CSS 创建移动导航切换？
How to create a mobile navigation toggle using pure CSS?
我有一个旧站点。
现在我想让它移动友好。
所以我想添加一个移动导航，为了让它工作，我只想使用纯 css。否 javascript。
我不允许在文件中添加 JS 代码。
我试过以下方法：
标记（我不能触摸里面的任何东西nav-menu class）：
<!--- mobile navigation -->
<div class="tm_menu_mobile">
<div class="menu_icon">
<div class="three_line"></div>
<div class="three_line"></div>
<div class="three_line"></div>
</div>
<div style="clear:both;"></div>
<div class="nav-menu">
<ul>
<li class="page_item page-item-4"><a href="#">Page 1</a></li>
<li class="page_item page-item-2"><a href="#">Page 2</a></li>
<li class="page_item page-item-2"><a href="#">Page 2</a></li>
</ul>
</div>
</div>
然后我试了这个 CSS:
.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
到这里我觉得还好。
现在我想为动画/切换工作（仅使用 CSS）
我怎样才能实现：
- 默认情况下，不应显示
ul / nav-menu。只应显示 menu_icon。
- 当访问者点击
menu_icon 时，应该显示/切换 ul。
- 当用户再次单击
menu_icon 时，ul 应该消失/向上切换并显示：none.
我只想使用 CSS 来完成此操作。
您最好的选择很可能是 :target CSS 选择器和锚标记。
在下面的代码片段中，有一个菜单按钮，它有一个指向#menu 的标签，如果目标使菜单可见，并显示一个 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;
}
其他
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
html {
width:100%;
}
* {
box-sizing: border-box;
}
body {
display:block;
margin: 0;
width: 100%;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: #222;
}
#content {
position: fixed;
height:100%;
width:180%;
left:-80%;
background: #ecf0f1;
}
#content > nav {
position:fixed;
width:80%;
height:100%;
background: #34495e;
}
#content > nav > ul {
list-style: none;
margin:0;
padding: 0;
margin-top: 5px;
}
#content > nav > ul > li > a {
display: block;
width:100%;
padding:10px;
background: #2c3e50;
margin-bottom: 5px;
color:#ddd;
text-decoration: none;
}
#content > a#menubtn {
position: fixed;
background: #9b59b6;
width:40px;
height:40px;
left:0;
top:0;
z-index: 100;
}
#content > a#menubtn:before { /*http://css-tricks.com/three-line-menu-navicon/*/
content: "";
position: absolute;
left: 10px;
top: 12px;
width: 20px;
height: 3px;
background: #fff;
box-shadow:
0 6px 0 0 #fff,
0 12px 0 0 #fff;
}
#content > article {
position: fixed;
padding: 25px;
left: 0;
right: 0;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#tabhelper {
display:none;
position:fixed;
right:0;
width:20%;
height:100%;
top:0;
z-index: 10;
}
#content, #menubtn, #content > article {
transition: all .4s;
}
#menu {
display: none;
}
#menu:target ~ #content {
left:0;
}
#menu:target ~ #content > a#menubtn {
left:80%;
}
#menu:target ~ #content > article {
left:80%;
right:-80%;
-webkit-filter: blur(3px);
}
#menu:target ~ #tabhelper {
display:block;
}
<div class="helper" id="menu"></div>
<a id="tabhelper" href="#"></a>
<div id="content">
<a id="menubtn" href="#menu"></a>
<nav>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
<li><a href="#">Vestibulum auctor dapibus neque.</a></li>
</ul>
</nav>
<article>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</article>
</div>
CSS和HTML单独可以响应点击。
您应该可以使用 :focus，只要每个元素都独立地包装在它自己的 HTML 元素中，该元素具有制表符索引
您可以通过打开开发工具、选择此页面上的一个元素并选择 :focus 强制进入焦点状态（右键单击）来尝试此操作。
在您的 HTML 中，您将需要 tabindex - 这是必需的，但也要确保您的 UI 响应键盘和鼠标
这个fiddle给出了一个演示：http://jsfiddle.net/szhtebjm/4/
要定位您在父级中无权访问的元素，您可以直接在 css 中使用 html 标记，在 :focus 中，如 fiddle 带有 span 元素
这是一个基本示例，用于证明焦点将在点击时触发更改 css，应用动画可以通过关键帧和过渡来完成
这里有一个带有转换的例子：
http://jsfiddle.net/szhtebjm/8/
最后一点，您这样做违反了关注点分离。 Javascript 应该处理功能，css 应该处理样式。最好的方法确实是设置允许您添加 javascript 然后您可以使用它来处理菜单功能
我有一个旧站点。 现在我想让它移动友好。 所以我想添加一个移动导航，为了让它工作，我只想使用纯 css。否 javascript。 我不允许在文件中添加 JS 代码。
我试过以下方法：
标记（我不能触摸里面的任何东西nav-menu class）：
<!--- mobile navigation -->
<div class="tm_menu_mobile">
<div class="menu_icon">
<div class="three_line"></div>
<div class="three_line"></div>
<div class="three_line"></div>
</div>
<div style="clear:both;"></div>
<div class="nav-menu">
<ul>
<li class="page_item page-item-4"><a href="#">Page 1</a></li>
<li class="page_item page-item-2"><a href="#">Page 2</a></li>
<li class="page_item page-item-2"><a href="#">Page 2</a></li>
</ul>
</div>
</div>
然后我试了这个 CSS:
.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
到这里我觉得还好。 现在我想为动画/切换工作（仅使用 CSS）
我怎样才能实现：
- 默认情况下，不应显示
ul/nav-menu。只应显示menu_icon。 - 当访问者点击
menu_icon时，应该显示/切换ul。 - 当用户再次单击
menu_icon时，ul应该消失/向上切换并显示：none.
我只想使用 CSS 来完成此操作。
您最好的选择很可能是 :target CSS 选择器和锚标记。 在下面的代码片段中，有一个菜单按钮，它有一个指向#menu 的标签，如果目标使菜单可见，并显示一个 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;
}
其他
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
html {
width:100%;
}
* {
box-sizing: border-box;
}
body {
display:block;
margin: 0;
width: 100%;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: #222;
}
#content {
position: fixed;
height:100%;
width:180%;
left:-80%;
background: #ecf0f1;
}
#content > nav {
position:fixed;
width:80%;
height:100%;
background: #34495e;
}
#content > nav > ul {
list-style: none;
margin:0;
padding: 0;
margin-top: 5px;
}
#content > nav > ul > li > a {
display: block;
width:100%;
padding:10px;
background: #2c3e50;
margin-bottom: 5px;
color:#ddd;
text-decoration: none;
}
#content > a#menubtn {
position: fixed;
background: #9b59b6;
width:40px;
height:40px;
left:0;
top:0;
z-index: 100;
}
#content > a#menubtn:before { /*http://css-tricks.com/three-line-menu-navicon/*/
content: "";
position: absolute;
left: 10px;
top: 12px;
width: 20px;
height: 3px;
background: #fff;
box-shadow:
0 6px 0 0 #fff,
0 12px 0 0 #fff;
}
#content > article {
position: fixed;
padding: 25px;
left: 0;
right: 0;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#tabhelper {
display:none;
position:fixed;
right:0;
width:20%;
height:100%;
top:0;
z-index: 10;
}
#content, #menubtn, #content > article {
transition: all .4s;
}
#menu {
display: none;
}
#menu:target ~ #content {
left:0;
}
#menu:target ~ #content > a#menubtn {
left:80%;
}
#menu:target ~ #content > article {
left:80%;
right:-80%;
-webkit-filter: blur(3px);
}
#menu:target ~ #tabhelper {
display:block;
}
<div class="helper" id="menu"></div>
<a id="tabhelper" href="#"></a>
<div id="content">
<a id="menubtn" href="#menu"></a>
<nav>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
<li><a href="#">Vestibulum auctor dapibus neque.</a></li>
</ul>
</nav>
<article>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</article>
</div>
CSS和HTML单独可以响应点击。
您应该可以使用 :focus，只要每个元素都独立地包装在它自己的 HTML 元素中，该元素具有制表符索引
您可以通过打开开发工具、选择此页面上的一个元素并选择 :focus 强制进入焦点状态（右键单击）来尝试此操作。
在您的 HTML 中，您将需要 tabindex - 这是必需的，但也要确保您的 UI 响应键盘和鼠标
这个fiddle给出了一个演示：http://jsfiddle.net/szhtebjm/4/
要定位您在父级中无权访问的元素，您可以直接在 css 中使用 html 标记，在 :focus 中，如 fiddle 带有 span 元素
这是一个基本示例，用于证明焦点将在点击时触发更改 css，应用动画可以通过关键帧和过渡来完成
这里有一个带有转换的例子：
http://jsfiddle.net/szhtebjm/8/
最后一点，您这样做违反了关注点分离。 Javascript 应该处理功能，css 应该处理样式。最好的方法确实是设置允许您添加 javascript 然后您可以使用它来处理菜单功能