5

Mi pregunta es básicamente lo que dice el título. ¿Que habría de hacer para dejar marcada la opción de menú de la página en la que me encuentro?

Mi código es este:

HTML

 <nav class="nav-principal navbar navbar-expand-md navbar-light bg-faded">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#nav-principal" aria-expanded="false" aria-label="Mostrar navegacion">
                <span class="navbar-toggler-icon"></span>
                </button>
                <a href="index.php" class="navbar-brand d-lg-none mx-2">Accion Reaccion</a>

                <div class="col-12 mt-4">
                    <div class="collapse navbar-collapse" id="nav-principal">
                        <ul class="nav nav-justified flex-column flex-sm-row">
                            <li class="nav-item">
                                <a class="nav-link" href="index.php">Inicio</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="conocenos.php">Conócenos</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="obras.php">Obras</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="galeria.php">Galería</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="premios.php">Premios</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="contacto.php">Contacto</a>
                            </li>
                        </ul>
                    </div><!--div menu-->
                </div><!--div menu-->
            </nav><!--.nav-principal-->

Y el CSS:

    /** Estilos menú **/

.navegacion {
      background-color: #000000;
      position: relative;
}
.navbar-toggler {
    background-color: white;
}
@media (min-width: 575px){
    .flex-sm-row {
        width: 100%;
    }
}
.bg-faded {
    background-color: solid;
}
.navbar-brand {
    color: white!important;
    font-weight: bold;
    text-transform: uppercase;
}
nav.nav-principal .nav-item {
    transition: background-color .5s ease-in-out;
}

nav.nav-principal .nav-item .nav-link:hover {
    background-color: white;
    border-radius: 0.2rem;
    color: black;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom:0px solid white;

}

nav.nav-principal .nav-item .nav-link {
    font-size: 1rem;
    text-transform: uppercase;
    color: #ffffff;
    padding: 0rem;
    margin: 0rem;
    border-bottom:1px solid white;
}

Muchas gracias de antemano

1
  • se puede hacer esto mismo, pero guardando en nav-link marcado en una variable session en php. el problema es que siempre regreso a la misma pagina que tiene el nav-link. Commented el 23 abr. a las 18:35

4 respuestas 4

6

Para que los li en Bootstrap 4 se queden marcados hay que agregar la clase active, lo puedes hacer en Javascript.

Primero agregarle un id a los li

<li class="nav-item" id="tab-index">
    <a class="nav-link" href="index.php">Inicio</a>
</li>
<li class="nav-item" id="tab-conocenos">
     <a class="nav-link" href="conocenos.php">Conócenos</a>
</li>
<li class="nav-item" id="tab-obras">
      <a class="nav-link" href="obras.php">Obras</a>
</li>
<li class="nav-item" id="tab-galeria">
      <a class="nav-link" href="galeria.php">Galería</a>
</li>
<li class="nav-item" id="tab-premios">
      <a class="nav-link" href="premios.php">Premios</a>
</li>
<li class="nav-item" id="tab-contacto">
      <a class="nav-link" href="contacto.php">Contacto</a>
</li>

Luego en Javascript, a la hora de cargar la pagina hay que detectar en la pagina que estamos y asignar una clase dependiendo de ello.

/// Url actual
let url = window.location.href;

/// Elementos de li
const tabs = ["index", "conocenos", "obras", "galeria", "premios", "contacto"];

tabs.forEach(e => {
    /// Agregar .php y ver si lo contiene en la url
    if (url.indexOf(e + ".php") !== -1) {
        /// Agregar tab- para hacer que coincida la Id
        setActive("tab-" + e);
    }

});

/// Funcion que asigna la clase active
function setActive(id) {
    document.getElementById(id).setAttribute("class", "nav-item active");
}
1
  • Perfecto¡¡ Solucionado. Mil gracias¡ :)
    – Dani
    Commented el 12 abr. 2018 a las 10:03
4

Tienes que añadir la clase .active al li correspondiente, pero para que te funcione te falta añadir la clase .navbar-nav al ul

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<nav class="nav-principal navbar navbar-expand-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#nav-principal" aria-expanded="false" aria-label="Mostrar navegacion">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a href="index.php" class="navbar-brand d-lg-none mx-2">Accion Reaccion</a>

  <div class="col-12 mt-4">
    <div class="collapse navbar-collapse" id="nav-principal">
      <ul class="nav navbar-nav nav-justified flex-column flex-sm-row">
        <li class="nav-item">
            <a class="nav-link" href="index.php">Inicio</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="conocenos.php">Conócenos</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link " href="obras.php">Obras</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="galeria.php">Galería</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="premios.php">Premios</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="contacto.php">Contacto</a>
        </li>
     </ul>
     </div><!--div menu-->
   </div><!--div menu-->
</nav><!--.nav-principal-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

1

Basta con agregar a tu li una clase css para indicar que esta activa:

 <li class="nav-item active">
     <a class="nav-link" href="obras.php">Obras</a>
 </li>

Claro, tienes que detectar vía javascript o php por ejemplo en que pagina estás para colocarlo.

if (window.location.href.indexOf("obras.php") != -1){
//colocas la class
}
1

Puedes añadir el siguiente código en javascript para determinar el fichero actual cargado y marcar en consecuencia el menú asociado:

<script>
    var url = window.location.pathname;
    var filename = url.substring(url.lastIndexOf('/')+1);
    $(".menu_activo").removeClass("menu_activo");
    $('.nav-link[href="' + filename + '"]').addClass("menu_activo");
</script>

También tienes que añadir el estilo:

<style>
    .menu_activo {
        background-color: #000000;
        color: #ffffff;
    }
</style>

Esto se puede hacer de muchas formas, también desde el propio PHP, en este caso sería hacer un if con el basename de la url para identificar el elemento de menú a marcar o en tu caso, como cada elemento de menú va a un fichero separado, solo tendrías que poner la clase a mano en cada elemento según el fichero, por ejemplo, en index.php la clase estaría en el primer elemento del menú mientras que en el fochero conocenos.php, marcarias la segunda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.