We Keep Coding

I'm trying hide div 1 when hovering it, then show div 2 when div 1 is hidden

I'm in need of hiding a div on mouse hover and then show another div instead, I'm trying to achieve this by using css but when I test the code, both divs are hidden. Maybe this can only be achieved using jQuery?
I wrote down this code in pure CSS/HTML:
.responsive-banner {
width: 100%;
height: 154px;
overflow: hidden;
margin: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.responsive-banner a {
text-decoration: none;
color: #fff;
}
.banner-description {
/*width:70%;
height:127px; */
display: flex;
align-items: center;
}
.banner-description-2 {
padding: 7px;
max-height: 127px;
overflow: hidde
}
.banner-title {
font-family: "Roboto", "Arial", sans-serif;
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 5px;
text-shadow: #000 1px 1px 1px;
color: #000;
}
.banner-txt {
font-family: "Roboto", "Arial", sans-serif;
font-size: 1.11rem;
color: #000;
}
.banner-btn {
background: #279fba;
float: right;
margin-left: 20px;
padding: 12px;
font-size: 18px;
border-radius: 4px
}
a.banner-btn {
color: #FF0000;
padding: 3px 5px;
}
a.banner-btn:hover {
color: #5ca5ff;
}
#banneryoutube1 {
bottom: 0;
left: 0;
float: left;
background-image: url(/image1.webp);
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
width: 246px;
height: 138px;
background-size: 246px 138px;
background-color: transparent;
}
#banneryoutube12 {
bottom: 0;
left: 0;
float: left;
background-image: url(/image2.webp);
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
width: 246px;
height: 138px;
background-size: 246px 138px;
background-color: transparent;
/* animation: wahooMario 0.12s linear 1;*/
}
#showbannerinarticle1 {
display: block
}
#showbannerinarticle2 {
display: none
}
#showbannerinarticle1:hover {
display: none
}
#showbannerinarticle2:hover {
display: block
}
<div id="showbannerinarticle1" class="responsive-banner">
<a href="/index.html" rel="nofollow" target="_blank">
<div id="banneryoutube1" /></div>
<div class="banner-description">
<div class="banner-description-2">
<div class="banner-title">
1</div>
<div class="banner-txt">LOREM IPSUM
</div>
</div>
</div>
</a>
</div>
<div id="showbannerinarticle2" class="responsive-banner">
<a href="/index2.html" rel="nofollow" target="_blank">
<div id="banneryoutube12" /></div>
<div class="banner-description">
<div class="banner-description-2">
<div class="banner-title">
1</div>
<div class="banner-txt">LOREM IPSUM
</div>
</div>
</div>
</a>
</div>
How can I proceed with this?
Basically when I'm creating is an animated banner.

The issue may be that CSS cannot consider something to be hovered unless it is visible, and so it gets confused.
I would wrap both in another div and target the CSS to the wrapper, like this:
.wrapper:hover .hide-me {
display: none;
}
.show-me {
display:none;
}
.wrapper:hover .show-me {
display: block;
}
<div class="wrapper">
<div class="hide-me">Content 1</div>
<div class="show-me">Content 2</div>
</div>

Heres some workign example you can play with using jquery.
$(document).ready(function(){
$(".div1").hover(function(){
$(".div2").show();
$(".div1").hide();
});
$(".div2").hover(function(){
$(".div1").show();
$(".div2").hide();
});
});
.div1 {
background-color: blue;
cursor: pointer;
color: white;}
.div2 {
background-color: yellow;
display:none;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="div1">
<h1>This is my div 1</h1>
</div>
<div class="div2">
<h1>div 2 is now showing</h1>
</div>

I would use:
document.getElementById('firstDivId').style.display = "none";
document.getElementById('secondDivId').style.display = "block";
// Switch these around when doing the opposite

Display separate sections of an html page on a button click [duplicate]

This question already has answers here:
JavaScript hide/show element
(13 answers)
Closed 2 years ago.
Good day,
I'm tring to display separately two sections (p1 and p2) of my html page. In other words, when I click on 1st button, I would like section "p1" to be displayed and section "p2" to be hidden, and conversely when I click on button p2, I would like only section "p2" to be visible.
So far, I am not very successful in my attempts.
Do you have any hints which would be of great help to progress ?
Many thanks for your time and best wishes
Here below is my html code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/mystyle.css?rnd=999" />
<script type="text/javascript" src="scripts/date_time.js"></script>
<script type="text/javascript" src="scripts/demo.js"></script>
</head>
<body>
<div class="div_screen">
<div class="div_screen_left_frame">
<div class="div_screen_icon">
<img src="assets/icons/logo_Domoos.png" alt ="" style="width:80px;height:58px;">
</div>
<div class="div_screen_nav1">
<ul id="menu">
<button class="cupid-blue" href="#p1"> Display section 1 (p1)
<button class="cupid-blue" href="#p2"> Display section 2 (p2)
</ul>
</div>
</div>
<div class="div_screen_contents_frame">
<div class="page" id="p1">
<section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the first part I would like to show separately</span> </section>
</div>
<div class="page" id="p2">
<section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the second part I would like to show separately</span> </section>
</div> </div>
<div class="div_screen_up_frame">
<div class="div_current_meteo_frame">
<div class="div_current_meteo_icon">
<img src="assets/meteo_icons/eclaircies-big.png" alt="" style="width:55px;height:55px;">
</div>
<div class="div_current_meteo_temperature">-23°C</div>
<div class="div_current_meteo_condition">Nuit avec averses de neige faible</div>
<div class="div_sunrise_sunset">
<img src="assets/icons/sun_icon.png" alt="" width="14" height="14">↑ 05:38 <img src="assets/icons/sun_icon.png" alt="" width="14" height="14">↓ 21:16
</div>
<div style="width:50px;height:50px;border:1px solid #000;"></div>
</div>
<div class="div_forecast_meteo_frame">
<div class="div_forecast_meteo_day1">
<div class="div_forecast_weekday">Vendredi</div>
<div class="div_forecast_date">31.05.2020</div>
<div class="div_forecast_icon">
<img src="assets/meteo_icons/eclaircies.png" alt="" width="23" height="23">
</div>
<div class="div_forecast_text">Nuit avec développement nuageux</div>
<div class="div_forecast_temperature">24°C | 15°C</div>
</div>
<div class="div_forecast_meteo_day2">
<div class="div_forecast_weekday">Samedi</div>
<div class="div_forecast_date">99.99.9999</div>
<div class="div_forecast_icon">
<img src="assets/meteo_icons/eclaircies.png" alt="" width="23" height="23">
</div>
<div class="div_forecast_text">Nuit avec averses de neige faible</div>
<div class="div_forecast_temperature">-24°C | -20°C</div>
</div>
<div class="div_forecast_meteo_day3">
<div class="div_forecast_weekday">Dimanche</div>
<div class="div_forecast_date">77.77.7777</div>
<div class="div_forecast_icon">
<img src="assets/meteo_icons/eclaircies.png" alt="" width="23" height="23">
</div>
<div class="div_forecast_text">Nuit avec averses de neige faible</div>
<div class="div_forecast_temperature">-24°C | -20°C</div>
</div>
</div>
<div class="div_screen_datetime">
<div id="date">
<script type="text/javascript">window.onload = getDate('date');</script>
</div>
<div id="time">
<script type="text/javascript">window.onload = getTime('time');</script>
</div>
</div>
</div>
<div style="width:900px;height:540px;border:0px solid #ffaacc;"></div>
</div>
</body>
</html>
Not quite sure if the css might be helpful, but here it is :
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 19.0%;
padding: 2px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
.div_screen {
font-family:"Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 90%;
color: blue;
position: fixed;
top: -3;
left: -3;
width: 1005px;
height: 540 px;
border: 2px solid #de2be4;
}
.div_screen_datetime
{
position: absolute;
right: 1px;
top: 0;
width: 170px;
border: 1px solid red;
font-size: 120%;
text-align: right;
height: 95px; /*50*/
}
.div_screen_up_frame {
position: absolute;
left: 150px;
top: 1px;
width: 852px;
height:95px;
border: 1px solid blue;
}
.div_screen_left_frame {
position: absolute;
left: 1px;
top: 1px;
width: 146px;
height:536px;
border: 1px solid blue;
}
.div_screen_contents_frame {
position: absolute;
left: 150px;
top: 99px;
width: 852px;
height:438px;
border: 1px solid blue;
}
.div_screen_icon {
position: absolute;
left: 0px;
top: 0px;
width: 145px;
height: 95px;
border: 1px solid black;
}
.div_screen_nav1 {
position: absolute;
left: 0px;
top: 95px;
width: 145px;
height: 300px;
border: 1px solid black;
}
.div_screen_nav2 {
position: absolute;
left: 0px;
top: 398px;
width: 145px;
height: 137px;
border: 1px solid black;
}
.div_current_meteo_frame {
position: absolute;
left: 0px;
top: 0px;
width: 185px;
height:95px;
border: 1px solid black;
}
.div_sunrise_sunset {
position: absolute;
font-size: 75%;
left: 2px;
top: 72px;
}
.div_current_meteo_icon {
position: absolute;
left: -5px;
top: 1px;
width: 100px;
}
.div_current_meteo_temperature {
position: absolute;
font-size: 250%;
/*text-align: center;*/
left: 80px;
top: 0px;
color: black;
}
.div_current_meteo_condition {
position: absolute;
font-size: 75%;
/*text-align: center;*/
left: 2px;
top: 55px;
color: black;
}
.div_forecast_meteo_frame {
position: absolute;
left: 186px;
top: 0px;
width: 492px;
height:95px;
border: 1px solid black;
}
.div_forecast_meteo_day1 {
position: absolute;
font-size: 95%;
left: 1px;
top: 1px;
width: 489px;
height:29px;
border: 1px solid #73AD21;
}
.div_forecast_meteo_day2 {
position: absolute;
font-size: 95%;
left: 1px;
top: 31px;
width: 489px;
height:29px;
border: 1px solid #73AD21;
}
.div_forecast_meteo_day3 {
position: absolute;
font-size: 95%;
left: 1px;
top: 61px;
width: 489px;
height:29px;
border: 1px solid #73AD21;
}
.div_forecast_weekday {
position: absolute;
font-size: 100%;
color: black;
left: 0px;
top: 2px;
text-align: left;
border: 1px solid yellow;
}
.div_forecast_date {
position: absolute;
font-size: 100%;
color: black;
left: 65px;
top: 2px;
text-align: left;
border: 1px solid yellow;
}
.div_forecast_icon {
position: absolute;
font-size: 100%;
color: black;
left: 138px;
text-align: left;
border: 1px solid yellow;
}
.div_forecast_text {
position: absolute;
font-size: 100%;
color: black;
left: 165px;
top: 2px;
text-align: left;
border: 1px solid yellow;
}
.div_forecast_temperature {
position: absolute;
font-size: 100%;
color: black;
right: 1px;
top: 2px;
text-align: right;
border: 1px solid yellow;
}
button.cupid-blue {
background-color: #d7e5f5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
border-top: 1px solid #abbbcc;
border-left: 1px solid #a7b6c7;
border-bottom: 1px solid #a1afbf;
border-right: 1px solid #a7b6c7;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
color: #1a3e66;
font: normal 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 6px 0 3px 0;
text-align: center;
text-shadow: 0 1px 1px #fff;
width: 140px;
height: 40px;
margin-top: 5px;
margin-bottom: 5px;
left: 5 px;
}
ul {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
margin: auto;
width: 10%;
padding: 0;
text-align: center;
}

just find the clicked item related div and show it and hide the other one.
I have created the logic, just use it in your code
$(document).ready(function(){
$('#menu button').click(function(){
var hrefId = $(this).attr('href');
$('.div_screen_contents_frame .page').hide();
$('.div_screen_contents_frame').find(hrefId).show();
});
});
.page{display: none;}
.page.active {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<button class="cupid-blue" href="#p1"> Display section 1 (p1)
<button class="cupid-blue" href="#p2"> Display section 2 (p2)
</ul>
</div>
</div>
<div class="div_screen_contents_frame">
<div class="page active" id="p1">
<section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the first part I would like to show separately</span> </section>
</div>
<div class="page" id="p2">
<section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the second part I would like to show separately</span> </section>
</div>
use below part as it is in your code, as you asked in Comment
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>$(document).ready(function(){
$('#menu button').click(function(){
var hrefId = $(this).attr('href');
$('.div_screen_contents_frame .page').hide();
$('.div_screen_contents_frame').find(hrefId).show();
});
});</script>
as per our Discussion I am adding a pure JS solution here. Check it.
function toggleDisplay(className, displayState){
var elements = document.getElementsByClassName(className)
for (var i = 0; i < elements.length; i++){
elements[i].style.display = displayState;
}
}
function toggle(){
document.onclick = function(e) {
if (e.target.tagName == 'BUTTON') {
var href = e.target.getAttribute("href");
toggleDisplay('page', 'none');
document.getElementById(href).style.display = 'block';
}
}
}
.page{display: none;}
.page.active {display: block;}
<ul id="menu">
<button class="cupid-blue" href="p1" id="btnOne" onclick="toggle(this)"> Display section 1 (p1)</button>
<button class="cupid-blue" href="p2" id="btnTwo" onclick="toggle(this)"> Display section 2 (p2)</button>
</ul>
</div>
</div>
<div class="div_screen_contents_frame">
<div class="page active" id="p1">
<section class="icon fa fa-bolt" id="pOne"><span class="title">Bolt</span><span class="hint">This is the first part I would like to show separately</span> </section>
</div>
<div class="page" id="p2">
<section class="icon fa fa-bolt" id="pTwo"><span class="title">Bolt</span><span class="hint">This is the second part I would like to show separately</span> </section>
</div>
</div>

Make button close when clicked outside of content

I would like to do when clicking outside the menu area when it is already open, it closes itself. If anyone can help me since I do not understand anything JavaScript thanks.. You can see my website that this is being developed as a group project for a final course presentation here and see the button working where says MAIS
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
.collapsible {
cursor: pointer;
border: none;
outline: none;
color: white;
background-color: inherit;
text-decoration: none;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
font-family: Arial;
display: block;
height: 65px;
padding: 22.5px 16px;
margin-left: 35px;
transition: all .3s;
width: 80px;
}
.collapsible:hover {
color: #08b0ff;
}
.collapsible:active {
color: #08b0ff;
}
.content {
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
top: 65px;
background-color: #f9f9f9;
width: 1170px;
left: -300px;
}
.content {
float: left;
overflow: hidden;
}
.content {
position: absolute;
top: 65px;
background-color: #f9f9f9;
width: 1170px;
left: -300px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1000;
margin: 0 auto;
}
.content .header {
background-color: rgb(60, 60, 60);
;
padding: 16px;
color: white;
height: 70px;
}
<li>
<div class='dropdown'>
<button class='collapsible'>Mais
<i class='fa fa-caret-down' style='float:right; padding-top: 1.5px;padding-bottom: 1.5px;'/>
</button>
<div class='content'>
<div class='bottom-border2' />
<div class='header'>
<h2 style='color:#fff; '>Categorias</h2>
</div>
<div class='row'>
<div class='column'>
<h3 style='color:#fff;'>Inovação</h3>
<div style='background-color: rgb(97, 255, 0);height: 2px; width: 300px; margin: auto;' />
<div id='dpcontent1'>
<a class='center' href='https://trit3k.blogspot.com/search/label/Ci%C3%AAncia'>Ciência</a>
<a class='center' href='#'>Tecnologia</a>
</div>
</div>
<div class='column'>
<h3 style=' color:#fff;'>Computadores</h3>
<div style='background-color: rgb(8, 176, 255);height: 2px; width: 300px; margin: auto;' />
<div id='dpcontent2'>
<a class='center2' href='#'>Hardware</a>
<a class='center2' href='https://trit3k.blogspot.com/search/label/Software'>Software</a>
<a class='center2' href='https://trit3k.blogspot.com/search/label/Internet'>Internet</a>
<a class='center2' href='https://trit3k.blogspot.com/search/label/Smartphone'>Smartphone</a>
<a class='center2' href='#'>Mac</a>
<a class='center2' href='#'>Linux</a>
</div>
</div>
<div class='column'>
<h3 style='color:#fff;'>Gaming</h3>
<div style='background-color: rgb(255, 25, 0);height: 2px; width: 300px; margin: auto;' />
<div id='dpcontent3'>
<a class='center3' href='#'>eSPORTS</a>
<a class='center3' href='https://trit3k.blogspot.pt/search/label/Jogos'>Jogos</a>
<a class='center3' href='#'>Consolas</a>
<a class='center3' href='#'>Lançamentos</a>
</div>
</div>
</div>
</div>
</div>
</li>

Slider pushed up by side-menu

I have been trying to make my slider stay in the same place when the side-menu of my page comes in from the left on the page. I have been searching for answers and there seems to be some people who have encountered the same problem in various situations.
I have tried to change the position properties of elements on the page without any success. Is there anyone who might be able to help me with this problem?
JSFiddle: https://jsfiddle.net/nekgunru/2/
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeOut(100);
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<title>Practice</title>
<!--Links to main Stylesheet-->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!--Links to "Oswald"-font-->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--Links to Javascript-file-->
<script type="text/javascript" src="app.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>

The issue is that you are fading out .icon-menu which causes it to be set to display: none; when the fading animation has completed. This means that it no longer effects the position of the elements around it and so in this case they move up.
none
Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.
display - (https://developer.mozilla.org/en-US/docs/Web/CSS/display)
One way to navigate around this problem would be to use fadeOuts callback to set visibility: hidden; instead as it makes the element invisible while still affecting the position of the elements around it.
hidden
The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).
visibility (https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
Change:
$('.icon-menu').fadeOut(100);
To:
$('.icon-menu').fadeOut(100, function() {
$(this).css({"display": "block", "visibility": "hidden"});
});
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeOut(100, function() {
$(this).css({"display": "block", "visibility": "hidden"});
});
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>
Alternative method
You could instead use animate and set the opacity to 0 as this will simply modify the transparency of the element, it will still effect the position of the elements around it.
Change:
$('.icon-menu').fadeOut(100);
To:
$('.icon-menu').animate({opacity: 0}, 100);
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').animate({opacity: 0}, 100);
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>

How To Make Entire 'li' Area and Text A Clickable Link

I'm trying to make the entire li tag area clickable as well as the text which I have made clickable already. I have tried giving it a href property but that doesn't work. I have already set the li background to change color when it's hovered over but as I said, how do I also make the entire area clickable? Thanks in advance.
HTML:
<!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" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
Home
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" 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 id="sectwohead">Best Selling Books Right Now</h2>
<div id="bestsellerimages">
<figure>
<img src="Images/4.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Girl On The Train <br>
<span style="font-style: italic; font-size: 0.9em">Paula Hawkins</span></figcaption>
</figure>
<figure>
<img src="Images/3.jpg" alt="book2" height="200" width="131" class="imgbot">
<figcaption>Meet Me In Manhattan <br>
<span style="font-style: italic; font-size: 0.9em">Claudia Carroll</span></figcaption>
</figure>
<figure>
<img src="Images/5.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Pointless Book 2 <br>
<span style="font-style: italic; font-size: 0.9em">Alfie Deyes</span></figcaption>
</figure>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
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;
}
a:link, a:visited, a:hover, a:active{
color: #DADADA;
text-decoration: none;
}
#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 .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#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 {
width: 80%;
top: 0;
right: 0;
}
#containertwo {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
}
#sectwohead{
margin: 2em 0 2em 0;
color: #888888;
}
#bestsellerimages{
float: left;
display: inline-block;
width: 100%;
max-width: 100%;
margin: 0 0 2em 0;
}
#bestsellerimages img{
padding: 0;
}
#bestsellerimages figure{
display: inline-block;
width: 131px;
}
#bestsellerimages figcaption{
font-size: 1.2em;
}
#bestsellerimages figure .imgbot{
margin: 0 0 0.5em 0;
}
This should help see more clearly what I'm trying to do, as you can see in this image - http://i.imgur.com/OZIt9TM.png - The only clickable area is the blue part within chromes inspect that's easy to see. So what I'm trying to do is make the entire area of that specific 'Home Li' clickable.

Rule #1 of list-based menus: Style the links, not the wrappers. Only style the list for positioning (display/float etc.).
Use display:block on your A-tags and put all styling on that tag, not the list itself.
Home
Move background-color: #333 to the .link class in your css, and add display:block to that declaration.

If you are using jQuery (assuming the tags are right) you can do it like this without styling the anchor tags:
$('ul li').click(function() {
location.href = $(this).find('a').prop('href');
});
I would suggest a class name for the ul list like <ul class="navigation">
$('ul.navigation li').click(function() {
location.href = $(this).find('a').prop('href');
});

Ups sorry...Try this..
#nav li {
list-style-type: none;
/* margin: 0; */
/* padding: 0.75em 0 0.75em 0; */
/* text-align: center; */
/* max-width: 100%; */
/* display: block; */
}
#nav li a {
display: block;
padding: 0.5em 0;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}

Wrap your A tag around the LI tag. For example look at the google link. You're putting the A tag around the text only, not the entire element.
<ol>
<a href="http://google.com">
<li>google</li> <!-- DO THIS -->
</a>
<li>
yahoo <!-- YOUR CURRENTLY DOING THIS -->
</li>
</ol>