0

Tengo en mi sistema una NAVBAR con varias opciones, todo funciona bien. Tengo configurado para que cuando la pagina este en ACTIVE se destaque para identificar la pagina actual. Pero lo que no he podido lograr configurar es que cuando este en algunos de los li, por ejemplo Lista de Usuarios, se logre destacar la opción principal de Registros desde donde se despliega las otras opciones, para identificar en que pagina estoy posicionado. Agradecería su ayuda u orientación ya que no he logrado resolverlo.

 <?php
    function active($currect_page)
    {
     $url_array = explode('/', $_SERVER['REQUEST_URI']);
     $url = end($url_array);
     if($currect_page == $url)
     {
      echo 'active';
     }
    }
 ?>

  <style type="text/css">
   .active 
   {
    color: #ff6600 !important;
    background-color: #195cb6;
   }
 </style>


<nav>
  <ul>              
    <li>
        <a class="<?php active('index.php');?>" href="index.php">
            Inicio
        </a>
    </li>
   </ul>
    <li class="principal">
        <a href="#">
            Registros
        </a>
            <ul>
                <li>
                    <a class="<?php active('usuarios.php');?>" href="usuarios.php">
                        Lista de Usuarios
                    </a>
                </li>
                <li>
                    <a class="<?php active('establecimientos.php');?>" href="establecimientos.php">
                        Lista Establecimientos
                    </a>
                </li>
            </ul>
      </li>
      <li class="principal">
          <a href="#">Formularios</a>
            <ul>
                <li>
                    <a class="<?php active('formulario_1.php');?>" href="formulario_1.php">
                        FORM 1
                    </a>
                </li>
                <li>
                    <a class="<?php active('formulario_2.php');?>" href="formulario_2.php">
                        FORM 2
                    </a>
                </li>
                <li>
                    <a class="<?php active('formulario_3.php');?>" href="formulario_3.php">
                        FORM 3
                    </a>
                </li>
            </ul>
     </li>
 </nav>


                    
6
  • Pues el mecanismo viene a ser lo mismo, se trata de poner la clase active a su clase tal como haces con el resto de este modo: class="<?php active('registros');?>" donde la función active() (que no pones en la pregunta) debe saber si alguno de sus hijos está activo para activarse.
    – masterguru
    Commented el 23 nov. 2022 a las 13:36
  • Gracias por responder, el problema es que registros es solo para mostrar las paginas, pero no es una pagina PHP como tal, es por eso que no se como activar la clase active.
    – SBK22
    Commented el 23 nov. 2022 a las 13:38
  • Yo tampoco a menos que pongas lo que hace la función active... a ciegas no puedo saber la lógica que empleas para descubrir si esa clase debe ponerse o no en los hijos, pero no costará mucho adaptarla a su padre seguramente.
    – masterguru
    Commented el 23 nov. 2022 a las 13:40
  • actualice la pregunta y agregue el código que faltaba.
    – SBK22
    Commented el 23 nov. 2022 a las 13:42
  • ok, lo miro, pera
    – masterguru
    Commented el 23 nov. 2022 a las 13:45

1 respuesta 1

1

Prueba con esto:

function active($currect_page)
{
    $menu_y_paginas = [
        'index' => [
            'index.php'
        ],
        'registros' => [
            'usuarios.php',
            'establecimientos.php'
        ],
        'formularios' => [
            'formulario_1.php',
            'formulario_2.php',
            'formulario_3.php'
        ]
    ];

    $url_array = explode('/', $_SERVER['REQUEST_URI']);
    $url = end($url_array);

    if (in_array($currect_page, array_keys($menu_y_paginas))) {
        foreach ($menu_y_paginas[$currect_page] as $pagina) {
            if ($pagina == $url) {
                echo 'active';
                break;
            }
        }
    } else {
        if ($currect_page == $url) {
            echo 'active';
        }
    }
}

Como ves, vamos a sabiendas de como está el menú, pues al no ser javascript no podemos jugar con sus funciones para averiguar su ancestro, así que debemos conocer la estructura del menú para conocer si debe o no debe activarse.

Y en el HTML lo pones así:

<nav>
  <ul>              
    <li>
        <a class="<?php active('index.php');?>" href="index.php">
            Inicio
        </a>
    </li>
   </ul>
    <li class="principal">
        <a class="<?php active('registros');?>" href="#">
            Registros
        </a>
            <ul>
                <li>
                    <a class="<?php active('usuarios.php');?>" href="usuarios.php">
                        Lista de Usuarios
                    </a>
                </li>
                <li>
                    <a class="<?php active('establecimientos.php');?>" href="establecimientos.php">
                        Lista Establecimientos
                    </a>
                </li>
            </ul>
      </li>
      <li class="principal">
          <a class="<?php active('formularios');?>" href="#">Formularios</a>
            <ul>
                <li>
                    <a class="<?php active('formulario_1.php');?>" href="formulario_1.php">
                        FORM 1
                    </a>
                </li>
                <li>
                    <a class="<?php active('formulario_2.php');?>" href="formulario_2.php">
                        FORM 2
                    </a>
                </li>
                <li>
                    <a class="<?php active('formulario_3.php');?>" href="formulario_3.php">
                        FORM 3
                    </a>
                </li>
            </ul>
     </li>
 </nav>
1
  • Me sirvió, muchas gracias, quedo todo bien. Te agradezco tu ayuda
    – SBK22
    Commented el 23 nov. 2022 a las 14:12

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.