web-dev-qa-db-fra.com

menu déroulant interface utilisateur sémantique ne fonctionne pas

J'ai essayé de construire un menu en utilisant Semantic-UI. Je n'arrive pas à faire fonctionner les menus déroulants. J'ai pris une copie de la page Exemples de menus et ai tout sorti sauf le menu hiérarchisé et l'ai placé dans un fichier séparé. Seul le menu déroulant ne fonctionnera pas, bien qu'il n'y ait pas d'erreur. Quelqu'un peut-il me dire ce que j'ai manqué?

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Script-Type" content="text/jscript" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />    
    <link rel="stylesheet" type="text/css" class="ui" href="http://semantic-ui.com/build/packaged/css/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="http://semantic-ui.com/stylesheets/semantic.css">  
    <script src="http://semantic-ui.com/javascript/library/jquery.min.js"></script>
    <script src="http://semantic-ui.com/javascript/library/history.js"></script>
    <script src="http://semantic-ui.com/javascript/library/easing.js"></script>
    <script src="http://semantic-ui.com/javascript/library/ace/ace.js"></script>
    <script src="http://semantic-ui.com/javascript/library/tablesort.js"></script>
    <script src="http://semantic-ui.com/javascript/library/waypoints.js"></script>
    <script src="http://semantic-ui.com/build/packaged/javascript/semantic.min.js"></script>
    <script src="http://semantic-ui.com/javascript/semantic.js"></script>
  </head>
  <body class="menu" >
    <div class="ui tiered menu">
      <div class="menu">
        <a class="active item">
          <i class="users icon"></i>
          Friends
        </a>
        <a class="item">
          <i class="grid layout icon"></i> Browse
        </a>
        <a class="item">
          <i class="mail icon"></i> Messages
        </a>
        <div class="right menu">
          <div class="item">
            <div class="ui icon input">
              <input type="text" placeholder="Search...">
              <i class="search icon"></i>
            </div>
          </div>
          <div class="ui dropdown item">
            More <i class="icon dropdown"></i>
            <div class="menu">
              <a class="item"><i class="edit icon"></i> Edit Profile</a>
              <a class="item"><i class="globe icon"></i> Choose Language</a>
              <a class="item"><i class="settings icon"></i> Account Settings</a>
            </div>
          </div>
        </div>
      </div>
      <div class="ui sub menu">
        <a class="active item">Search</a>
        <a class="item">Add</a>
        <a class="item">Remove</a>
      </div>
    </div>

  </body>
</html>
javascripthtmlsemantic-ui
41
P Hemans

Vous devez initialiser votre liste déroulante comme suit:

$('.ui.dropdown')
  .dropdown();

Il y a plus d'informations ICI

84
Cyzanfar

Un moyen est JS où vous devez initialiser le script. Une autre méthode consiste à ajouter une classe "simple" au menu déroulant.

<div class="ui simple dropdown item">
53
Mayank Chandak

Comme cela a déjà été mentionné, vous pouvez soit:

  • Initialisez votre liste déroulante avec Javascript ou 
  • Utilisez la classe simple. 

Il existe une différence très importante entre ces deux méthodes: en utilisant la classe simple, vous n'avez pas besoin de Javascript de Semantic-UI pour que votre menu déroulant fonctionne . La classe simple utilise le sélecteur :hover. 

Veuillez noter que l'utilisation de simple class (pas d'initialisation Javascript) ne vous donnera pas de beaux effets de liste déroulante.

Ainsi, le code suivant affichera un menu déroulant sans Javascript de Semantic-UI dans votre page:

<div class="ui simple dropdown item">
12
Tom

Si vous initialisez avec $('.ui.dropdown').dropdown();, assurez-vous également que vos références de page dropdown.js

2
kmxr

si les réponses données ne fonctionnent pas pour vous, assurez-vous de ne pas utiliser bootstrap avec sémantique-ui

0
ahmelq

cela a fonctionné avec moi quand j'ai ajouté la ligne de fonction ci-dessus 

    <script> 
     $(document).ready(function(){
          $('.ui.dropdown') .dropdown();
    });
    </script>

0
ibrahim Mohamed