在Zurb Foundation Framework上創建一個下拉式登錄表單

好吧，您好，我已經能夠在Twitter Bootstrap中成功創建一個下拉式登錄表單。在Bootstrap中它非常簡單，但是這個框架並不容易。這是我想要實現的：https://lh4.googleusercontent.com/-A1GH5oiWNEI/UTg6JoR9kDI/AAAAAAAAAAM/g4BJNVkvLJ4/s1600/Drop-Down-Form-F3.png。這裏是我當前的代碼：（我切一些地方出）在Zurb Foundation Framework上創建一個下拉式登錄表單

<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。我已經嘗試了正常的下拉式，但它不起作用（抱歉沒有圖片），然後我想出了這個，但它不是最好的。請幫助謝謝！

來源

2013-10-13 Omar Quazi

是關於Zurb基金會還是Twitter Bootstrap的問題？它們是響應式設計的不同解決方案，而其中可能有效的解決方案不適用於其他解決方案。 – BFWebAdmin

@BFDatabaseAdmin關於Zurb Foundation框架。我將如何讓它下降，並在裏面有一個窗體？謝謝 –

您使用哪種Zurb基金會版本？ – iamrobert

使用基金會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關於dropdowns和forms的精彩文檔。

來源

2013-12-12 01:04:53 chadoh

擴展在chadoh的出色答卷，任何人誰是尋找一些簡單的，並準備去：

<div id="login-dropdown" class="f-dropdown small content" data-dropdown-content="true"> 
    <h5>Log In:</h5> 
    <form id="top-nav-login" action="login.xqy" method="post"> 
     <div class="row"> 
      <label>Email Address</label> 
      <input type="email" name="email" placeholder="[email protected]" tabindex="1"/> 
     </div> 
     <div class="row"> 
      <label>Password</label> 
      <input type="password" name="email" placeholder="********" tabindex="2"/> 
     </div> 
     <div class="row"> 
      <input type="submit" class="button tiny success" value="Login" tabindex="3"/> 
     </div> 
    </form> 
</div>

這只是標記的下拉部分。您仍需要chadoh的答案中的頂部欄和數據下拉元素。顯然根據需要添加自己的表單元素。

來源

2014-01-09 17:56:17

在Zurb Foundation Framework上創建一個下拉式登錄表單

回答

相關問題