Question

126

semantic-ui dropdown menu do not work

rated 0 times [ 132] [ 6] / answers: 1 / hits: 69311 / 10 Years ago, sun, august 17, 2014, 12:00:00

I have been trying to build a menu using Semantic-UI. I can't get the dropdown menus to work at all. I took a copy of the page Menu examples and pulled out everything except the tiered menu and placed it in a separate file. Only the dropdown menu will not function, though there are no errors. Can anyone tell me what I have missed?

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

katharinek

Add To Favorites

Follow

Total Points: 302

Total Questions: 105

Total Answers: 123

Location: Austria

Member since Thu, Jan 7, 2021

3 Years ago

answered 10 Years ago lucianom · Accepted Answer

You need to initialize your dropdown like so:

$('.ui.dropdown')

  .dropdown();

There is more information HERE