Use menu on my own webpage


#1

I only get a narrow strip spanning horizontally across my browser with the background image and just see the MENU caption without the three stripes icon. Would there be a solution to this inconsistency?
When I try commenting (canceling) the background image it leaves me with a blank page, erasing the MENU description as well. May I please know how to delete the background image without suppressing the MENU link so I may use the menu on my own page. Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">








<div class="menu">
  
  <!-- Menu icon -->
  <div class="icon-close">
    <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
  </div>

  <!-- Menu -->
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<!-- Main body -->
<div class="jumbotron">

  <div class="icon-menu">
    <i class="fa fa-bars"></i>
    Menu
  </div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>


var main = function() {

$('.icon-menu').click(function() {
$('.menu').animate({
left: '0px'
}, 200);

$('body').animate({
left: '285px'
}, 200);
});
$('.icon-close').click(function() {
$('.menu').animate({
left: '-285px'
}, 200);

$('body').animate({
    left: '0px'
}, 200);

});
};
$(document).ready(main)

/* Initial body */

body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}

/* Initial menu */
.menu {
background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
}

/* Basic styling */

.jumbotron {
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 ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}

.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}

.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}

.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}

.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}

.icon-menu i {
margin-right: 5px;
}


#2

i put what i can see of your code in a bin, and it seems to work fine, see here

You can use html5 doctype declaration: <!DOCTYPE html>


#3

I appreciate your response, but what do you mean by "fine"? I get the exact same output as described at the top: narrow, horizontal strip of background across top of browser without the three menu icon bars, just the MENU caption is displayed. All this in spite of trying in three browsers: chrome, ie, firefox.


#4

you can pretty easy remove the background image, just make sure you give the background a color (like i did here) because your text is white, white text is not visible on a white background (well, there is a surprise)


#5

can i see a print screen?


#6


#7

did you include this link:

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

i can't see, since that part of your code is not visible. i put it in a bin and it seems to be fine now


#8

Yes, it finally works for me too. The link you told me about was already pasted in the html sheet but maybe for some reason it wasn't copied identically. After recopying, it displays accordingly.


#9

but had the link in my exercise without http, maybe it is what caused the problem? Anyway, good it works now