Question

因此，如果您转到： https://www.waveapps.com/ 并点击“登录”＆＃39;登录后，您将获得一个很好的下载。

我怎么能创造这样的东西？我使用的是Twitter Bootstrap，而不是将用户重定向到登录页面，我希望有类似的下拉菜单允许用户登录。它更具吸引力。

我怎么能这样做？

任何帮助都会很酷!!

干杯！

Answer 1

您可以使用Bootstrap的弹出框或模态功能。

See docs here

Answer 2

试试这个

HTML

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <!-- Collapsable nav bar --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

            <!-- Your site name for the upper left corner of the site --> <a class="brand">My Site</a>

            <!-- Start of the nav bar content -->
            <div class="nav-collapse">
                <!-- Other nav bar content -->... ...
                <!-- The drop down menu -->
                <ul class="nav pull-right">
                    <li><a href="/users/sign_up">Sign Up</a>
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>

                        <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
                            <form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
                                <input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
                                <input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
                                <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
                                <label class="string optional" for="user_remember_me">Remember me</label>
                                <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
                            </form>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

脚本

$(function () {
    // Setup drop down menu
    $('.dropdown-toggle').dropdown();

    // Fix input element click problem
    $('.dropdown input, .dropdown label').click(function (e) {
        e.stopPropagation();
    });
});

DEMO

Answer 3

只需将div放在可视窗口上方，例如，如果它是200px高，请给它一个css顶部值-80px，这样它的底部就在屏幕的顶部，然后当盘旋动画为div时图。

#loginbox {
top:-80px;
width:600px;
height:100px;
}

和

$('#loginbox').hover(function() {
$(this).stop().animate({'top', '0px'}, 1000
}, function() {
$(this).stop().animate({'top', '-80px'},750
});

如何在导航栏上添加登录下拉菜单？

3 个答案: