CODEWITHSUNDEEP
javascriptjquerysemantic-ui
Joseph
Joseph

Reputation: 733

Semantic UI side menu not working

Found something that i cant understood.

Had a side menu with semantic ui, the dropdown menu from the side menu is not working when i host the file locally, but it is working fine if i put it in jsfiddle

Here is the working jsfiddle https://jsfiddle.net/7rcrx8c4/

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" />



  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>


</head>
<body>

  <div id="main" class="ui container">
    <div class="ui top attached menu">
      <a class="item" id="menu"><i class="sidebar icon"></i>Menu</a>
      <div class="right menu">
        <a class="item"><i class="user icon"></i>Welcome : Foo</a>
      </div>
    </div>
    <br />

  </div>
  <div class="ui left vertical sidebar menu">
    <div class="item">
      <i class="grid layout icon"></i>Menu
    </div>
    <!-- Master menu -->
    <div class="ui dropdown item">
      <span class="text"><i class="book icon"></i></span>
      <i class="dropdown icon"></i>Master
      <div class="menu">
        <a class="item">a</a>
        <a class="item">b</a>
      </div>
    </div>
    <!-- End master -->
  </div>
  <script>
  $('.ui .dropdown').dropdown({
    on: 'hover'
  });
  $('.ui.left.sidebar').sidebar({
    transition: 'overlay'
  });

  $('.ui.left.sidebar')
  .sidebar('attach events', '#menu');
  </script>


</body>
</html>

style.css

.ui.sidebar {
    overflow: visible !important;
}

Can some one point me where i make a mistake?

Upvotes: 1

Views: 2424

Answers (1)

Joseph
Joseph

Reputation: 733

Found out the reason,

style.css should be loaded after semantic.css

Thanks all for the time

Upvotes: 1

Related Questions