Menu
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> 
352
You need to initialize your dropdown like so:
$('.ui.dropdown') .dropdown(); There is more information HERE
73
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"> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
