问题
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?
回答1:
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>
回答2:
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;
}
回答3:
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.
来源：https://stackoverflow.com/questions/27209274/change-navbar-in-bootstrap-if-user-login