下拉菜單欄

我試圖做一個下拉菜單欄，在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：

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文件中在列300的PC部分結束，而偉大工程。行300下面的所有內容都是移動部分。移動導航欄位於第366至第516行。我已經設置好了，所以我在標題中有一個圖標（字體超棒），當按下時，菜單從左側滑入。這部分工作，但導航欄是一個下拉菜單，當他們像上面的鏈接一樣顯示時，我想要推下子菜單下的主菜單，但是無論我嘗試子菜單，只能放在主菜單上。

有誰知道問題是什麼？我真的很喜歡一些幫助。

由於提前， Busarna

來源

2014-02-13 Busarna4

歡迎來到StackOverflow！由於這裏發生了很多事情，所以很難跟蹤。如果你能切斷那些運轉不好的零件，那會更好。如果所有這些對你的問題都是必要的，你也可以創建一個jsfiddle來演示這個問題（儘管你在這裏包含了代碼就做了正確的事情 - 不要在沒有包含代碼的情況下創建jsfiddles）。 –

另外，你能描述一下你試圖實現的效果，而不是僅僅連接？如果這些鏈接有變化，這個問題將不再對未來的讀者有用。 –

我正在尋找的效果是，當我按下具有「子菜單」的「主菜單」時，子菜單應該顯示在主菜單下面（它所做的，但它有點反對主菜單的中間），子菜單應該將主菜單向下推，使得子菜單位於主菜單「之間」，而不在主菜單之間。 – Busarna4

使用Twitter Bootstrap CSS框架。它非常適用於PC /平板電腦/移動設備的下拉式菜單。

來源

2014-02-13 22:17:47 petkopalko

感謝您的回答。我已經看過，但在這個網站上，我想嘗試使我自己:)你知道任何可能的解決方案，除了刪除我所做的，並切換到引導？ – Busarna4

相信我切換到bootstrap會節省您一生的時間。這是一個最佳實踐框架，你可以找到許多不錯的引導主題。當你想創建自己的東西時 - 下載引導源代碼並對代碼進行逆向工程，你將學會如何以最好的方式做事。 – petkopalko

好的，謝謝你的回答，我可能會研究一下 – Busarna4

回答

相關問題