2

En realidad no sé mucho de diseño, por eso utilizo Bootstrap para diseñar la parte estética de mi sistema.

Estoy intentando organizar mis TABs pero la verdad se me ve de una forma muy horrible, espero que me puedan ayudar indicándome cómo puedo hacer para que se vea más estético, por ejemplo utilizar mas el div y que no se parta en 2 partes las letras.

PRODUCTOS LCN -> boton ver mas

168.235.83.190/~app/img/lcn/public_html

Les dejo la imagen y el codigo de mi TABS

introducir la descripción de la imagen aquí

El codigo:

    <div class="modal fade" id="portfolioModal-20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-12" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content text-white">
            <div class="close" data-dismiss="modal">
                <div class="lr"><div class="rl"></div></div>
            </div>
            <div class="container col-md-12">
                <ul class="nav nav-pills nav-justified">
                    <li class="active"><a href="#">Accesorios</a></li>
                    <li><a href="#">Acopladores</a></li>
                    <li><a href="#">Audio</a></li>
                    <li><a href="#">Control de Accesos</a></li>
                    <li><a href="#">Control Remoto</a></li>
                    <li><a href="#">Entradas Binarias</a></li>
                    <li><a href="#">Estación Climática</a></li>
                    <li><a href="#">Gateways</a></li>
                    <li><a href="#">Módulos de Bus</a></li>
                    <li><a href="#">Salidas</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
9
  • Si estás usando Bootstrap, entonces por qué no intentas usar uno de los tabs, o menús, o navbar, que te provee Bootstrap por defecto, en lugar de crear uno nuevo? Commented el 5 jun. 2017 a las 14:03
  • el problema no esta en el div si no en el css que esta usando Commented el 5 jun. 2017 a las 14:03
  • 168.235.83.190/~app/img/lcn/public_html en la parte Productos LCN en el boton VER MAS les sugiero que lo vean gracias Commented el 5 jun. 2017 a las 14:05
  • 1
    por favor, no pongas links que muy probablemente en un par de semanas no existan mas.. Agrega toda la informacion relevante a tu pregunta apra que en el futuro le pueda servir a alguien mas.
    – gbianchi
    Commented el 5 jun. 2017 a las 14:16
  • El tipo de estética que te resulto se debe a que son mucho los items de ese menú horizontal, podrías considerar otra alternativa de menú como lo mencionan arriba en los componentes de la pagina de bootstrap, o puedes utilizar una propiedad en tu menú para que tenga overflow scroll para que el limite horizontal de tu menú no limite el espacio y genere un segundo renglón en los items con mucho texto. Con gusto te ayudo con eso! solamente que me gustaría que ese modulo lo subieras a un Codepen. Commented el 5 jun. 2017 a las 14:18

4 respuestas 4

2

Puedes optar por quitar la clase nav-justified para que cada pestaña ocupe un tamaño en función de su contenido o dividir en varias filas los tabs.

Esta segunda opción es bastante mala ya que únicamente se verá correctamente en ciertas resoluciones perdiendo la capacidad responsive de tu interfaz.

Las opciones que sugiere la propia documentación de bootstrap son:

  • Reducir la cantidad o el tamaño (ancho) de los tabs
  • Ocultar algunos elementos en función de la resolución utilizando las clases de bootstrap
  • Modificar el punto en el que se pasa del modo "collapsed" al "horizontal" modificando la variable @grid-float-breakpoint.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<div class="container">
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Accesorios</a></li>
        <li><a href="#">Acopladores</a></li>
        <li><a href="#">Audio</a></li>
        <li><a href="#">Control de Accesos</a></li>
        <li><a href="#">Control Remoto</a></li>
        <li><a href="#">Entradas Binarias</a></li>
        <li><a href="#">Estación Climática</a></li>
        <li><a href="#">Gateways</a></li>
        <li><a href="#">Módulos de Bus</a></li>
        <li><a href="#">Salidas</a></li>
    </ul>
</div>

<p>&nbsp;</p><p>&nbsp;</p>

<div class="container">
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="#">Accesorios</a></li>
        <li><a href="#">Acopladores</a></li>
        <li><a href="#">Audio</a></li>
        <li><a href="#">Control de Accesos</a></li>
    </ul>
    <ul class="nav nav-pills nav-justified">
        <li><a href="#">Control Remoto</a></li>
        <li><a href="#">Entradas Binarias</a></li>
        <li><a href="#">Estación Climática</a></li>
    </ul>
    <ul class="nav nav-pills nav-justified">
        <li><a href="#">Gateways</a></li>
        <li><a href="#">Módulos de Bus</a></li>
        <li><a href="#">Salidas</a></li>
    </ul>
</div>

1

Estas usando clases que pertenecen al elemento modal de boostrap.

En su lugar usa navbar, puedes ver los ejemplos aquí

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <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>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

7
  • al usuario le falto colocar el css por lo tanto es complicado resolver el problema sin el css Commented el 5 jun. 2017 a las 14:07
  • 1
    168.235.83.190/~app/img/lcn/public_html vete a PRODUCTOS LCN -> boton ver mas Commented el 5 jun. 2017 a las 14:10
  • ah? lo tienes en un servidor web? Commented el 5 jun. 2017 a las 14:10
  • si lo tengo en mi hosting Commented el 5 jun. 2017 a las 14:13
  • coloca el fondo blanco Commented el 5 jun. 2017 a las 14:15
1

Puedes guiarte de este menú que yo hice,

body{
    background: #8999A8;
}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;

}

.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
  border-bottom: 3px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
  border-bottom: 3px solid transparent;
  background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
 color: #fff;
}
.dropdown-menu{
      -webkit-box-shadow: none;
    box-shadow:none;
}

.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
  border-bottom: #C4E17F 3px solid;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
  border-bottom: #F7FDCA 3px solid;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
  border-bottom: #FECF71 3px solid;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
  border-bottom: #F0776C 3px solid;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
  border-bottom: #DB9DBE 3px solid;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
  border-bottom: #C49CDE 3px solid;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
  border-bottom: #669AE1 3px solid;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
  border-bottom: #62C2E4 3px solid;
}

.navbar-toggle .icon-bar{
    color: #fff;
    background: #fff;
}
<div class="navbar-wrapper">
    <div class="container-fluid">
        <nav class="navbar navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Logo</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#" class="">Home</a></li>
                        <li class=" dropdown">
                            <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Departments <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li class=" dropdown">
                                    <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">View Departments</a>
                                </li>
                                <li><a href="#">Add New</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Add New</a></li>
                        <li class=" dropdown"><a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Managers <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">View Managers</a></li>
                                <li><a href="#">Add New</a></li>
                            </ul>
                        </li>
                        <li class=" dropdown"><a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Staff <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">View Staff</a></li>
                                <li><a href="#">Add New</a></li>
                                <li><a href="#">Bulk Upload</a></li>
                            </ul>
                        </li>
                        <li class=" down"><a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">HR <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Change Time Entry</a></li>
                                <li><a href="#">Report</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav pull-right">
                        <li class=" dropdown"><a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Signed in as  <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Change Password</a></li>
                                <li><a href="#">My Profile</a></li>
                            </ul>
                        </li>
                        <li class=""><a href="#">Logout</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

Nota: el menú está trasparente, colócale un color a tu gusto. Probablemente salgan algunos errores, normalmente es el Padding el que suele fallar, el width y algunos elementos mas.

0

Saliendome un poco de Bootstrap podría darte una alternativa, ahora bien. Ésta alternativa no es optimizada, pero igual puedes adaptarla.

https://codepen.io/anon/pen/weBPLb

El menú está vertical y es accesible desde un botón para que aparezca / desaparezca.

HTML

<div class="menu">
    <div class="insider">
        <h5 class="text-center">Menú de navegación</h5>
        <ul class="items">
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Inicio</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Item 2</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Item más largo</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Item aún más largo</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Otro item</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Ésto no acaba</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Hasta cuando</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Deténte</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Super increíble</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Oh my God!</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Save us</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Save us</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Save us</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">NOW!</a>
            </li>
            <li class="item">
                <a href="#" class="btn btn-primary form-control">Último y más largo ítem</a>
            </li>
        </ul>
    </div>
</div>
<div class="container">
    <button class="btn btn-danger abrirMenu form-control">Abrir / Cerrar</button>
</div>

CSS

.menu{
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #0275d8;
    padding: 12px;
    z-index: 999;
}
.menu .insider{
    width: 100%;
    height: 100%
    background-color: #0275d8;
}
.menu .insider h5{
    color: #1591ff;
}
.menu .insider ul.items{
    display: block;
    font-size: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-y: auto
}
.menu .insider ul.items .item{
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
}

jQuery / JavaScript

$(document).ready(function() {
    var ven = $(window);
    var inn = $(".menu .insider");
    var abierto = false;
    $(".menu").css({
        "width": 240,
        "height": ven.height()
    });
    $(".menu .insider ul.items").css({
        "height": (ven.height() - 24) - $(inn).find('h5').height()
    });

    $(".menu").css({
        left: ($(".menu").width() * -1) - 100
    });

    function an(){
        if (!abierto){
            abierto = true;
            $(".menu").animate({
                display:'block',
                opacity:1,
                left: 0
            }, 1000, "easeOutExpo");
        }else{
            abierto = false;
            $(".menu").animate({
                display:'',
                opacity:'',
                left: ($(".menu").width() * -1) - 100
            }, 1000, "easeOutExpo");
        }
    }

    $(".abrirMenu").on('click', function(event) {
        an();
    });
  ven.resize(function(){
    $(".menu").css({
      "width": 240,
      "height": ven.height()
    });
    $(".menu .insider ul.items").css({
      "height": (ven.height() - 24) - $(inn).find('h5').height()
    });
  });

});

NOTA: Yo uso jQuery 3, jQuery UI & Bootstrap 4 en éste ejemplo.

Adicionalmente: Si te gustan las animaciones y quieres saber más de ellas en jQuery UI hay muchas más: https://api.jqueryui.com/easings/

Espero pueda servirte.

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.