semantic-ui dropdown menu do not work
JavascriptHtmlSemantic UiJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
You need to initialize your dropdown like so:
$('.ui.dropdown')
.dropdown();
There is more information http://semantic-ui.com/modules/dropdown.html">HERE</a>
Solution 2 - Javascript
One way is JS where you need to initialise script. Other way is to add a class "simple" to dropdown
<div class="ui simple dropdown item">
Solution 3 - Javascript
As it was already mentioned, you can either:
- Initialize your dropdown with Javascript or
- Use
simple
class.
There is one very important difference between those two ways: using simple
class, you do not require Semantic-UI Javascript for your dropdown to work. The simple
class uses :hover
selector.
Please note that using simple
class (not Javascript initialization) won't give you nice dropdown effects.
So the following code will show dropdown menu without Semantic-UI Javascript in your page:
<div class="ui simple dropdown item">
Solution 4 - Javascript
A quick note:
If the dropdown is not displaying and Bootstrap has been loaded on the same page with semantic-ui, then make sure to load the semantic js library after bootstrap.
This occurs because both bootstrap and semantic-ui have the same .dropdown()
method used for displaying dropdown menus. That said, the last library to be loaded between semantic-ui and bootstrap will override all other .dropdown()
methods that exists.
Solution 5 - Javascript
it worked with me when I added the function line above
<script>
$(document).ready(function(){
$('.ui.dropdown') .dropdown();
});
</script>
Solution 6 - Javascript
if the given answers didn't work for you, make sure you are not using bootstrap along with semantic-ui
Solution 7 - Javascript
If you initialize with $('.ui.dropdown').dropdown();
also make sure your page references dropdown.js