0

Hola amigos como puedo hacer para que el menú no este fijo y este en una sola linea, ya que el menu lo jala en cada php. Al dar clic en la parte de abajo para querer minimizarlo solo hace el proceso de minimizar y maximizar en un solo clic y no me lo deja minimizado

introducir la descripción de la imagen aquí

Tengo que modificar algo del menu.php o del style.css?

Este es mi codigo del menu

                <ul class="nav metismenu" id="side-menu">
                    <li class="nav-header centertxt">
                        <div class="dropdown profile-element">
                            
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                              <strong class="font-bold"><?php echo $_COOKIE["usuario"]; ?></strong>
                            </a>
                        </div>
                    </li>
                    <li>
                        <a href="index.php"><i class="fa fa-th-large"></i> Inicio</a>
                    </li>

                    <li>
                        <a href="#"><i class="fa fa-user"></i> Clientes <i class="fa arrow"></i></a>
                        <ul class="nav nav-second-level">
                            <li><a href="clientes.php">Todos los clientes</a></li>
                            <li><a href="nuevo-cliente.php">Nuevo cliente</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="usuarios.php"><i class="fa fa-user"></i> <i class="nav-label"> Usuarios</i></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-line-chart"></i> <i class="nav-label">Reportes</i> <i class="fa arrow"></i></a>
                        <ul class="nav nav-second-level">
                            <li><a href="reportes.php">Reporte general</a></li>
                            <li><a href="reportes-detallado.php">Reporte detallado</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="contacto.php"><i class="fa fa-book"></i> <i class="nav-label">Contacto</i></a>
                    </li>
                    <li>
                        <a href="inc/logout.php"><i class="fa fa-sign-out"></i> <i class="nav-label">Cerrar sesi&oacute;n</i></a>
                    </li>
</ul>       

Esta es la nueva forma que me dio del menu

introducir la descripción de la imagen aquí

3
  • Tienes que mostrar los estilos. Deben estar mal, porque eso es un HTML estándar. Commented el 29 abr. 2019 a las 15:35
  • Pero son 8563 lineas de codigo del php "style" ya que es un framework Commented el 29 abr. 2019 a las 15:46
  • No has agregado nada de estilo propio? Es que por poner una lista como menú no se ubica como tu quieres. Tienes que darle estilos, bien a tu forma o con bootstrap, pero estilos. Commented el 29 abr. 2019 a las 16:05

1 respuesta 1

2

Esto es lo que necesitas.

Primero si deseas que tu menú sea horizontal y no vertical, debes añadirle la clase nav-pills a tu etiqueta <ul> que ya incluye la clase nav. Esto fuerza que el elemento "flote" de izquierda a derecha.

Eso sería todo, pero veo que tienes la clase nav-second-level (la cual no es propia de Bootstrap) en tus submenus o dropdowns.

Bootstrap ya cuenta con una clase para ayudarte con esto (de paso te evitas utilizar el icono <i class="fa arrow"></i>). Esta clase es dropdown y se aplica dentro de la etiqueta <li> que contendrá el submenú o segundo nivel como le llamas tu. Algo como esto:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

De este modo tu código funcional sería este:

<!-- Estas Librerias ya deberían estar en tu proyecto, ignóralas -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">


<!-- Este es tu código -->
<ul class="nav nav-pills metismenu" id="side-menu">
  <li class="nav-header centertxt">
    <div class="dropdown profile-element">

      <a data-toggle="dropdown" class="dropdown-toggle" href="#">
        <strong class="font-bold"><?php echo $_COOKIE["usuario"]; ?></strong>
      </a>
    </div>
  </li>
  <li>
    <a href="index.php"><i class="fa fa-th-large"></i> Inicio</a>
  </li>

  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Clientes <span class="caret"></span></a>
    <ul class="dropdown-menu nav nav-second-level">
      <li><a href="clientes.php">Todos los clientes</a></li>
      <li><a href="nuevo-cliente.php">Nuevo cliente</a></li>
    </ul>
  </li>


  <li>
    <a href="usuarios.php"><i class="fa fa-user"></i> <i class="nav-label"> Usuarios</i></a>
  </li>
  <li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-line-chart"></i> Reportes <span class="caret"></span></a>
      <ul class="dropdown-menu nav nav-second-level">
        <li><a href="reportes.php">Reporte general</a></li>
        <li><a href="reportes-detallado.php">Reporte detallado</a></li>
      </ul>
    </li>


    <li>
      <a href="contacto.php"><i class="fa fa-book"></i> <i class="nav-label">Contacto</i></a>
    </li>
    <li>
      <a href="inc/logout.php"><i class="fa fa-sign-out"></i> <i class="nav-label">Cerrar sesi&oacute;n</i></a>
    </li>
</ul>

2
  • Que tal me sirvio tu codigo, pero me agrego el menu a un lado de mi div y no abajo ¿Que bueno hacer ahi? Commented el 29 abr. 2019 a las 16:53
  • Debes editar tu pregunta y añadir más información de tu HTML, mostrando el DIV al que haces mención para así poder ayudarte Commented el 29 abr. 2019 a las 17:56

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.