How can i make my Semantic Ui menu collapsable

Question

This is my Semantic Ui menu, stackable for mobile devices. On low resolutions (mobile devices) i wanna make this collapsable. Insert something like this http://i.imgur.com/6gEp3Py.png

How can i do this? Ty

 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div id="container" class="ui fluid container"> <div id="navbar" class="ui stackable yellow inverted menu"> <div class="item"> <img src="assets/images/logo.png"> </div> <a class="item" href="">Page1</a> <div class="ui pointing dropdown link item"> <span class="text yellow inverted">Page 2</span> <i class="dropdown icon"></i> <div class="menu"> <a class="item" href="">Small</a> <a class="item">Medium</a> <a class="item">Large</a> </div> </div> <a class="item" href="">Page 3</a> <a class="item" href="">Page 4</a> <a class="item" href="">Page 5</a> </div> </div> <script src="semantic/dist/semantic.min.js"></script> <script> $('.dropdown').dropdown({ transition: 'drop', on: 'hover' }); </script> </body> </html>

Answer 1

Maybe put all items to <div id="hiddable"> and add css mediaquery:

@media only screen and (max-width: 320px){

       #hiddable { display:none }

}

And add

$( ".dropdown" ).click(function() {
  $("#hiddable").show();
});

or somehting like this.

How can i make my Semantic Ui menu collapsable

Question

1 answers

solution1
0

How can i make my Semantic Ui menu collapsable

Question

1 answers

solution1 0

solution1
0