下拉菜单栏

Question

我试图制作一个下拉菜单栏，在PC和手机上看起来都不错。 在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.'&nbsp;&nbsp;<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.'&nbsp;&nbsp;<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>
    &nbsp;Or&nbsp;&nbsp;<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">&#9660;</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">&#9660;</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">&#9660;</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>
    &nbsp;Or&nbsp;&nbsp;<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">&#9660;</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">&#9660;</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">&#9660;</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

Answer 1

使用Twitter Bootstrap CSS框架。 它是PC / Tablet / Mobile响应式设计下拉菜单的出色解决方案。