我正在尝试使用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
答案 0 :(得分:0)
使用:
animation-fill-mode: forwards;
该属性将使元素保持在执行转换后的状态。