Develop Reference

Making absolute menu responsive with changing sizes

I've seen many questions similar but haven't found the answer to my problem yet.
I need to make this menu dropdown responsive with the page but as it is absolute , I am not sure how to make this happen. Using JS is not a problem eather .Any solution will do.
header{
nav{
min-width: 280px;
max-width: 479px;
margin: 0 auto;
clear: both;
position: relative;
.logo{
padding: 13px 0 10px 9px;
float: left;
}//End of logo
ul{
list-style-type: none;
border-bottom: 2px solid $white;
margin-bottom: 6px;
li{
line-height: 23px;
.nav-img{
line-height: 50px;
float: right;
margin-right: 18px;
}
.nav-content{
position: absolute;
top: 60px;
overflow: hidden;
background-color: $dropdownColor;
//margin: 0 auto;
min-width: 280px;
//width: 100%;
max-width: 440px;
padding: 0px 20px;
max-height: 0px;
.arrow{
float: right;
padding-top: 13px;
}
.nav-sub{
.second-menu{
li{
font-size: 12px;
display: inline-block;
line-height: 8px;
}
li+li:before {
padding: 2px;
color: $white;
content: "/\00a0";
}
}
a{
display: inline-block;
text-decoration: none;
color: $white;
font-weight: bold;
}
input{
width: 100%;
padding: 5px;
border: none;
background-image: url("../images/search_icon.png");
background-repeat: no-repeat;
background-position: center right 10px;
margin: 15px 0;
}
}
}
}
li:first-child{
padding-top: 13px;
}
li:last-child{
padding-bottom: 20px;
}
}//End of menu
}//End of nav
}//End of header
<header>
<nav>
<div class="logo">
<img src="./images/logo.png" alt="Error loading image!">
</div>
<ul>
<li>
<img src="./images/menu_shape.png" alt="Error loading image!">
<div class="nav-content">
<a class="arrow" href=""><img src="./images/dropdown_arrow.png" alt="Error loading image!"></a> <div class="nav-sub">
<ul>
<li>About Us
<!--<ul>
<li>Production</li>
<li>Energy & Commodities</li>
<li>Transport</li>
<li>Industrial Services</li>
</ul>-->
</li>
<li>Divisions</li>
<li>Investors</li>
<li>Corporate Responsibility</li>
</ul>
<ul class="second-menu">
<li>Home</li>
<li>Media Centre</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
<input type="search" placeholder="Search">
</div>
</div>
</li>
</ul>
</nav>
</header>
Here are the images.
I know that I can put the width in pixels but it won't be responsive than.

Using media queries to change css rules by resolution
https://developer.mozilla.org/en/docs/Web/CSS/Media_Queries/Using_media_queries

link didn't work outside of div in notification dropdown menu?

I am creating Notification section, where the link is provided on Notification in dropdown menu, but the link on Notification is not working, it is showing the link which i provided in left bottom of the browser but it can't clickable?
HTML
<i class="fa fa-globe"><span class="badge badge-notify">.</span></i>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<div class="col-sm-12 col-md-12 col-lg-12">
<a href="notifications.php#1" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="../images/img_avatar.png" />
</div>
</div>
</li>
<li class="description-notification"><p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p></li>
</ul>
</a>
</div>
</div>
</div>
CSS
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: -250px;
width: 400px;
display: none;
z-index: 1;
}
#notificationTitle {
z-index: 1000;
padding: 8px;
font-size: 18px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
font-family:Bookman Old Style ;
}
#notificationsBody {
padding: 0px 0px 0px 0px !important;
min-height:100px;
font-family:Bookman Old Style ;
margin-bottom:0px;
}
#details-container-notification{
margin-top:0%;
text-decoration:none;
float:left;
width:100%;
margin-left:0%;
font-size: 14px;
word-spacing: 1px;
line-height: 150%;
color: darkblack;
text-decoration:none;
font-family:Bookman Old Style ;
border-bottom:1px solid #f5f8fa;
padding:10px;
}
#details-container-notification:hover{
background-color:#fafafa;
}
.area-notification{
width:100%;
}
#profile-container-notification {
float:left;
margin-left:0%;
margin-right:2%;
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin-bottom:15px;
}
#profile-container-notification img {
width: 60px;
height: 60px;
}
#notificationFooter{
background-color: #e9eaed;
text-align: center;
padding: 8px;
width:100%;
font-size: 18px;
border-top: 1px solid #dddddd;
text-decoration:none;
font-family:Bookman Old Style ;
}
.badge-notify{
background:#3897f0;
position:relative;
top: -10px;
left: -35px;
}
JSFIDDLE:- https://jsfiddle.net/r33osLt9/1/

i don't know exactly what your issue , if my thought is right remove
return false from you js , check with working fiddle
$("#notificationContainer").click(function() {
//return false
});
https://jsfiddle.net/r33osLt9/2/
just try with this also
$(function(){
$("#notificationLink").on('click', function(e){
e.preventDefault(); /* this will block the link */
e.stopPropagation();
$("#notificationContainer").slideToggle(300);
});
$("#settingLink").on('click', function(e){
e.preventDefault(); /* this will block the link */
e.stopPropagation();
$("#settingContainer").fadeToggle(300);
});
$(document).on('click', function(){
$("#notificationContainer").hide();
$("#settingContainer").hide();
});
});
.navigation {
width: 100%;
height: 70px;
background-color: #fafafa;
margin-bottom: 1%;
}
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: 0px;
width: 400px;
display: none;
z-index: 1;
}
#notificationTitle {
z-index: 1000;
padding: 8px;
font-size: 18px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
font-family: Bookman Old Style;
}
#notificationsBody {
padding: 0px 0px 0px 0px !important;
min-height: 100px;
font-family: Bookman Old Style;
margin-bottom: 0px;
}
#details-container-notification {
margin-top: 0%;
text-decoration: none;
float: left;
width: 100%;
margin-left: 0%;
font-size: 14px;
word-spacing: 1px;
line-height: 150%;
color: darkblack;
text-decoration: none;
font-family: Bookman Old Style;
border-bottom: 1px solid #f5f8fa;
padding: 10px;
}
#details-container-notification:hover {
background-color: #fafafa;
}
.area-notification {
width: 100%;
}
#profile-container-notification {
float: left;
margin-left: 0%;
margin-right: 2%;
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin-bottom: 15px;
}
#profile-container-notification img {
width: 60px;
height: 60px;
}
#notificationFooter {
background-color: #e9eaed;
text-align: center;
padding: 8px;
width: 100%;
font-size: 18px;
border-top: 1px solid #dddddd;
text-decoration: none;
font-family: Bookman Old Style;
}
.badge-notify {
background: #3897f0;
position: relative;
top: -10px;
left: -35px;
}
#settingContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: 0px;
width: 180px;
display: none;
z-index: 1;
}
#settingsBody {
padding: 10px 0px 0px 0px !important;
height: 50px;
font-family: Bookman Old Style;
}
.area-setting {
width: 100%;
}
#details-container-setting {
text-decoration: none;
float: left;
width: 100%;
margin-left: 1%;
font-size: 18px;
word-spacing: 1px;
color: darkblack;
text-decoration: none;
font-family: Bookman Old Style;
line-height: 50%;
margin-bottom: 10px;
margin-top: 0%;
padding: 10px;
}
#details-container-setting:hover {
background-color: #fafafa;
}
.icon-bar a {
width: 50px;
float: left;
font-size: 30px;
color: black;
}
.icon1 {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navigation">
<div class="icon-bar"> <i class="fa fa-search"><span></span></i> <i class="fa fa-envelope"><span class="badge badge-notify">.</span></i> <i class="fa fa-globe"><span class="badge badge-notify">.</span></i>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#1" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li class="description-notification">
<p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#2" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li>
<p class="description-notification">KEntury Fried Chicken</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#3" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li>
<p class="description-notification">KFC</p>
</li>
</ul>
</a> </div>
</div>
<a href="notifications.php" id="notificationFooter">
<p>See All</p>
</a> </div>
<i class="fa fa-cog"></i>
<div id="settingContainer">
<div id="settingsBody" class="setting">
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="../edit-profile/edit-profile.php" id="details-container-setting">
<ul class="area-setting">
<li>
<p class="description-setting">Setting</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="../logout/logout.php" id="details-container-setting">
<ul class="area-setting">
<li>
<p class="description-setting">Logout</p>
</li>
</ul>
</a> </div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Your tag a needs to have display:block.
If not, the tag a cannot contain a block element. Because of a rule of html the unblock-level element cannot have the block-level element inside. If you do, the unblock-level one will not work well.

DIV Sections Overlapping One Another

I have made a sidebar which is positioned as fixed to the left-hand side of the screen. Then where the issue comes in is the 'first' section of context is fine just when I try to add the second section of context, it basically sits its exactly on top of the first section instead of going under it. I have tried different positioning but it's always either on top of it or to the left of the screen ignoring the sidebar. So my question is, how do I get the second section to continue under the first section and the third section then of course to follow on the same way. Thanks in advance.
body{
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li{
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link{
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
}
#welcometext{
text-align: center;
font-style: italic;
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar{
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar input{
max-width: 95%;
}
#sectionone {
position: fixed;
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header{
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0,0,0,0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo{
float: ;
width: 80%;
top: 0;
right: 0;
}
#containertwo{
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="...Search Book Title"/>
</form>
</div>
<ul>
<li>
<a class="link">
Home
</a>
</li>
<li>
<a class="link">
Categories
</a>
</li>
<li>
<a class="link">
Bestsellers
</a>
</li>
<li>
<a class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2>Best Selling Books Right Now</h2>
</div>
</div>
</div>
</body>
</html>
Image of the problem - http://i.imgur.com/g9ur5eS.png

Based upon the answer to my comment, you don't want sectionone to have position:fixed;. I have put /* ### */ next to CSS I have added, and commented out anything that needs removing.
Basically I've added some resetting rules to html/body and then added a 20% left margin to the wrapper. The other elements just flow next to it naturally.
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
}
#welcometext {
text-align: center;
font-style: italic;
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar input {
max-width: 95%;
}
#sectionone {
/*position: fixed;*/
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo {
float:;
width: 80%;
top: 0;
right: 0;
}
#containertwo {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br />Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="...Search Book Title" />
</form>
</div>
<ul>
<li> <a class="link">
Home
</a>
</li>
<li> <a class="link">
Categories
</a>
</li>
<li> <a class="link">
Bestsellers
</a>
</li>
<li> <a class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2>Best Selling Books Right Now</h2>
</div>
</div>
</div>

If you contain the <div id="sectionone"> and <div id="sectiontwo"> in a wrapping tag and apply the nav width as padding to this wrapper, then remove the fixed position from those two divs you should get what you're looking for.
http://jsfiddle.net/vf00h0zq/
body{
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li{
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link{
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
}
#welcometext{
text-align: center;
font-style: italic;
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar{
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar input{
max-width: 95%;
}
.content {
padding-left: 20%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header{
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0,0,0,0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#containertwo{
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="...Search Book Title" />
</form>
</div>
<ul>
<li> <a class="link">
Home
</a>
</li>
<li> <a class="link">
Categories
</a>
</li>
<li> <a class="link">
Bestsellers
</a>
</li>
<li> <a class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<section class="content">
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2>Best Selling Books Right Now</h2>
</div>
</div>
</section>
</div>

mobile sliding menu is not showing up

I ran into a problem. I've been trying to implement this "hamburger" mobile sliding menu into my website. The javascript is working, but the menu is not showing.
Anyone know of this? http://www.ymc.ch/en/how-to-make-a-hamburger-a-menu-for-mobile-websites
I've made my css and HTML code a bit different, but the jQuery is the same.
I've looked through this and I figured it might be a css conflict but I don't know what exactly. I have another stylesheet that uses .container, but I also don't know if that's the reason.
Here's my link: http://thestripedphoenix.com/
I wanted my website to be responsive while having the hamburger menu tool.
Please, help. I've spent days on this, and I don't think I'd be able to do this alone.
Thanks!!!!!
My HTML markup is here (index.html)
<!-- Mobile Page Layout
================================================== -->
<!--This wrapping container is used to get the width of the whole content-->
<div id="container">
<!--The Hamburger Button in the Header-->
<header>
<div id="logo"><img src="images/tsp+design-header-mobile.png" width="271" height="78"/>
</div>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</header>
<!--The mobile navigation Markup hidden via css-->
<nav class="mobileNav">
<ul>
<li>home</li>
<li>about</li>
<li>photography</li>
<li>illustration</li>
<li>animation</li>
<li>web design</li>
<li>resume</li>
<li>contact</li>
</ul>
</nav>
<!--The Layer that will be layed over the content
so that the content is unclickable while menu is shown-->
<div id="contentLayer"></div>
<!-- Primary Page Layout
================================================== -->
<div id="content">
<div class="container">
<div class="six columns">
<div id="header"><img src="images/tsp+design-header.png"/></div>
</div>
<div class="two columns" id="navigation">
<nav id="d-nav">
<dl>
<dt id="about">about</dt>
<dt id="portfolio">portfolio</dt>
<dt id="resume">resume</dt>
<dt id="contact">contact</dt>
</dl>
</nav>
</div>
<div id="space">
</div>
<div class="eight columns">
<div class="slider-wrapper">
<div id="slider1" class="nivoSlider theme-default">
<img src="images/gallery/image2-cropped.jpg"/>
<img src="images/gallery/image3-cropped.jpg"/>
<img src="images/gallery/image4-cropped.jpg"/>
<img src="images/gallery/image5-cropped.jpg"/>
<img src="images/gallery/image7-cropped.jpg"/>
</div>
</div>
</div>
<div class="eight columns">
<div class="slider-wrapper theme-default">
<div id="slider2" class="nivoSlider">
<img src="images/gallery/image8-cropped.png"/>
<img src="images/gallery/image10-cropped.png"/>
<img src="images/gallery/image12-cropped.png"/>
<img src="images/gallery/image13-cropped.png"/>
<img src="images/gallery/image15-cropped.png"/>
</div>
</div>
</div>
<div class="eight columns">
<div class="slider-wrapper theme-default">
<div id="slider3" class="nivoSlider">
<img src="images/gallery/image18-cropped.png"/>
<img src="images/gallery/image19-cropped.png"/>
<img src="images/gallery/image20-cropped.png"/>
</div>
</div>
</div>
<div class="eight columns">
<div class="slider-wrapper theme-default">
<div id="slider4" class="nivoSlider">
<img src="images/gallery/image21-cropped.png"/>
<img src="images/gallery/image22-cropped.png"/>
<img src="images/gallery/image24-cropped.png"/>
</div>
</div>
</div>
<div class="slider-wrapper theme-default">
<div id="slider5" class="nivoSlider">
<img src="images/gallery/image2-cropped.jpg"/>
<img src="images/gallery/image3-cropped.jpg"/>
<img src="images/gallery/image4-cropped.jpg"/>
<img src="images/gallery/image5-cropped.jpg"/>
<img src="images/gallery/image7-cropped.jpg"/>
<img src="images/gallery/image8-cropped.png"/>
<img src="images/gallery/image10-cropped.png"/>
<img src="images/gallery/image12-cropped.png"/>
<img src="images/gallery/image13-cropped.png"/>
<img src="images/gallery/image15-cropped.png"/>
<img src="images/gallery/image18-cropped.png"/>
<img src="images/gallery/image19-cropped.png"/>
<img src="images/gallery/image20-cropped.png"/>
<img src="images/gallery/image21-cropped.png"/>
<img src="images/gallery/image22-cropped.png"/>
<img src="images/gallery/image24-cropped.png"/>
</div>
</div>
<div id="space">
</div>
<div id="footer">
<img src="images/footer-line.png" width="960" height="25"></a>
about<span>|</span>portfolio<span>|</span>resume<span>|</span>contact
<p></p>
</div>
<div id="social">
<img src="images/behance-icon.png" width="30" height="30"></a><img src="images/dribbble-icon.png" width="30" height="30"></a><img src="images/linkedin-icon.png" width="30" height="30"></a><img src="images/youtube-icon.png" width="30" height="30"></a><img src="images/zazzle-icon.png" width="30" height="30"></a>
</div>
<div id="copyright">
<p>Copyright Michelle Shean, 2014</p>
</div>
</div><!-- .container-->
</div><!-- content -->
Part of my CSS (for mobile size)
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
/*
Setup a basic body
*/
body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: Helvetica; Arial; sans-serif;
font-size: 12px;
}
/*
Header is relative so z-index: 1 guarantees always displayed on top
*/
header {
background-color: #000000;
padding: 10px;
padding-bottom: 0px;
text-decoration: none;
position: fixed;
width: 100%;
z-index: 1;
-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}
#logo {
display: inline;
}
/*
using background color is important to cover the menu
position absolute isset to cover the whole viewport
*/
#content {
background-color: #000000;
font-family: 'league_gothicregular'; Helvetica; Arial; Sans-serif;
padding: 52px 10px 10px 10px;
position: relative;
max-width: 480px;
height: auto;
overflow-x: hidden;
-webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
}
/*
the hamburger button with a little gradient effekt
*/
#hamburger {
border-radius: 3px 3px 3px 3px;
cursor: pointer;
display: block;
float: right;
margin-right: 50px;
margin-top: 23px;
height: 24px;
padding: 3px 4px 3px;
position: relative;
width: 25px;
background: #4569b2;
background: -moz-linear-gradient(top, #000000 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000)color- stop(100%,#000000));
background: -webkit-linear-gradient(top, #000000 0%,#000000 100%);
background: -o-linear-gradient(top, #000000 0%,#000000 100%);
background: -ms-linear-gradient(top, #000000 0%,#000000 100%);
background: linear-gradient(to bottom, #000000 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
}
/*
The white stripes in the hamburger button
*/
#hamburger div {
background-color: #fff;
border: 1px solid #eee;
border-radius: 2px 2px 2px 2px;
height: 2px;
margin-top: 3px;
width: 90%;
}
/*
The navigation container in the background
*/
nav {
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
width: 70%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x:hidden;
overflow-y:auto ;
background: #3e3c3d;
background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e3c3d), color-stop(100%,#2d2c2d));
background: -webkit-linear-gradient(top, #3e3c3d 0%,#2d2c2d 100%);
background: -o-linear-gradient(top, #3e3c3d 0%,#2d2c2d 100%);
background: -ms-linear-gradient(top, #3e3c3d 0%,#2d2c2d 100%);
background: linear-gradient(to bottom, #3e3c3d 0%,#2d2c2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e3c3d', endColorstr='#2d2c2d',GradientType=0 );
}
/*
Style the navigation menu
*/
nav ul {
list-style: none;
margin: 0;
width: 100%;
padding: 0;
}
nav li {
position: relative;
font-size: 1em;
font-weight: bold;
border-bottom: 1px solid #222222;
border-top: 1px solid #444444;
padding: 15px;
}
nav li a {
color: #fff;
text-decoration: none;
}
/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
display: none;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
width: 30%;
z-index: 5;
min-height: 1062px;
}
#header {
display: none;
}
#logo {
display: inline;
}
#slider1 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
margin-top: 50px;
margin-bottom: 30px;
}
#slider2 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
margin-top: 50px;
}
#slider3 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
}
#slider4 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
}
#slider5 {
display: inline;
position: relative;
width: auto;
float: left;
clear: both;
}
#about-pic {
position: relative;
margin-left: 10px;
margin-top: 10px;
min-width: 220px;
max-width: 220px;
float: left;
}
#section-title-blue {
position: relative;
clear: both;
margin-left: 10px;
width: 800px;
min-width: 480px;
height: 60px;
float: left;
font-size: 2em;
color: #00CBD4;
}
#section-title-green {
position: relative;
clear: both;
margin-top: 5px;
margin-left: 10px;
width: 800px;
min-width: 480px;
height: 60px;
float: left;
font-size: 2em;
color: #2AFF38;
}
#about-pic img {
width: 100%;
}
#about-text {
position: relative;
margin-top: 30px;
float: right;
width: 100%;
font-size: 1.1em;
font-family: Helvetica, Arial, Sans-serif;
}
#signature {
font-family: Helvetica, Arial, Sans-serif;
float: left;
margin-top: 40px;
max-width: 120px;
max-height: 120px;
}
#portfolio-gallery {
display: none;
}
#portfolio-nav {
display: none;
}
#mobile-gallery {
display: inline-block;
position: relative;
margin-top: 50px;
clear: both;
padding: 20px;
padding-right: 30px;
padding-top: 10px
max-width: 480px;
max-height: 720px;
}
#mobile-gallery img {
width: auto;
}
/* line 180, ../sass/screen.sass */
.image-row {
*zoom: 1;
margin-bottom: 20px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass /stylesheets/compass/utilities/general/_clearfix.scss */
.image-row:after {
content: "";
display: table;
clear: both;
}
/* line 184, ../sass/screen.sass */
.example-image-link {
display: inline-block;
margin: 0 10px 20px 10px;
line-height: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
border: 2px solid #5e5e5e;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
/* line 191, ../sass/screen.sass */
.example-image-link:hover {
border: 2px solid #2AFF38;
}
/* line 194, ../sass/screen.sass */
.example-image {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
#subheading {
position: relative;
clear: both;
max-width: 360px;
min-width: 430px;
height: 40px;
margin-top: 20px;
margin-left: 10px;
float: left;
font-size: 1.5em;
}
#resume-text {
position: relative;
max-width: 360px;
max-height: 130px;
margin-top: 20px;
margin-left: 10px;
float: left;
font-family: Helvetica, Arial, Sans-serif;
}
#resume-note {
position: relative;
clear: both;
float: left;
margin-left: 70px;
margin-top: 30px;
margin-bottom: 30px;
width: 600px;
height: 30px;
font-family: Helvetica, Arial, Sans-serif;
font-size: 1.2em;
}
#resume-note {
position: relative;
clear: both;
float: left;
margin-left: 10px;
margin-top: 30px;
margin-bottom: 30px;
width: 600px;
height: 30px;
font-family: Helvetica, Arial, Sans-serif;
font-size: 1em;
}
#form {
position: relative;
max-width: 450px;
min-width: 460px;
height: 820px;
margin-top: 20px;
margin-left: 10px;
margin-bottom: 40px;
float: left;
clear: both;
font-size: 1.2em;
padding: 20px;
border: none;
}
input, textarea {
padding: 5px;
margin: 10px;
font-family: Helvetica, Arial, Sans-serif;
font-size: medium;
font-weight: bold;
outline: none;
}
input[type=text], textarea {
width: 220px;
background-color: #FFFFFF;
}
input[type=submit] {
width: 100px;
background-color: #2AFF38;
border: 1px solid #000000;
font-size: large;
color: #FFFFFF;
margin-bottom: 30px;
}
input[submit]:active {
background-color: #00CBD4;
}
h1 {
font-family: 'league_gothicregular', Arial, sans-serif;
font-size: 2.1em;
}
#footer {
position: relative;
margin-top: 10px;
max-width: 960px;
max-height: 80px;
float: left;
text-align: center;
font-size: 1.5em;
}
#footer img {
width: 100%;
}
#social {
position: relative;
clear: both;
max-width: 200px;
height: 40px;
margin: auto;
padding-bottom: 10px;
}
#social img {
margin: 5px;
display: inline-block;
}
#copyright {
position: relative;
clear: both;
text-align: center;
margin: auto;
min-width: 30px;
padding-bottom: 15px;
font-size: 1.2em;
}
a:link {
color: #FFFFFF;
}
a:active {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
span {
margin: 5px;
}
}
Here is the head of my HTML markup:
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>the striped phoenix | Michelle Shean</title>
<meta name="description" content="portfolio">
<meta name="author" content="portfolio">
<body oncontextmenu="return false;">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
<!--Using jQuery and jQuery UI for display effects
================================================== -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--Using the hamburger menu display code
=================================================== -->
<script src="javascripts/hamburger.js"></script>
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/slider-themes/default/default.css" type="text/css" media="screen" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
The jQuery code is the same as from your demo.
jQuery(document).ready(function() {
//Open the menu
jQuery("#hamburger").click(function() {
//set the width of primary content container -> content should not scale while animating
var contentWidth = jQuery('#content').width();
//set the content with the width that it has originally
jQuery('#content').css('width', contentWidth);
//display a layer to disable clicking and scrolling on the content while menu is shown
jQuery('#contentLayer').css('display', 'block');
//disable all scrolling on mobile devices while menu is shown
jQuery('#container').bind('touchmove', function(e){e.preventDefault()});
//set margin for the whole container with a jquery UI animation
jQuery("#container").animate({"marginLeft": ["70%", 'easeOutExpo']}, {
duration: 700
});
});
//close the menu
jQuery("#contentLayer").click(function() {
//enable all scrolling on mobile devices when menu is closed
jQuery('#container').unbind('touchmove');
//set margin for the whole container back to original state with a jquery UI animation
jQuery("#container").animate({"marginLeft": ["0", 'easeOutExpo']}, {
duration: 700,
complete: function() {
jQuery('#content').css('width', 'auto');
jQuery('#contentLayer').css('display', 'none');
}
});
});
});

did you use the jQuery part for this like the onclick animation to show the menu.
please see here:
demo
fiddle

JS Dropdown Menu

Ok, so I know that this seems like I am just being lazy but I am so close to ripping out all of my hair! I have trawled through so many websites and after 24 hours need help from the Stack!
I am trying to make a dropdown menu that when a level 1 parent is CLICKED all of its children appear below pushing the page content down and when the next level 1 parent is clicked the previous children disappear and the new ones come in.
From my research I know that I need to utilize toggle but I have confused the hell out of myself and I am not much of a JS guy. I am also aware that I will need to use overflow hidden in my css for the midnav. I would also like to use some of the jQuery effects to slide the children ul up and down, would this mean I would have to write the whole thing using jQuery?
Any help would be greatly appreciated. an example of what I want to do is here at
http://www.andersenwindows.com/
and here is what I have so far:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/formhandler.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<link href="CSS/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="CSS/fonts.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="wrapper">
<div id="topbanner"></div>
<div id="header">
<div id="navigation">
<div id="topnav">
<div id="left-side">
<div id="left-menu">
<ul>
<li>Link l1</li>
<li>Link l2</li>
</ul>
</div>
</div>
<div id="logo"><img src="images/general/nav_logo.png" /> </div>
<div id="right-side">
<div id="right-menu">
<ul>
<li>Link r1</li>
<li>Link r2</li>
</ul>
</div>
</div>
</div>
<div id="mid-nav">
<ul id="midnav">
<li><a href="#" >About</a></li>
<li><a href="#" >Home</a>
<ul>
<li>test2</li>
<li>test3</li>
<li>test1</li>
</ul>
</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--START 100% HERE!-->
</div>
</div>
<div id="footer">
<div class="social-images"><img src="images/socialmedia/facebook.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/google.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/twitter.gif" height="40" width="40"/></div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
margin: 0 auto;
}
/* NAVIGATION */
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
#topbanner{
width:100%;
height:54px;
background-color:#f1f2f2;
position:absolute;
z-index:-1000;
}
#topnav {
margin: 0px auto;
width: 1050px;
height: 50px;
padding-top: 4px;
background-color: #f1f2f2;
}
#left-side {
float: left;
width: 439px;
}
#right-side {
float: right;
width: 439px;
}
#logo {
padding-top: 7px;
float: left;
width: 15%;
}
#left-menu {
}
#left-menu ul {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 0px;
}
#left-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#left-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
#right-menu {
}
#right-menu ul {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#right-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#right-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav {
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid thin #c8c8c8;
}
ul#midnav li {
display: inline;
}
ul#midnav li a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 18px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav li ul{
line-height: 30px;
padding: 0;
position: absolute;
left: 0; top:100px;
display: none;/* --Hide by default--*/
width: 970px;
height:40px;
background: #f1f2f3;
color: #fff;
}
/* NAVIGATION END */
/* FOOTER BEGIN */
#footerwrapper, #push {
height: 100px; /* .push must be the same height as .footer */
background-color: #f1f2f2;
}
#footer {
border-top: solid thin #c8c8c8;
width: 100%;
height: 100px;
margin: 0 auto;
background-color: #f1f2f2;
}
#social-wrapper {
width: 130px;
height: 100px;
float: right;
position: relative;
top: 40px;
}
.social-images {
border-style: solid;
border-width: 1px;
border-color: #f1f2f2;
width: 40px;
height: 40px;
float: left;
}
/*FOOTER END *?
Thanks,
C

I got lost with all the left/right nav stuff so I just did one with the middle nav. You can think of it as a jumping off point. http://jsfiddle.net/MatthewDavis/4syjv/
Here's the JS... it's pretty generic but you should be able to edit to suit.
$(document).ready(function () {
$('a').on('click', function(event){
event.preventDefault();
$('#mid-nav > ul').find('ul').slideUp(
function(){
$(this).closest('li').find('ul').slideToggle();
});
});
});

Are you looking for something like:
$('#div1').click(function() {
if( /* check if already visible */)
$('div1').toggle(); //also do-able with $('div1').slideToggle();
$('div2').hide();
}
but first you would hide all your divs first and check the current div