在Zurb Foundation Framework上下载登录表单

Question

好的,你看到我能够在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.我尝试了正常的下降但它不起作用(抱歉没有照片)然后我想出了这个,但它不是最好的.请帮忙谢谢!

Answer 1

使用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关于下拉列表和表单的精彩文档.