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

Question

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

3

我有一个旧网站。现在我想要使其具备移动设备友好性。因此，我正在尝试添加移动设备导航，并且为了使其正常工作，我只想使用纯 CSS。不使用 JavaScript。我不能向文件中添加JS代码。

我尝试了以下操作：

标记（我不能触及nav-menu类中的任何内容）：

<!--- 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应该消失/切换到上方且display: none。

我希望仅使用CSS实现此目标。

点击此处查看FIDDLE代码

- Foolish Coder

CSS不支持点击事件，只能支持鼠标悬停事件。你可以使用鼠标悬停效果来显示/隐藏菜单按钮上的菜单，但是一旦你在屏幕其他位置触摸，菜单就会消失。有两个选项：1）始终显示菜单；2）使用JS... - undefined

在许多情况下，焦点被设置为点击，并且CSS可以识别焦点 :-) 尽管如此，我同意，JS应该用于响应用户操作的事件。 - undefined

2个回答

1

CSS和HTML可以单独响应点击。

只要每个元素都离散地包装在自己的HTML元素中，并具有一个tab索引，您就可以使用:focus。

您可以通过打开dev工具，在此页面上选择一个元素并选择:focus来强制设置焦点状态（右键单击）。

在您的HTML中，您将需要tabindex-这是必需的，但也确保您的UI对鼠标和键盘作出反应。

这个小例子给出了一个演示：http://jsfiddle.net/szhtebjm/4/ 为了针对父级内部无法访问的元素，您可以在css中直接使用html标记，在:focus中进行演示，例如fiddle中的span元素。

这是一个基本的例子，证明焦点将起作用以触发CSS上的单击更改，应用动画可以使用关键帧和过渡来完成。

这里有一个带有过渡效果的例子：

http://jsfiddle.net/szhtebjm/8/

最后一个要点，这样做违反了职责分离。JavaScript 应该处理功能，而 CSS 应该处理样式。最好的方法是设置允许您添加 JavaScript 的设置，然后可以使用它来处理菜单功能。

- Toni Leigh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Morten Olsen · Accepted Answer

你最好的选择可能是使用 :target CSS 选择器和锚点标签。在下面的代码片段中，有一个菜单按钮，它有一个指向 #menu 的 a 标签，如果目标是使菜单可见并显示一个链接到 # 的 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>