我正在尝试制作一个在PC和手机上看起来都不错的下拉菜单栏。 在电脑上它很棒： codepen.io/anon/pen/tlhnk
我正在寻找的效果是，当我按下具有“子菜单”的“主菜单”时，子菜单应显示在主菜单下面（它确实如此，但它有点上升在主菜单的中间，子菜单应该将活动菜单下面的主要菜单向下推，这样子菜单就会在主要菜单“之间”而不是在它们之上。这是一个例子： codepen.io/PorototypeX/pen/swvtc
但是子菜单只放在主菜单的顶部。 这是我的代码：
的login.php：
<?php
require_once("scripts/check_user.php");
if($user_is_logged == true){
header("location: index.php");
exit();
}
if(isset($_POST['email']) && trim($_POST['email']) != ""){
$email = strip_tags($_POST['email']);
$password = $_POST['password'];
$hmac = hash_hmac('sha512', $password, file_get_contents('secret/key.txt'));
$stmt1 = $db->prepare("SELECT id, username, password FROM members WHERE email=:email AND activated='1' LIMIT 1");
$stmt1->bindValue(':email',$email,PDO::PARAM_STR);
try{
$stmt1->execute();
$count = $stmt1->rowCount();
if($count > 0){
while($row = $stmt1->fetch(PDO::FETCH_ASSOC)){
$uid = $row['id'];
$username = $row['username'];
$hash = $row['password'];
}
if (crypt($hmac, $hash) === $hash) {
$db->query("UPDATE members SET lastlog=now() WHERE id='$uid' LIMIT 1");
$_SESSION['uid'] = $uid;
$_SESSION['username'] = $username;
$_SESSION['password'] = $hash;
setcookie("id", $uid, strtotime( '+30 days' ), "/", "", "", TRUE);
setcookie("username", $username, strtotime( '+30 days' ), "/", "", "", TRUE);
setcookie("password", $hash, strtotime( '+30 days' ), "/", "", "", TRUE);
/* echo 'Valid password<br />'.$_SESSION['uid'].'<br />'.$_SESSION['username'].'<br />'.$_SESSION['password'].'
<br />'.$_COOKIE['id']; */
header("location: index.php");
exit();
} else {
echo 'Invalid password Press back and try again<br />';
exit();
}
}
else{
echo "A user with that email address does not exist here";
$db = null;
exit();
}
}
catch(PDOException $e){
echo $e->getMessage();
$db = null;
exit();
}
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login To Lucu</title>
<link rel="stylesheet" href="style/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
.contentBottom{
width:68%;
margin-left:auto;
margin-right:auto;
}
</style>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
</head>
<body>
<?php require_once("includes/header.php"); ?>
<?php require_once("includes/menu.php"); ?>
<div class="container">
<div class="content">
<div class="contentBottom">
<h2 style="text-align:center;">Welcome to Lucu!</h2>
<p style="text-align:center;">Log in here to use all functions on this website.</p>
<form action="" method="post" class="form">
<h3>Log In</h3>
<strong>Email</strong><br />
<input type="text" name="email">
<br />
<strong>Password</strong><br />
<input type="password" name="password">
<br />
<br />
<p class="submit">
<button type="submit">Log In</button>
</p>
</form>
<br />
<br />
</div>
</div>
<div class="clearfloat"></div>
<!-- end .container --></div>
<?php require_once("includes/footer.php") ?>
</body>
</html>
的header.php：
<?php include_once('../scripts/check_user.php');
$log_link = "";
if($user_is_logged == true){
$query = $db->query("SELECT avatar, full_name FROM members WHERE id='$log_user_id'");
if($query->rowCount() > 0){
while($row = $query->fetch(PDO::FETCH_ASSOC)){
$avatar = $row['avatar'];
$full_name = $row['full_name'];
}
if($full_name != ""){
$member = $full_name;
}else{
$member = $log_uname;
}
if($avatar != '' && file_exists("members/$log_user_id/$avatar")){
$log_link = '<span id="user_top"><a href="#" onclick="return false;" onmousedown="showToggle(\'drop_box\')">'.$member.' <img src="members/'.$log_user_id.'/'.$avatar.'" alt="'.$log_uname.'"/></a></span>';
}else{
$log_link = '<span id="user_top"><a href="#" onclick="return false;" onmousedown="showToggle(\'drop_box\')">'.$member.' <img src="images/default_avatar.png" alt="'.$log_uname.'"/></a></span>';
}
}
}
else{
$log_link = '<span class="submit" style="color:#F8F8F8;"><button onclick="window.location=\'login.php\'">Log In <i class="fa fa-sign-in"></i></button>
Or <button onclick="window.location=\'register.php\'">Sign Up</button></span>';
}
?>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css">
</head>
<body>
<div class="header">
<div class="navicon">
<a class="menu-toggle"><i class="fa fa-align-justify fa-2x"></i></a>
</div>
<div class="headerWrap">
<div class="logoWrap">
<a class="logo" href="index.php">
<img src="images/logo.png" alt="Logo" />
</a>
</div>
<div class="log_link">
<?php echo $log_link ?>
</div>
</div>
<br class="clearfloat" />
</div>
<div id="drop_box" style="display:none;width:80%;">
<div style="float:right; width:200px;">
<ul class="nav">
<li><a href="profile.php?user=<?php echo $log_uname ?>">Profile</a></li>
<li><a href="logout.php">Log Out</a></li>
</ul>
</div>
<div class="clearfloat"></div>
</div>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function showToggle(e){
var target = document.getElementById(e);
if(target.style.display == 'none'){
target.style.display = 'block';
}else{
target.style.display = 'none';
}
}
(function() {
var body = $('body');
$('.menu-toggle').bind('click', function() {
body.toggleClass('menu-open');
return false;
});
})();
$(document).ready(function(){
//Code so that if a li has the class active and the submenu is visible, it slides up, and vice versa. Also shows that if li doesnt has class active it will switch to that li clicked and slideup an visible submenu and dropdow the one under the li clicked
$("#navbar a").click(function(){
var el = $(this).parent();
if(el.hasClass('active') && $(this).next().is(':visible')){
var active = el.siblings('.active');
$(this).next().slideUp();
}
else if(el.hasClass('active') && !$(this).next().is(':visible')){
var active = el.siblings('.active');
$(this).next().slideDown();
}
else if(!el.hasClass('active')){
$(this).next().slideDown();
var active = el.siblings('.active');
active.children('ul:first').slideUp();
active.removeClass('active');
el.addClass('active');
}
});
});
</script>
menu.php：
<!doctype html>
<html>
<body class="menu">
<nav class="navmenu">
<div class="backing">
<ul id="navbar">
<li><a href="#">Home</a>
</li>
<li class="active"><a href="#">Home2</a><span class="darrow">▼</span>
<ul class="subnav">
<li><a href="#">Link 1 </a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</li>
<li><a href="#">Home3</a><span class="darrow">▼</span>
<ul class="subnav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</li>
<li><a href="#">Home4</a>
</li>
<li><a href="#">Contact</a><span class="darrow">▼</span>
<ul class="subnav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
的CSS： http://pastebin.com/auHieMLK
HTML输出：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login To Lucu</title>
<link rel="stylesheet" href="style/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
.contentBottom{
width:68%;
margin-left:auto;
margin-right:auto;
}
</style>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
</head>
<body>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css">
</head>
<body>
<div class="header">
<div class="navicon">
<a class="menu-toggle"><i class="fa fa-align-justify fa-2x"></i></a>
</div>
<div class="headerWrap">
<div class="logoWrap">
<a class="logo" href="index.php">
<img src="images/logo.png" alt="Logo" />
</a>
</div>
<div class="log_link">
<span class="submit" style="color:#F8F8F8;"><button onclick="window.location='login.php'">Log In <i class="fa fa-sign-in"></i></button>
Or <button onclick="window.location='register.php'">Sign Up</button></span> </div>
</div>
<br class="clearfloat" />
</div>
<div id="drop_box" style="display:none;width:80%;">
<div style="float:right; width:200px;">
<ul class="nav">
<li><a href="profile.php?user=">Profile</a></li>
<li><a href="logout.php">Log Out</a></li>
</ul>
</div>
<div class="clearfloat"></div>
</div>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function showToggle(e){
var target = document.getElementById(e);
if(target.style.display == 'none'){
target.style.display = 'block';
}else{
target.style.display = 'none';
}
}
(function() {
var body = $('body');
$('.menu-toggle').bind('click', function() {
body.toggleClass('menu-open');
return false;
});
})();
$(document).ready(function(){
//Code so that if a li has the class active and the submenu is visible, it slides up, and vice versa. Also shows that if li doesnt has class active it will switch to that li clicked and slideup an visible submenu and dropdow the one under the li clicked
$("#navbar a").click(function(){
var el = $(this).parent();
if(el.hasClass('active') && $(this).next().is(':visible')){
var active = el.siblings('.active');
$(this).next().slideUp();
}
else if(el.hasClass('active') && !$(this).next().is(':visible')){
var active = el.siblings('.active');
$(this).next().slideDown();
}
else if(!el.hasClass('active')){
$(this).next().slideDown();
var active = el.siblings('.active');
active.children('ul:first').slideUp();
active.removeClass('active');
el.addClass('active');
}
});
});
</script><!doctype html>
<html>
<body class="menu">
<nav class="navmenu">
<div class="backing">
<ul id="navbar">
<li><a href="#">Home</a>
</li>
<li class="active"><a href="#">Home2</a><span class="darrow">▼</span>
<ul class="subnav">
<li><a href="#">Link 1 </a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</li>
<li><a href="#">Home3</a><span class="darrow">▼</span>
<ul class="subnav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</li>
<li><a href="#">Home4</a>
</li>
<li><a href="#">Contact</a><span class="darrow">▼</span>
<ul class="subnav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html><div class="container">
<div class="content">
<div class="contentBottom">
<h2 style="text-align:center;">Welcome to Lucu!</h2>
<p style="text-align:center;">Log in here to use all functions on this website.</p>
<form action="" method="post" class="form">
<h3>Log In</h3>
<strong>Email</strong><br />
<input type="text" name="email">
<br />
<strong>Password</strong><br />
<input type="password" name="password">
<br />
<br />
<p class="submit">
<button type="submit">Log In <i class="fa fa-sign-in"></i></button>
</p>
</form>
<br />
<br />
</div>
</div>
<div class="clearfloat"></div>
<!-- end .container --></div>
</body>
</html>
在css文件中，PC部分在第300行结束，并且效果很好。 第300行下面的所有内容都是移动部分。移动导航栏位于第366行至第516行。 我已经设置好所以我在标题中有一个图标（字体很棒），当按下它时，菜单从左侧滑入。那个部分有效，但是导航栏是一个下拉菜单，当我们在上面的链接中显示它们时，我想要按下子菜单下面的主要菜单，但无论我尝试哪些子菜单只放在主要菜单之上。
有谁知道问题是什么？我真的很想得到一些帮助。
提前致谢， Busarna