下拉菜单栏

【问题标题】：Dropdown menu bar下拉菜单栏
【发布时间】：2014-02-13 19:01:34
【问题描述】：

我正在尝试制作一个在个人电脑和手机上都看起来不错的下拉菜单栏。 在电脑上效果很好： codepen.io/anon/pen/tlhnk

我正在寻找的效果是，当我按下具有“子菜单”的“主菜单”时，子菜单应显示在主菜单下方（确实如此，但有点向上靠在主菜单的中间）子菜单应该将主菜单向下推到活动菜单的下方，这样子菜单就在主菜单“之间”而不是在它们的顶部。这是一个例子： codepen.io/PorototypeX/pen/swvtc

但子菜单仅位于主菜单之上。 这是我的代码：

登录.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 行。 我已经设置好了，所以我在标题中有一个图标（字体真棒），当按下它时，菜单从左侧滑入。这部分有效，但导航栏是一个下拉菜单，当它们显示在上面的链接中时，我想按下子菜单下方的主菜单，但无论我尝试什么，子菜单都只能放在主菜单的顶部。

有谁知道问题出在哪里？我真的很想得到一些帮助。

提前致谢， 布萨尔纳

【问题讨论】：

  • 欢迎来到 StackOverflow！这很难理解，因为这里发生了很多事情。如果你能把不能正常工作的部分剪掉就更好了。如果所有这些对于您的问题都是必要的，您还可以创建一个演示问题的 jsfiddle（尽管您已经通过在此处包含代码做了正确的事情 - 不要只创建 jsfiddles 而不包含代码）。跨度>
  • 另外，你能描述一下你想要达到的效果，而不仅仅是链接吗？如果这些链接发生变化，这个问题将不再对未来的读者有用。
  • 我正在寻找的效果是，当我按下具有“子菜单”的“主菜单”时，子菜单应显示在主菜单下方（确实如此，但它有点靠在主菜单的中间）子菜单应该将主菜单向下推，这样子菜单就在主菜单“之间”而不是在它们之上。
  • 我更改了帖子，所以我正在寻找的效果现在与链接一起存在:)
  • 这是一个 100% 的客户端问题，因此在显示您的 PHP 代码方面没有任何帮助（它只是把问题搞砸了）。只需显示您的 HTML 输出和相关的 CSS。

标签： javascript php jquery html css


【解决方案1】：

使用Twitter Bootstrap CSS 框架。它是 PC/平板电脑/移动响应式设计下拉菜单的绝佳解决方案。

【讨论】：

  • 感谢您的回答。我已经研究过了，但在这个网站上我想尝试自己制作:) 除了删除我所做的并切换到引导程序之外，你知道任何可能的解决方案吗？
  • 相信我切换到 bootstrap 会为您节省一生的时间。这是一个最佳实践框架，您可以找到许多不错的引导主题。当您想创建自己的东西时 - 下载引导程序源代码并对代码进行逆向工程，您将学习如何以最好的方式做事。
  • 没问题，我切换到 bootstrap 是我 CSS 开发中最好的一天 :)。太棒了，你会喜欢的。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-12-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode