[JQuery]Menu - Softwareontwikkeling

dinsdag 14 oktober 2014 20:09

Acties:

Topicstarter

Beste Tweakers,

Misschien dat jullie mij op weg kunnen helpen. Ik ben bezig met een website en nu heb ik daarvoor een menu gemaakt in html/css en heb deze responsive gemaakt met JQuery. So far so good, het menu werkt en klapt in en uit.

Het probleem is dat het menu al uitgeklapt is op het moment dat ik de website open. Eigenlijk zou alleen de 'menu' tag zichtbaar moeten zijn en niet het uitgeklapte menu.

Nu heb ik natuurlijk al een en ander geprobeerd maar ben nog een echte beginner als het aankomt op dit soort dingen en google maakte mij niet echt wijzer. Het kan natuurlijk dat ik verkeerd gezocht heb. Als dat het geval is Sorry

De code staat hieronder.

Edit* Html en Css toegevoegd *

HTML:

<!DOCTYPE html>
<html>
    <head>
        <Title>de Haan Wassalon</title>
        <!-- bootstrap css/meta -->
        <link href="css/font-awesome.min.css" rel="stylesheet">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
    </head>
    
    <body>

    <div class="menu">
      
      <!-- Menu icon -->
      <div class="icon-close">
        <img src="img/close.png">
      </div>

      <!-- Menu -->
      <ul>
        <li><a href="#">Over Ons</a></li>
        <li><a href="#">Prijzen</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      </br>
      </br>
      </br>
      </br>
      <center><img src="img/menu.jpg"></center>
    </div>

    <!-- Body -->
    <div class="jumbotron">

      <div class="icon-menu">
      <i class="fa fa-bars"></i>
        Menu
      </div>
    </div> 
    <!-- Jquery scrips -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Cascading Stylesheet:

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

/* Styling menu */
.menu {
    background: #202024 url(../img/zwart.png)repeat left top;
    height: 100%;
    width: 285px;
    left: -285 px; /*begint achter de content */
    position: fixed;
}

.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: #000000;
    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;
}

JavaScript:

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

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

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

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


$(document).ready(main);

Kan iemand hier aangeven of ik iets vergeten ben of dat er gewoon iets compleet fout zit in de code? Want naar mijn idee zou het moeten werken.

Alvast bedankt voor het meedenken.

Edwin

[ Voor 44% gewijzigd door Br3wmaster op 15-10-2014 07:27 ]

PSN: Brwmaster

dinsdag 14 oktober 2014 21:45

Acties:

Sircuri

Volledig Appelig

Ik mis hier je html van je menu zelf. Ik denk namelijk dat in je html het menu al uitgeklapt is.
Kun je de html even erbij zetten?

Signature van nature

dinsdag 14 oktober 2014 21:48

Acties:

André

Analytics dude

Ik mis hier je css van je menu zelf. Ik denk namelijk dat in je css het menu al uitgeklapt is.
Kun je de css even erbij zetten?

woensdag 15 oktober 2014 07:25

Acties:

Br3wmaster

Topicstarter

Heren,

Dank voor jullie reactie heb mijn TS aangepast met de html en css. In ieder geval bedankt voor het inzicht dat het hem dus waarschijnlijk in 1 van die 2 zit. Weer wat geleerd (ben nog niet zo lang bezig met html/css etc)

PSN: Brwmaster

woensdag 15 oktober 2014 07:38

Acties:

Shineless

Er staat een typefout in je CSS code.
In de class ".menu" bin property "left" staat er een spatie tussen "-285" en "px"

Zonder die spatie zou hij het wel moeten doen.

During the day I'm tired, because I'm a super hero at night.

woensdag 15 oktober 2014 08:07

Acties:

Br3wmaster

Topicstarter

Shineless schreef op woensdag 15 oktober 2014 @ 07:38:
Er staat een typefout in je CSS code.
In de class ".menu" bin property "left" staat er een spatie tussen "-285" en "px"

Zonder die spatie zou hij het wel moeten doen.

Dank voor het meedenken. Zal zodra ik thuis ben is kijken of het dan werkt. Voel me behoorlijk dom dat het in zo'n 'klein' typfoutje zit