push menu

Status
Niet open voor verdere reacties.
A

Anblauw

Gebruiker
Lid geworden
1 jul 2015
Berichten
11
Via codecademy wil ik graag een push menu op mijn website plaatsen. Hieronder zie je de code zoals die gegeven is. Deze code kan ik wle een beetje volgen maar helaas lukt het op mijn eigen website niet om het te laten werken. Weten jullie wat er mis is met de code? Alvast bedankt Anna

jquery code is:
[js]
//Jquery
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:'-285px'
}, 200);
});
};

$(document).ready(main);
[/js]

de html code is:
HTML: 
<body>

    <div class="menu">
      
      <!-- Menu icon -->
      <div class="icon-close">
        <img src="afbeeldingen/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>
  </body>
en de css code is:
Code: 
/* Initial body */
body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

/* Initial menu */
.menu {
  background: #202024 url('afbeeldingen/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('afbeeldingen/tekening.jpg'); 
  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;
}
 
Laatst bewerkt door een moderator:
Ben je er al uit? Zo niet....
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>codecademy</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
    left: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}
.menu {
    background: #202024 url('afbeeldingen/black-thread.png') repeat left top;
    left: -285px;
    height: 100%;
    position: fixed;
    width: 285px;
}
.jumbotron {
    background-image: url('afbeeldingen/tekening.jpg'); 
    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: #00f; /*#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;
}
</style>
</head>
<body>
<div class="menu">
    <div class="icon-close">
        <img src="afbeeldingen/close.png">
    </div>
    <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>
<div class="jumbotron">
    <div class="icon-menu">
        <i class="fa fa-bars"></i>
        Menu
    </div>
</div>
<script>
$(document).ready(function() {
    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:'0'
            }, 200);
        });
    };
    main();
});
</script>
</body>
</html>
Suc6. Have fun.
 
Hallo Bron,

bedankt voor het antwoord. Ik had inderdaad ondertussen al gevonden waar het probleem was. Met de juiste verwijzing van JQUERY werkte de code wel.
<link href='style.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Ik denk dat , dat ook is wat je laat zien in je antwoord. Ik dacht eigenlijk dat ze mijn vraag weggehaald hadden omdat het alleen code was.

Bedankt nog
 
Suc6 met codecademy :thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan