Semantic UI listeners

Draserwang
Javascript

Bonjour à tous ^^

J'ai un petit souci au niveau du framework semantic ui. Je pose ma question dans la partie javascript, car je pense que le souci vient du javascript du framework.

Ce que je fais

Actuellement, je charge le css et les différents scripts dans la balise head. Je précise que j'ai téléchargé le css et le javascript à partir du fichier zip fourni sur le site. Je précise également que j'ai juste copié l'exemple du menu dans mon code html (http://semantic-ui.com/collections/menu.html deuxième exemple avec le logo rouge). Donc rien de custom =D

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Mookup</title>

        <link href="/stylesheets/semantic.min.css" rel="stylesheet">
        <script src="/javascripts/jquery-3.1.1.min.js"></script>
        <script src="/javascripts/semantic.min.js"></script>
    </head>

Ce que je veux

J'aimerais bien bien avoir un effet comme sur le site de semantic ui. Ils arrivent à mettre un event mousover sur les menus avec le script semantic.min.js (j'ai utilisé les outils de chrome pour voir quel script avait mis l'event en question).

Ce que j'obtiens

Malheureusement, la seule chose que j'ai: aucun listener. Absolument rien. C'est comme si le script ne trouvait pas les éléments.

Je remercie d'avance pour votre aide :)

4 réponses

Grafikart

Et si tu met les scripts juste avant la fermeture du </body> ça donne quoi ?

Draserwang
Auteur

Pareil, ça ne change rien :/
Je vais mettre le code html complet, au cas où j'ai oublié de mettre quelque chose:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Mookup</title>

        <link href="/stylesheets/semantic.min.css" rel="stylesheet">
        <script src="/javascripts/jquery-3.1.1.min.js"></script>
    </head>
    <body>
    <!-- Debut exemple -->
        <div class="ui text menu">
          <div class="item">
            <img src="/images/computerLogo.png">
          </div>
          <a class="browse item">Browse Courses <i class="dropdown icon"></i> </a>
          <div class="ui right dropdown item">More <i class="dropdown icon"></i> <div class="menu">
              <div class="item">Applications</div>
              <div class="item">International Students</div>
              <div class="item">Scholarships</div>
            </div>
          </div>
        </div>
        <div class="ui flowing basic admission popup">
          <div class="ui three column relaxed divided grid">
            <div class="column">
              <h4 class="ui header">Business</h4>
              <div class="ui link list">
                <a class="item">Design &amp; Urban Ecologies</a>
                <a class="item">Fashion Design</a>
                <a class="item">Fine Art</a>
                <a class="item">Strategic Design</a>
              </div>
            </div>
            <div class="column">
              <h4 class="ui header">Liberal Arts</h4>
              <div class="ui link list">
                <a class="item">Anthropology</a>
                <a class="item">Economics</a>
                <a class="item">Media Studies</a>
                <a class="item">Philosophy</a>
              </div>
            </div>
            <div class="column">
              <h4 class="ui header">Social Sciences</h4>
              <div class="ui link list">
                <a class="item">Food Studies</a>
                <a class="item">Journalism</a>
                <a class="item">Non Profit Management</a>
              </div>
            </div>
          </div>
        </div>
        <!-- Fin Exemple -->
        <script src="/javascripts/semantic.min.js"></script>
    </body>
</html>
Grafikart

Aucune erreur dans la console du navigateur ?

Draserwang
Auteur

Non, rien :/ Mais sinon, il me semble que dans vos vidéos, vous utilisiez aussi semantic UI. Comment vous l'utilisez ? Vous passez par gulp pour builder les fichiers ? Ou vous allez récupérer le repo directment sur github ? Parce que je pense que le mieux, c'est encore de faire comme vous faites, car le souci doit se situer dans le js fourni :/