セマンティックUIドロップダウンログインフォーム

Question

セマンティックUIフレームワークを使用してウェブサイト用のドロップダウンログインフォームを作成しようとしていますが、より良い方法があるかどうかはわかりません。現在、フォームはメニュー上の項目にあります。そのため、フォームをクリックするとドロップダウンメニューが消えます。

 <div class="ui dropdown">Login 
     <div class="dropdown menu"> 
     <div class="item"> 
      <form class="ui form"> 
      <div class="ui stacked segment"> 
       <div class="ui one column middle aligned very relaxed stackable grid"> 
       <div class="column"> 
        <div class="ui form"> 
        <div class="field"> 
         <label>Username</label> 
         <div class="ui left icon input"> 
         <input placeholder="Username" type="text"> 
         <i class="icon-user-tie icon"></i> 
         </div> 
        </div> 
        <div class="field"> 
         <label>Password</label> 
         <div class="ui left icon input"> 
        <input placeholder="Password" type="password"> 
        <i class="icon-lock icon"></i> 
       </div> 
       </div> 
       <div class="ui blue submit button">Login</div> 
      </div> 
      </div> 
     </div> 
     </div> 

      </form> 
     </div> 
     </div> 
    </div> 

ドロップダウンメニューに実際のアイテムを作成せずにフォームをドロップダウンに追加する別の方法はありますか？ありがとう！

Answer 1

私は同じ問題を抱えていた...ここに私のソリューションは

だ

<div class="ui teal buttons"> 
    <div class="ui button">Login</div> 
    <div class="ui floating dropdown icon button"> 
     <i class="dropdown icon"></i> 

     <div id="login-form" class="menu"> 
      <div class="ui basic segment"> 
       <form class="ui form"> 
        <div class="field"> 
         <input type="text" name="username" placeholder="Username"> 
        </div> 
        <div class="field"> 
         <input type="password" name="password" placeholder="Password"> 
        </div> 
        <div class="item fluid"> 
         <button class="ui fluid button" type="submit">Submit</button> 
        </div> 
       </form> 
      </div> 
     </div> 

    </div> 
</div> 

私は、それ以外の場合は、入力の幅と一致して、幅300ピクセルを持っているために、ログイン・フォームをスタイル。