I'm trying to make a dropdown menu bar that look good on both pc's and mobiles. On pc it works great: codepen.io/anon/pen/tlhnk
The effect that I'm looking for is that when I press a "main menu" that have a "sub menu", the sub menu should show up underneath the main menu (which it does, but it's a little bit up against the middle of the main menu) the sub menu should push the main menues underneath the active one down so the sub menues is "between" the main menues and not on top of them. Here's an example: codepen.io/PorototypeX/pen/swvtc
But the sub menues only place on top of the main menu. Here's the code I have:
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 output:
<!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>
in the css file the PC part end at line 300, and that works great. Everything underneath line 300 is the mobile part. The mobile navbar is on line 366 to 516. I've set it up so I have an icon (font awesome) in the header, and when that is pressed, the menu slide in from the left. That part works but the navbar is a dropdown, and I want to push down the main menues underneath the submenues when they're shown like in the link above, but whatever I try the submenues only place on top of the main menues.
Does anyone know what the problem is? I would really love some help.
Thanks in advance, Busarna
