Leftside menu doesn't work in my browser


#1

I created index.html, style.css, app.js files in my pc-folder and copied the same code from "Interactive Website: Push Menu:Preview" files but "Pushmenu" still does't work in my browser(Chrome, Firefox). What am I doing wrong?


#2

Hi Petro,

I think I know what the problem is, but could you please post the code in index.html so I can make sure?
Thanks :)


#3
Hi zystvan ,
here is my index.html:

<html>
  <head>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
    <link href='style.css' rel='stylesheet'>

  </head>
  <body>

    <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>
    </div>

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

#4

@fpetro Right, so on the fourth to last line:

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

You need to change // to https://. // is a protocol relative URL, which works fine (although it's a bad idea to use it) on a website being run on a server. But when you're accessing the site using the file protocol, // doesn't work.
I hope that made sense ;)


#5

Thanks a lot, pushmenu works!
(The same mistake at the beginning with the link to .css file;))


#6

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


#7

I only get a narrow strip spanning horizontally across my browser with the background image and see just the MENU caption without the three stripes icon. Would there be a solution to this inconsistency?


#8

Hey @hintor2,

Please create a new topic in these forums, and include a link to a Codebit containing your code. Then reply to this with a link to your new topic, and I'll be happy to help you over there :)