セマンティックUIメニューを折りたたみ可能にするにはどうすればいいですか

これは私のセマンティックUIメニューです。低解像度（モバイルデバイス）では、私はこれを折りたたみ可能にしたいと思っています。このようなものを挿入してくださいhttp://i.imgur.com/6gEp3Py.png セマンティックUIメニューを折りたたみ可能にするにはどうすればいいですか

どうすればいいですか？ 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>

出典

2017-08-12 Dion

はたぶん<div id="hiddable">にすべての項目を入れて、CSSのmediaqueryを追加します。

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

     #hiddable { display:none } 

}

そして、このような

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

またはsomehtingを追加します。

出典

2017-08-12 12:46:11

私はnavbarを隠したくありません。私はこれを折りたたみ可能にしたい – Dion

セマンティックUIメニューを折りたたみ可能にするにはどうすればいいですか

答えて

関連する問題