Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Semantic-UI popup menu doesn't work

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>
like image 988
user130268 Avatar asked Jun 01 '26 16:06

user130268


1 Answers

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.

like image 115
pratikpawar Avatar answered Jun 04 '26 11:06

pratikpawar



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!