JS Dropdown Menu - javascript

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

Related

My HTML div tag won't include the list and also won't show the bottom border

My div tag named 2nd-bar won't show up below navigation bar and also won't show bottom border and due to that also my list elements won't come inside it.
I am new to HTML and CSS so would be glad to get some help, thank you here is my code.
<htmL>
<head>
<title>Lawyer Up</title>
</head>
<link rel="shortcut icon" type="image/png" href="file:
/User/rahul%20saini/Desktop/Testproject1/index.png"/>
<link href="https://fonts.googleapis.com/css?family=Oxygen"
rel="stylesheet">
<style type = "text/css">
body{
/* background-color:#F8B195; */
}
#navibar{
position: relative;
width: 100%;
height: 45px;
/* background-color: #355C7D; */
padding: 0px;
margin: 0px;
}
#logo{
width:45px;
height: 45px;
float: left;
padding-right:4px;
}
.give-border{
border-bottom-color: darkgrey;
border-bottom-style: inset;
border-bottom-width: medium;
width: 1px;
height: 2px;
}
#searchlogo{
float:right;
width: 25px;
height: 25px;
position: absolute;
top: 2px;
left: 160px;
}
.border{
float:right;
position: absolute;
top: 0px;
left: 154px;
border-left-color:darkslategrey;
border-left-style: solid;
height: 30px;
border-left-width: thin;
}
#loginlogo{
float:right;
position: relative;
top:-24px;
left: -10px;
border-left-color: darkslategray;
border-left-style: dotted;
}
.bordertop{
float: left;
border: 1px;
border-left-color: #302929;
border-left-style: solid;
height: 45px;
padding-left: 4px;
}
#thename{
font-size: 2em;
font-weight: bolder;
font-family: 'oxygen',sans-serif;
color: #000033;
padding-left: 3px;
}
#2ndbar{
float: left
margin: 0px;
width: 20px;
height: 20px;
background-color: antiquewhite;
border-bottom-color: dimgrey;
border-bottom-style: double;
border-bottom-width: thin;
}
#navibar a{
float:right;
font-size: 150%;
color:#F67280;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
a:hover{
font-size: 150%;
text-decoration: underline;
color: wheat;
background-color: skyblue;
background-size: contain;
transition-property: background;
transition-duration: 0.8s;
}
body{
margin: 0px;
padding: 0px;
}
h1{
text-align: center;
font-size: 50px;
font-weight: 100;
font-family: sans-serif;
color: brown;
}
.input{
position:relative;
left: 1100px;
width: 185px;
height: 30px;
top:6px;
}
.input input{
position: relative;
height: 30px;
width: 150px;
top:-45px;
background-color: #E9E9E9;
}
ul{
list-style-type: none;
}
.list{
float:left;
padding-right: 10px;
border-right-style: solid;
border: 1px;
border-right-width: thin;
border-right-color: aqua;
}
</style>
<body>
<div id="fullpage">
<div id="navibar" class="give-border">
<img id="logo" src="logo.png">
<div id="thename" >
<span class="bordertop" >Lawyer Up</span>
</div>
<div class="input">
<form>
<input type="search" placeholder="Search">
</form>
<div class="border">
</div>
<img id="searchlogo" src="search.png">
</div>
<div id="loginlogo">
<a href="login.html">
<img src="login.png">
</a>
</div>
</div>
<div id="2ndbar">
<ul>
<li class ="list">name</li>
<li class="list">another name</li>
<li class="list">one more name</li>
</ul>
</div>
<!-- <h1> Welcome </h1> -->
</div> <! div=fullpage >
</body>
</htmL
the problem is the the 2nd bar which isn't working Idk why, I have made some changes but I still can't get it why, I think it might be due to the positions I gave for divs, but I tried that too so it would be a great help if anyone can help me or tell me what am I doing wrong here.

In HTML you cannot begin an id with a number. Try changing the id from 2ndbar to bar2 and your styles should affect it from that point.

how to move buy button underneath drop down box?

I am trying to move a button underneath the drop down box in my product page. so that the information is presented with one information per row. I tried placing a div tag around the button to see if that be seen as a separate element that goes below the previous element but that did not work so I am lost in what to do to make the buy button to go underneath the size and 1 boxes.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" >
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<br>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
*{
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
padding: 0;
border: 0;
}
h1{
font-size: 130%;
}
h2{
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p{
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product{
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2{
width: 100%;
height: 100%;
float: left;
}
.product-image{
/*border: 1px dotted #aaa;*/
}
.product-image .bg{
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator{
text-align:center;
}
.dot:hover{
background-color: #444;
}
.product-info{
padding: 0px 8%;
}
.product-info h1{
margin-bottom: 5px;
}
.product-info h2{
margin-bottom: 50px;
}
.product-info .select-dropdown{
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select{
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active, select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn{
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover{
background-color: #555;
}
.product-info p{
margin-bottom: 30px;
}
.product-info p a{
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover{
opacity: .7;
}
.product-info ul{
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li{
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before{
content:"\2022";
margin-right: 20px;
}
.product-info a.share-link{
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover{
border-bottom: 2px solid #aaa;
}
#footer {
width:100%;
background-color:#222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear:both;
height:10%;
}

There are multiple things wrong here.
The <br> tag should not be used for element positioning. This should be strictly reserved for text.
If you don't want your elements to display a line, it's probably a good idea to not set their display property to an inline-block for starters.
There are even some syntactical errors (eg. excessive </div> tag and what not). In general, I'd recommend writing your code in some sort of linter as it has some readability issues.
I did the baremost minimum of removing the unnecessary <br> tag and added clear:both to the .Buy class formatting. Producing the desired result.
body {
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 130%;
}
h2 {
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p {
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.Buy {
clear: both;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product {
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2 {
width: 100%;
height: 100%;
float: left;
}
.product-image {
/*border: 1px dotted #aaa;*/
}
.product-image .bg {
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator {
text-align: center;
}
.dot:hover {
background-color: #444;
}
.product-info {
padding: 0px 8%;
}
.product-info h1 {
margin-bottom: 5px;
}
.product-info h2 {
margin-bottom: 50px;
}
.product-info .select-dropdown {
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select {
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active,
select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn {
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover {
background-color: #555;
}
.product-info p {
margin-bottom: 30px;
}
.product-info p a {
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover {
opacity: .7;
}
.product-info ul {
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li {
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before {
content: "\2022";
margin-right: 20px;
}
.product-info a.share-link {
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover {
border-bottom: 2px solid #aaa;
}
#footer {
width: 100%;
background-color: #222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear: both;
height: 10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet">
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {
plusSlides(1)
}, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>

You have <br/> tag before button, just add style to it like this
<br style="clear: both;" />
and you should be fine :)

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

How do you go to a certain section of the website by clicking on a link?

I want to go to a specific section of my website when I click on the link in the menu bar for that section of the website, so you do not have to scroll through all the content, but to have links to the different sections. I've read that you can do this with jQuery and make an animation for it so that the page can smoothly go to that section of the website.
Here's the HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="java.js"></script>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>Test Website</title>
<meta name="" content="">
<script type="text/javascript">
</script>
</head>
<body>
<header>
<div id="title">
<h1 class="headertext">My Test Website</h1>
</div>
<div id="menubar">
<ul>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
</ul>
</div>
</header>
<div class="hide">
</div>
<div id="container">
<div id="leftmenu">
<ul>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
</ul>
<div id="triangle"></div>
</div>
<div id="content">
<h1>Contentpage</h1></br>
Picture slideshow
</br>
</br>
<div class="slider">
<img id="1" src="images/car1.jpg" border="0" alt="car1"/>
<img id="2" src="images/car2.jpg" border="0" alt="car2"/>
<img id="3" src="images/car3.jpg" border="0" alt="car3"/>
<img id="4" src="images/car4.jpg" border="0" alt="car4"/>
<img id="5" src="images/car5.jpg" border="0" alt="car5"/>
</div><!--slider end-->
<div class="shadow"></div>
<div class="borderbottom"></div>
</div><!--content div-->
</div>
</body>
</html>
And here is the CSS code:
*{
margin: 0 auto 0 auto;
text-align: left;
color: #ffffff;
}
body{
margin: 0;
text-align: left;
font-size: 13px;
font-family: arial, helvetica, sens-serif;
color: #ffffff;
width: 1200px;
height: auto;
background: #f4f4f4;
}
header {
position: fixed;
width: 100%;
top: 0;
background: rgba(0,0,0,.8);
z-index: 10;
}
h1{
color: black;
text-align: center;
}
.hide
{
position: fixed;
width: 100%;
top: 0;
background: rgba(255,255,255,1);
z-index:5;
height: 123px;
}
.headertext{
margin-top: 15px;
text-align: center;
color: white;
}
#title{
font-size: 20px;
margin: -10px 0 30px 0;
width: 100%;
height: 70px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#menubar{
margin-top: 10px;
float: left;
clear: both;
width: 100%;
height: 20px;
list-style: none;
border-bottom: 2px solid #010000;
}
#menubar ul{
list-style: none;
margin-top: -15px;
text-align: center;
}
#menubar ul li{
list-style: none;
display: inline;
padding-right: 80px;
}
#menubar ul li a{
color: #ffffff;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
#menubar ul li a:hover{
border-bottom: 2px solid #ffffff;
}
#container{
width: 1200px;
height: 1400px;
}
#leftmenu{
position: fixed;
margin-top: 123px;
margin-left: 50px;
padding-top: 20px;
float: left;
width: 160px;
height: 350px;
list-style: none;
background: rgba(0,0,0,0.8);
color: #ffffff;
border-left: 2px solid #010000;
border-right: 2px solid #010000;
}
#leftmenu ul li{
display: block;
padding-bottom: 50px;
}
#leftmenu ul li a{
font-weight: bold;
text-decoration: none;
color: #ffffff;
font-size: 15px;
text-align: center;
}
#leftmenu ul li a:hover{
border-bottom: 2px solid #ffffff;
transition: opacity .5s ease-in;
opacity: 1;
}
#triangle{
margin-top: 12px;
margin-left: -1px;
width: 0px;
height: 0;
border-top: 80px solid rgba(0,0,0,0.8);
border-left: 82px solid transparent;
border-right: 82px solid transparent;
}
#content{
text-align: left;
margin-left: 100px;
width: 1000px;
padding-top: 150px;
padding-left: 160px;
color: #000000;
font-weight: bold;
text-align: center;
font-size: 15px;
}
.slider{
margin-top: 20px;
width: 600px;
height: 400px;
overflow: hidden;
margin: auto;
border-radius: 10px;
vertical-align: middle;
}
.shadow{
background-image:url(../images/shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 850px;
height: 144px;
vertical-align: middle;
margin-top: -50px;
}
.slider img{
width: 600px;
height: 400px;
display: none;
}
.borderbottom{
border: 6px solid rgba(0,0,0,0.8);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 1000px;
position: fixed;
margin-top: 20px;
}

If you have jQuery loaded you could try like this, no plugin required just jquery will do...
HTML:
<div id="menubar">
<ul>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
........all the menu items-------
</ul>
JS:
$('#menubar ul li a').on('click',function(event){
var $anchor = $(this);
$('html, body').animate({
scrollTop: $($anchor.attr('href')).offset().top + "px"
}, 1500);
event.preventDefault();
});
This is the working fiddle

The standard way is to use named anchors:
section
This link will navigate to index.html and the browser will scroll to the element with ID or NAME section if it exists, f.ex:
<section id="section"></section>
It also works for the name attribute, but it’s rarely used these days:
<section name="section"></section>
If you want jQuery to animate this behaviour, it’s a good idea to start with the standard implementation above, then add some enhanced functionality, f.ex:
$('#menubar').on('click', 'a', function(e) {
e.preventDefault(); // prevents default scrolling
var y = $(this.hash).offset().top; // grabs the #id element offset location
$('html,body').animate({scrollTop: y}); // animate the scroll
});

To scroll to a particular element on the page, the element must have an ID :
<a class="scroll" href="#myElement">Link</a>
<div id="myElement"></div>
This anchor will make the document scroll to the top of the element #myElement.
Then animate it with JS :
$('a.scroll').click(function(){
var href = $(this).attr('href');
var dest = $(href).offset().top;
$('html, body').animate({
scrollTop: dest;
}, 1000);
return false;
});

check out the scrolTo in jquery
take a look at this : http://demos.flesler.com/jquery/scrollTo/

Categories

Resources