Question

我正在尝试使用2个滑入式菜单，左侧1个，右侧1个。我正在尝试使用CSS。我将解释代码下面的问题。

以下是代码：

的index.php：

<body>  
<input type="checkbox" id="sidebartoggler">
<input type="checkbox" id="profiletoggler">

<div class="page-wrap">

    <?php
    require_once 'includes/header.php';
    require_once 'includes/navbar.php';
    require_once 'includes/profilebar.php';
    ?>

    <div class="page-content">
        <div class="error"><span>Error message</span></div>
    </div>

    <?php require_once 'includes/footer.php'; ?>
</div>
</body>

包括/ header.php文件：

<header>
<div class="top-bar">
    <label for="sidebartoggler" class="menu-toggle">☰</label>
    <label for="profiletoggler" class="profile-toggle"><i class="fa fa-user"></i></label>
</div>
<div class="middle-line"></div>
<div class="bottom-bar"></div>
</header>

包括/ navbar.php：

<nav class="menu">
<ul>
    <li><a href="index.php"><i class="fa fa-home"></i>  Home</a></li>
    <div class="break"></div>
    <li><a href="">About</a></li>
    <div class="break"></div>
    <li><a href=""><i class="fa fa-user"></i>  Testing  <i class="fa fa-caret-down"></i></a>
        <!--<ul class="nav-sub">
            <li><a href="index.php"><i class="fa fa-home"></i>  Home</a></li>
        </ul>-->
    </li>
    <div class="break"></div>
    <li><a href="">Visit</a></li>
    <div class="break"></div>
    <li><a href="">Contact</a></li>
    <div class="break"></div>
</ul>
</nav>

包括/ profilebar.php：

<nav class="profilemenu">
<ul>
    <?php 
    if($user->isLoggedIn()) {
    ?>
    <li><a href="profile.php?user=<?php echo escape($user->data()->username); ?>"><img class="thumb" src="<?php echo escape($user->data()->avatar); ?>">  <?php echo escape($user->data()->username); ?>  </a></li>
    <div class="break"></div>
    <li><a href="update.php"><i class="fa fa-cogs fa-fw"></i>  Update profile</a>
    <div class="break"></div>
    <li><a href="changepassword.php"><i class="fa fa-cog fa-fw"></i>  Change Password</a>
    <div class="break"></div>
    <li><a href="logout.php"><i class="fa fa-sign-out fa-fw">  </i>Logout</a>
    <div class="break"></div>
    <?php
    } else {
    ?>
    <li><a href="login.php"><i class="fa fa-sign-in fa-fw"></i>  Log In</a></li>
    <div class="break"></div>
    <li><a href="register.php">Register</a></li>
    <div class="break"></div>
    <?php   
    }
    ?>
</nav>

global.css中：

header {
  width: 100%;
  height: 90px; }

.menu-toggle {
  text-decoration: none;
  text-align: center;
  width: 44px;
  height: 44px;
  font-size: 30px;
  color: rgba(192, 231, 61, 0.5);
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  position: absolute;
  top: 0px;
  right: auto;
  bottom: 0;
  left: 20px;
  z-index: 2; }

  .menu-toggle:hover {
    color: #c0e73d; }

#sidebartoggler {
  display: none; }
  #sidebartoggler:checked + .page-wrap nav.menu {
    left: 0px; }
  #sidebartoggler:checked + .page-wrap .menu-toggle {
    left: 220px; }

.profile-toggle {
  text-decoration: none;
  text-align: center;
  width: 44px;
  height: 44px;
  font-size: 30px;
  color: rgba(192, 231, 61, 0.5);
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  position: absolute;
  top: 0px;
  right: 20px;
  bottom: 0;
  left: auto;
  z-index: 2; }

  .profile-toggle:hover {
    color: #c0e73d; }

#profiletoggler {
  display: none; }
  #profiletoggler:checked + .page-wrap nav.profilemenu {
    right: 0px; }
  #profiletoggler:checked + .page-wrap .profile-toggle {
    right: 220px; }

nav.menu {
  position: fixed;
  top: 0px;
  right: 0;
  bottom: 0px;
  left: -270px;
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  height: auto;
  width: 200px;
  background: #111111;
  border-radius: 0.4em;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  z-index: 2000; }

  nav.menu ul {
    width: 200px; }

    nav.menu ul li {
      width: 200px;
      height: 44px; }

      nav.menu ul li a {
        display: block;
        width: 200px;
        height: 44px;
        text-decoration: none;
        text-align: center;
        color: rgba(192, 231, 61, 0.5);
        font-family: Verdana, Geneva, sans-serif;
        font-size: 16px;
        padding-top: 10px;
        -webkit-font-smoothing: antialiased;
        cursor: pointer; }

        nav.menu ul li a:hover {
          color: #c0e73d; }

  nav.menu .break {
    width: 199px;
    border-top: 2px solid #666666; }

nav.profilemenu {
  position: fixed;
  top: 0px;
  right: -270px;
  bottom: 0px;
  left: auto;
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  height: auto;
  width: 200px;
  background: #111111;
  border-radius: 0.4em;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  z-index: 2000; }

  nav.profilemenu ul {
    width: 200px; }

    nav.profilemenu ul li {
      width: 200px;
      height: 44px; }

      nav.profilemenu ul li a {
        display: block;
        width: 200px;
        height: 44px;
        text-decoration: none;
        text-align: center;
        color: rgba(192, 231, 61, 0.5);
        font-family: Verdana, Geneva, sans-serif;
        font-size: 16px;
        padding-top: 10px;
        -webkit-font-smoothing: antialiased;
        cursor: pointer; }

        nav.profilemenu ul li a:hover {
          color: #c0e73d; }

  nav.profilemenu .break {
    width: 199px;
    border-top: 2px solid #666666; }

我遇到的问题是两个滑入菜单都有效，但当时只有一个。我使用复选框来触发菜单（index.php）。如果我这样放置它们：

<input type="checkbox" id="sidebartoggler">
<input type="checkbox" id="profiletoggler">

这是有用的个人资料菜单，但如果我这样放置它们：

<input type="checkbox" id="profiletoggler">
<input type="checkbox" id="sidebartoggler">

导航栏正在运行，但两者从不协同工作。

为什么会这样？为什么两者都不起作用？

提前致谢，

Busarna

Answer 1

使用：

animation-fill-mode: forwards;

该属性将使元素保持在执行转换后的状态。

幻灯片菜单 - 仅限CSS

1 个答案: