I'm new in Semantic-UI and web development and I can't make the popup menu work. Actually I'm trying to create the popup menu example in this page and the document doesn't tell me to run any javascript etc. I've created a jsfiddle here:
https://jsfiddle.net/jhg9df8t/
The code is:
<div class="ui menu">
<a class="browse item">
Browse
<i class="dropdown icon"></i>
</a>
</div>
<div class="ui fluid popup top left transition hidden">
<div class="ui four column relaxed equal height divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colored</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
You would need to initialize the popup as follows.
$('.example .menu .browse').popup({
inline : true,
hoverable: true,
position : 'bottom left',
delay: {
show: 300,
hide: 800
}
});
This is from Popup documentation (.example class element is not included in the code you copied from semantic ui. So if you dont have that element with example class in your code I would suggest updating initialization without it). Refer to it for more information. http://semantic-ui.com/modules/popup.html#/examples
Also I think you might need to include JS & CSS associated with popup plugin.
If you read carefully here http://semantic-ui.com/collections/menu.html#popup-menu follow the link to popup and see if theres any additional JS and/or CSS for it.
I hope it helps.
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