I passed all the exercises but menu still doesn't work - SOLVED. (It's CSS problem)


#1

Here is my code:

     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);

Pls help me find what I missed.
I even tried JShint & JSLint checkers, but it did not help.


#2

Problem solved.
Guys, check CSS tab!
For some reasons, my CSS tab contained html code.

It must be

/* 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;
}

#3

I have the same problem, I have passed the exercise, however my menu is unresponsive, what do I need to change in the CSS tab to fix this.

Thank you


#4

Hi joruss,
just delete all HTML code in CSS tab, and paste CSS code above.

One more way to debug your HTML+CSS+JS:
1. create an empty HTML file (using any text editor you like),
2. paste your HTML in that file,
3. paste CSS in that file using a <style type="text/css"></style>in the HTML <head> section
4. paste JS using <script type="text/javascript"><script> in the HTML <body> section
5. save and run that file in your browser.


#5

Thank you for getting back to me. my menu works ! fab.

Take care


#6

Hi I'm not sure if I am missing something I tried all suggestions above. I am unable to get the menu to run. Am I missing something above? The menu doesn't have any lines it is clickable but no animation or responsiveness.


#7

Hi,
Show us your HTML and CSS code


#8

Hi I figured it out thanks!


#9

Hi, what did you figured out? I still with the same problem, which was your solution? Thanks..


#10

Hello, check your code right the way through, I just found a full stop where it should be a comma and that made it work. Here is my working code.

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

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

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

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

};

$(document).ready(main);


#11

Thank you!! I forgot the $(document).ready(main); line .... :weary:


#12

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.