Foros del Web » Creando para Internet » CSS »

Separar menús con "|"

 Estas en el tema de Separar menús con "|" en el foro de CSS en Foros del Web. Necesitaría separar los distintos campos del menú con el símbolo "|". Este es el menú: Código HTML: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original header { ...
  #1 (permalink)  
Antiguo 29/04/2018, 12:53
 
Fecha de Ingreso: septiembre-2011
Ubicación: Gran Canaria
Mensajes: 134
Antigüedad: 13 años, 2 meses
Puntos: 1
Separar menús con "|"
Necesitaría separar los distintos campos del menú con el símbolo "|".

Este es el menú:

Código HTML:

Código HTML: 
Ver original
  1. header {
  2.         background: #fff;
  3.         border-top: 2px solid;
  4.     }
  5.     /* Base Navigation */
  6.     header nav {
  7.         float: left;
  8.         margin: 0 0 0 20px;
  9.     }
  10.     .navbar {
  11.         border: none;
  12.         -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1);
  13.         box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1);
  14.         -webkit-border-radius: 0 0 0 0;
  15.         border-radius: 0 0 0 0;
  16.         z-index: 9997;
  17.     }
  18.     .navbar-default {
  19.         background-color: #fff;
  20.     }
  21.     .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  22.         color: #5e5e5e;
  23.         background-color: transparent;
  24.     }
  25.     .navbar-default .navbar-text {
  26.         color: #5e5e5e;
  27.     }
  28.     .navbar-default .navbar-nav > li > a {
  29.         color: #5e5e5e;
  30.     }
  31.     .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  32.         background-color: transparent;
  33.     }
  34.     .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  35.         background-color: transparent;
  36.     }
  37.     .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus {
  38.         color: #5e5e5e;
  39.         background-color: transparent;
  40.     }
  41.     .navbar-default .navbar-collapse, .navbar-default .navbar-form {
  42.         border-color: #e7e7e7;
  43.     }
  44.     .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  45.         background-color: #fff;
  46.     }
  47.     .navbar-nav .dropdown-menu  {
  48.         border-top: 2px solid;
  49.         font-size: 13px;
  50.     }
  51.     .navbar-default .navbar-nav .dropdown-menu > li > a {
  52.         color: #5e5e5e;
  53.     }
  54.     .navbar-default .navbar-nav .dropdown-menu > .active > a, .navbar-default .navbar-nav .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .dropdown-menu > .active > a:focus {
  55.         text-decoration: none;
  56.         background-color: #fff;
  57.         outline: 0;
  58.     }
  59.     .navbar-default .navbar-nav .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .dropdown-menu > .disabled > a:focus {
  60.         color: #999999;
  61.     }
  62.     @media (min-width: 1200px) {
  63.         /* Logo */
  64.         header #logo {
  65.             float: left;
  66.             padding: 20px 60px 20px 0;
  67.             border-right: 1px solid #e1e1e1;
  68.             max-width: 100%;
  69.         }
  70.         /* Navbar */
  71.         .navbar {
  72.             position: relative;
  73.             min-height: 50px;
  74.             margin-bottom: 0;
  75.         }
  76.         .navbar-brand {
  77.             float: left;
  78.             padding: 0;
  79.             font-size: 18px;
  80.             line-height: 20px;
  81.         }
  82.         .navbar > .container .navbar-brand {
  83.             margin-left: 0;
  84.         }
  85.         /* Dropdown */
  86.         .navbar-nav > li > a {
  87.             padding: 32px 20px;
  88.         }
  89.         .logo-lg .navbar-nav > li > a {
  90.             padding: 54px 20px;
  91.         }
  92.         .navbar-nav > li:first-child {
  93.             padding-left: 40px;
  94.         }
  95.         .navbar-nav .caret {
  96.             display: inline-block;
  97.             width: 0;
  98.             height: 0;
  99.             margin-left: 5px;
  100.             vertical-align: middle;
  101.             border-top: 4px solid;
  102.             border-right: 4px solid transparent;
  103.             border-left: 4px solid transparent;
  104.         }
  105.         .navbar-nav .dropdown {
  106.             position: relative;
  107.         }
  108.         .navbar-nav .dropdown-toggle:focus {
  109.             outline: 0;
  110.         }
  111.         .navbar-nav .dropdown-menu {
  112.             position: absolute;
  113.             top: 100%;
  114.             left: 0;
  115.             display: none;
  116.             float: left;
  117.             min-width: 160px;
  118.             padding: 0;
  119.             margin: 0;
  120.             font-size: 13px;
  121.             list-style: none;
  122.             background-color: #ffffff;
  123.             background-color: rgba(255, 255, 255, 0.95);
  124.             color: rgba(255, 255, 255, 0.95);
  125.             border-right: none;
  126.             border-bottom: 1px solid #fff;
  127.             border-left: none;
  128.             border-radius: 0px;
  129.             -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  130.             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  131.             background-clip: padding-box;
  132.         }
  133.         .navbar-nav > li > .dropdown-menu {
  134.             margin-top: -1px;
  135.         }
  136.         .navbar-nav .dropdown-menu.pull-right {
  137.             right: 0;
  138.             left: auto;
  139.         }
  140.         .navbar-nav .dropdown-menu .divider {
  141.             height: 1px;
  142.             margin: 9px 0;
  143.             overflow: hidden;
  144.             background-color: #e5e5e5;
  145.         }
  146.         .navbar-nav .dropdown-menu > li > a {
  147.             display: block;
  148.             padding: 10px 20px;
  149.             clear: both;
  150.             font-weight: normal;
  151.             line-height: 1.428571429;
  152.             white-space: nowrap;
  153.             -webkit-transition: all ease-in .1s;
  154.             -moz-transition: all ease .1s;
  155.             -ms-transition: all ease .1s;
  156.             -o-transition: all ease .1s;
  157.             transition: all ease-in .1s;
  158.             border-bottom: 1px solid #e1e1e1;
  159.             background-color: transparant;
  160.             border-right: 1px solid #fff;
  161.             border-left: 1px solid #fff;
  162.         }
  163.         .navbar-nav .dropdown-menu > li:last-child > a {
  164.             border-bottom: 0px;
  165.         }
  166.         .navbar-nav .dropdown-menu > li > a:hover, .navbar-nav .dropdown-menu > li > a:focus {
  167.             text-decoration: none;
  168.             background-color: #fff;
  169.             -webkit-transition: all ease-out .1s;
  170.             -moz-transition: all ease .1s;
  171.             -ms-transition: all ease .1s;
  172.             -o-transition: all ease .1s;
  173.             transition: all ease-out .1s;
  174.         }
  175.         .navbar-nav .dropdown-menu > .disabled > a:hover, .navbar-nav .dropdown-menu > .disabled > a:focus {
  176.             text-decoration: none;
  177.             cursor: not-allowed;
  178.             background-color: transparent;
  179.             background-image: none;
  180.             filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  181.         }
  182.         .navbar-nav .open > .dropdown-menu {
  183.             display: block;
  184.         }
  185.         .navbar-nav .open > .dropdown-menu, #top-header .open > .dropdown-menu {
  186.             animation-name: fadeIn;
  187.             animation-duration: 0.4s;
  188.             animation-iteration-count: 1;
  189.             animation-timing-function: ease-out;
  190.             -webkit-animation-name: fadeIn;
  191.             -webkit-animation-duration: 0.4s;
  192.             -webkit-animation-iteration-count: 1;
  193.             -webkit-animation-timing-function: ease-out;
  194.             -moz-animation-name: fadeIn;
  195.             -moz-animation-duration: 0.4s;
  196.             -moz-animation-iteration-count: 1;
  197.             -moz-animation-timing-function: ease-out;
  198.         }


Y esto lo que he añadido:





.navbar-nav > li > a::before {
margin-right: 10px;
margin-left: 10px;
content: " | ";
}

.navbar-nav > li > a::after {
content: ""; /* el último no incluye separador */
}
  #2 (permalink)  
Antiguo 30/04/2018, 09:18
Avatar de DragonX
Colaborador
  
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 22 años, 6 meses
Puntos: 177
Respuesta: Separar menús con "|"
proba con esto:

Código CSS: 
Ver original
  1. .navbar-nav > li > a::before {
  2.   margin-right: 10px;
  3.   margin-left: 10px;
  4.   content: " | ";
  5.   display: inline-block;
  6. }
  7. /* para que el primer elemento de la lista no tenga separador */
  8. .navbar-nav > li:first-child > a::before {
  9.   display: none;
  10. }

Slds.-
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #3 (permalink)  
Antiguo 06/05/2018, 12:13
 
Fecha de Ingreso: septiembre-2011
Ubicación: Gran Canaria
Mensajes: 134
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: Separar menús con "|"
Me sale igual que antes.

Ejemplo: | Conócenos (distancia mayor que con la izquierda) | Venta (distancia mayor que con la izquierda) | Alquiler (distancia mayor que co la izquierda)

Y ademas el símbolo "|" lo está agregando como parte del texto del menú ( exactamente con la palabra que le sigue | Conócenos - por ejemplo - como una palabra )

Gracias.
  #4 (permalink)  
Antiguo 06/05/2018, 13:53
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: Separar menús con "|"
A como le sufren con un menu, @juancarsantana haz atendido las indicaciones de la compañera @zanguanga ???
http://www.forosdelweb.com/f118/sepa...s-con-1161342/

Algún moderador con súper poderes que pueda unificar estos dos hilos?


@juancarsantana aquí tienes el ejemplo en acción, si no puedes con esto no hay nada que te salve.

Etiquetas: auto, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:10.