2

わかりました。Twitter Bootstrap でドロップダウン ログイン フォームを正常に作成できました。Bootstrap でははるかに単純でしたが、このフレームワークはそれほど簡単には機能しません。これは私が達成しようとしているものです: https://lh4.googleusercontent.com/-A1GH5oiWNEI/UTg6JoR9kDI/AAAAAAAAAAM/g4BJNVkvLJ4/s1600/Drop-Down-Form-F3.png。ここに私の現在のコードがあります:(私はいくつかの部分を切り取りました)

    <nav class="top-bar">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="#">ChatAar</a></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
    <a href="#" class="alert button" data-dropdown="hover1" data-options="is_hover:false">Login</a>
    <ul id="hover1" class="f-dropdown" data-dropdown-content>
    <!-- Login form here -->
        <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
            <div class="red"><?php echo $Login; ?></div>
                <p>Username:</p>
                <input name="user" type="text" class="field" id="user"/> 
                <p>Password:</p>
                <input name="pass" type="password" class="field" id="pass" value="" />
                    <br />
                <label style="text-color:white;">Remember Me For 30 Day's</lable>
                <input name="remember" type="checkbox" value="true" />
                <input name="page" type="hidden" value="<? echo $_GET['page']; ?>" />
                <input name="submit" type="submit" class="button" value="Log In" />
                    <br />
                <a href="forgotpassword.php">Password Recovery</a> | <a href="register.php">Sign Up</a>
             </div>
        </form>
    </ul>
    </ul>
  </section>
</nav>

そして、これは私が得るものです: http://webymaster.hj.cx/public.php?service=files&t=cdf517da96a2ad178045198169958afb . 私は通常のドロップダウンを試しましたが、うまくいきません（申し訳ありませんが写真がありません）、これを思いつきましたが、最高ではありません. 助けてくださいありがとう！

4

2 に答える 2

9

Foundation 5を使用すると、次のようになります。

<nav class="top-bar" data-topbar>
  <section class="top-bar-section">
    <ul class="right">
      <li><a href="#" data-dropdown="signin">Sign In</a></li>
    </ul>
  </section>
</nav>
<div id="signin" class="f-dropdown small content" data-dropdown-content>
  <!-- signin form here -->
</div>

ログイン フォームはの外側に配置する必要があることに注意してくださいtop-bar。そうしないと、スタイルが乱雑になります。

完全なリファレンス、例、カスタマイズ方法のアイデアについては、ドロップダウンとフォームに関する Zurb のすばらしいドキュメントをご覧ください。

于 2013-12-12T01:04:53.030 に答える