javascript - Change navbar in bootstrap if user login - Stack Overflow

admin管理员组

文章数量:1347848

I have a standard menu, including an option for "logging" in and "create user". What I want is that when either you create a user or you loging the whole navbar menu to change, say, "My user's page" and "logout" instead, how can I do it?

<div id="menu">
    <nav class="navbar">
        <div class="container">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home">  </span>    Home</a></li>
                <li><a href="#">Descuentos</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories<span class="caret"/></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Cat A</a></li>
                        <li><a href="#" >Cat B</a></li>
                        <li><a href="#">Cat C</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="createaccount.php"><span class="glyphicon glyphicon-user"></span>Create account</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-log-in"></span>  Login</a>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <form class="form-horizontal" role="form" action="tienda.php"  method="POST">
                                <div class="form-group">
                                    <label class="control-label col-md-4" for="nombre">User:</label>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" name="loginUser" required>
                                    </div>
                                    <label class="control-label col-md-4" for="nombre">Pass:</label>
                                    <div class="col-md-8">
                                        <input type="password" class="form-control" name="loginPass" required> <br>
                                    </div>
                                    <div class="col-md-5"></div>
                                    <button type="submit" class="btn btn-default col-md-5">Log In</button>
                                </div>
                            </form>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>

Basically, change

<ul class="nav navbar-nav navbar-right">
                    <li><a href="createaccount.php"><span class="glyphicon glyphicon-user"></span>Create account</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-log-in"></span>  Login</a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <form class="form-horizontal" role="form" action="tienda.php"  method="POST">
                                    <div class="form-group">
                                        <label class="control-label col-md-4" for="nombre">User:</label>
                                        <div class="col-md-8">
                                            <input type="text" class="form-control" name="loginUser" required>
                                        </div>
                                        <label class="control-label col-md-4" for="nombre">Pass:</label>
                                        <div class="col-md-8">
                                            <input type="password" class="form-control" name="loginPass" required> <br>
                                        </div>
                                        <div class="col-md-5"></div>
                                        <button type="submit" class="btn btn-default col-md-5">Log In</button>
                                    </div>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>

to this:

<ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-user"></span>Nombre USUARIO</a>

                    <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Mi página</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>  Carrito</a></li>
                        </ul>
                    </li>


                    <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>  Logout</a></li>

                </ul>

What's the best way to do this?

I have a standard menu, including an option for "logging" in and "create user". What I want is that when either you create a user or you loging the whole navbar menu to change, say, "My user's page" and "logout" instead, how can I do it?

<div id="menu">
    <nav class="navbar">
        <div class="container">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home">  </span>    Home</a></li>
                <li><a href="#">Descuentos</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories<span class="caret"/></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Cat A</a></li>
                        <li><a href="#" >Cat B</a></li>
                        <li><a href="#">Cat C</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="createaccount.php"><span class="glyphicon glyphicon-user"></span>Create account</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-log-in"></span>  Login</a>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <form class="form-horizontal" role="form" action="tienda.php"  method="POST">
                                <div class="form-group">
                                    <label class="control-label col-md-4" for="nombre">User:</label>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" name="loginUser" required>
                                    </div>
                                    <label class="control-label col-md-4" for="nombre">Pass:</label>
                                    <div class="col-md-8">
                                        <input type="password" class="form-control" name="loginPass" required> <br>
                                    </div>
                                    <div class="col-md-5"></div>
                                    <button type="submit" class="btn btn-default col-md-5">Log In</button>
                                </div>
                            </form>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>

Basically, change

<ul class="nav navbar-nav navbar-right">
                    <li><a href="createaccount.php"><span class="glyphicon glyphicon-user"></span>Create account</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-log-in"></span>  Login</a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <form class="form-horizontal" role="form" action="tienda.php"  method="POST">
                                    <div class="form-group">
                                        <label class="control-label col-md-4" for="nombre">User:</label>
                                        <div class="col-md-8">
                                            <input type="text" class="form-control" name="loginUser" required>
                                        </div>
                                        <label class="control-label col-md-4" for="nombre">Pass:</label>
                                        <div class="col-md-8">
                                            <input type="password" class="form-control" name="loginPass" required> <br>
                                        </div>
                                        <div class="col-md-5"></div>
                                        <button type="submit" class="btn btn-default col-md-5">Log In</button>
                                    </div>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>

to this:

<ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-user"></span>Nombre USUARIO</a>

                    <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Mi página</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>  Carrito</a></li>
                        </ul>
                    </li>


                    <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>  Logout</a></li>

                </ul>

What's the best way to do this?

• javascript
• php
• html
• twitter-bootstrap-3
• navbar

3 Answers 3

This is how I usually do it:

<?php
if($logged_id){
    include 'menu_authenticated.php';
}
else{
    include 'menu_unauthenticated.php';
}
?>

And of course, those files will have their menus respectively //menu_unauthenticated.php

<ul class="nav navbar-nav navbar-right">
                    <li><a href="createaccount.php"><span class="glyphicon glyphicon-user"></span>Create account</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-log-in"></span>  Login</a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <form class="form-horizontal" role="form" action="tienda.php"  method="POST">
                                    <div class="form-group">
                                        <label class="control-label col-md-4" for="nombre">User:</label>
                                        <div class="col-md-8">
                                            <input type="text" class="form-control" name="loginUser" required>
                                        </div>
                                        <label class="control-label col-md-4" for="nombre">Pass:</label>
                                        <div class="col-md-8">
                                            <input type="password" class="form-control" name="loginPass" required> <br>
                                        </div>
                                        <div class="col-md-5"></div>
                                        <button type="submit" class="btn btn-default col-md-5">Log In</button>
                                    </div>
                                </form>
                            </li>
                        </ul>
                    </li>
    </ul>

//menu_authenticated.php

<ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#"><span class="glyphicon glyphicon-user"></span>Nombre USUARIO</a>

                    <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Mi página</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>  Carrito</a></li>
                        </ul>
                    </li>


                    <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>  Logout</a></li>

                </ul>

Not saying this is 'the way' to do it. But it's one option :) That option includes creating some PHP functions. One that outputs the 'logged out' meny, and one that outputs the 'logged in' meny.

And then simply instead of having the meny you would have this code:

<?php
if($loggedIn)
  renderLoggedInMeny();
else
  renderLoggedOutMeny();
?>

These functions could look something like this:

function renderLoggedInMeny() {
  echo <<<EOT
<ul class="nav navbar-nav navbar-right">
  <li... [and so on]
EOT;
}

For the code below I'll pretend that you have a isLogged() function that returns true if a user is logged in and false if he isn't. This is what you could do in your navbar code :

<?php if(isLogged()): ?>
<li><a href="profile.php">Profile</a></li>
<li><a href="logout.php">Logout</a></li>
<?php else: ?>
<li><a href="login.php">Login</a></li>
<li><a href="register.php">Register</a></li>
<?php endif; ?>

Of course the code in between the PHP conditions can change, you can put your ul elements directly instead of only the li like I did - it's only for demonstration's purpose.

本文标签： javascriptChange navbar in bootstrap if user loginStack Overflow