I've run into a snag with my coding project, specifically when attempting to style my div. Here is the code I have so far:
All CSS rules are applying correctly except for the .chat rule.
Can someone help me figure out what I'm doing wrong?
var main = function() {
$('.the-icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left: "300px"
}, 200);
});
$('.the-icon-close').click(function() {
$('.menu').animate({
left: "-300px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
});
};
$(document).ready(main);
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
background-color: #000000;
}
.menu {
background-color: #FF0000;
left: -300px;
height: 100%;
position: fixed;
width: 300px;
}
.menu ul {
border-top: 2px dotted #CE9429;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 2px dotted #CE9429;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #CE9429;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.the-icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.the-icon-menu {
background-color: #FF0000;
cursor: pointer;
width: 10px;
height: 10000px;
}
.chat {
background-color: #FF0000;
left: 300px;
height: 100px;
position: fixed;
width: 300px;
}
<div class="menu">
<div class="the-icon-close">
<img src="close.png" />
</div>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">History of computer games</a></li>
<li><a href="#">Coding</a></li>
<li><a href="#">Help forums</a></li>
</ul>
</div>
<div class="the-icon-menu">
</div>
<div class="the-chat-menu">
hi
</div>
<div class="chat">
<div class="the-chat-close">
</div>
<form>
<input type="text" />
<input type="submit" value="Submit" />
</form>
</div>