entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Hola! Ya intente hacerlo pero solo me respeta un solo color y el primer menu lo desaparece y la otra opción si me deja los dos renglones mas no me respeta el color
Muchas Gracias

Leonardo-Tadei comentado Sep 2, 2016

Podrías poner una imagen del resultado que querés obtener?

Dependiendo de la cantidad de elementos que tenga el menú, se plantean diferentes soluciones...

Luluica comentado Sep 2, 2016

Hola Leonardo muchas gracias por contestar lamentablemente no me deja cargar la imagen correctamente pero tratare de colocarlo por escrito

Recursos Humanos Operaciones Administración (color cafe) por decir un color
Inicio Quienes Somos Galeria Contacto (color azul)
por decir un color

Menu fijo y los colores al 100%

Muchas gracias y Saludos!

Leonardo-Tadei comentado Sep 2, 2016

Podrás poner una imagen en algún sitio tuyo o sitio público y enlazarla en tu pregunta?

Perdón que incista, pero si bien creo que entiendo lo que querés obtener, no estoy seguro de que aspecto tiene todo en conjunto...

x4mp73r comentado Sep 3, 2016

Coloca una imagen de como la quieres, porqwue simplemente tu eres el que necesita ayuda ;)

Luluica comentado Sep 5, 2016

Hola Leonardo!! Gracias todavía no esta en linea anexo una ruta de descarga de la imagen en we transfer espero que si se pueda descargar es un JPG llamado ejemplo.

Disponible hasta
12 de septiembre de 2016

Enlace de descarga
https://we.tl/rer1ADwBmO

Muchas gracias y Saludos!

Peter comentado Sep 7, 2016

Sería mejor que publiques la imagen anexando directamente en el sitio para que todos puedan verla y darte opciones o en su caso un enlace directo a la misma.

Saludos.

3 Respuestas

2votos

Leonardo-Tadei Puntos225280

Hola @Luluica,

para hacer menúes como se ven en la imagen, lo más cómodo y simple es generar 2 estructuras UL, y decorar cdada una de la forma deseada.

Si necesitás que el menú esté fijo, es decir, que al scrollar siga visible, bastará con que pongas a ambos en DIV que esté fijo y que los UL estén dentro de él.

Hacer todo en el mismo UL implica hacer algo que la propia definición del HTML no soporta: decidir en qué LI se corta el UL y los demás bajan a la siguiente posición... tal vez se podría conseguir ese efecto con un solo UL con un CSS complejo, pero en ese caso dudo que se pueda hacer también responsivo.

La solución más simple es tener dos ULs...

Saludos cordiales!

Luluica comentado Sep 7, 2016

Muchas Gracias @Leonardo-Tadei por el apoyo ya quedo el menú si lo único que no me esta respetando es lo del scroll pero el resto ya sin ningún problema con separar las ul me quedo como les mande la imagen muchísimas gracias =D

Luluica comentado Sep 7, 2016

Ya no tengo ningún problema ya quedo y funciona muchísimas gracias a todos @Leonardo-Tadei gracias por el consejo con la UL fue el punto clave para que respetara los atributos solo en los CSS me faltaba agregar el atributo al nav

nav
{
width: 100%;
position: fixed;
z-index: 100;
}

1voto

x4mp73r Puntos13390

En menos de 5 min. encontré un ejemplo, Con todo respeto y espero no te molestes pero ¿Es tan difícil buscar ejemplos en Internet?

HTML

<body class="empresa">
  <header>
    <div class="nav">
      <ul>
        <li class="home"><a href="#">Inicio</a></li>
        <li class="acerca"><a href="#">Acerca</a></li>

      </ul>
    </div>
  </header>
</body>

CSS

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.home {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  background: #F4511E;
  height: 40px;
  border-bottom: 1px solid #888;
}
.acerca {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  background: #66BB6A;
  height: 40px;
  border-bottom: 1px solid #888;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}

@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }

  /* Mostrar en línea */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }

}

Ver resultado en JSFiddle

Luluica comentado Sep 2, 2016

Hola! x4mp73r, gracias por contestar y créeme que si eh estado buscando mucho en internet si llegue a un grupo de ayuda es por que no me a salido lo que busco, ya aplique el ejercicio que me comentas pero no es lo que necesito ya que lo ocupo en dos renglones como mencionaba en la pregunta digamos que al ejemplo que me pasas el primer renglón seria el inicio (color Rojo) y en el segundo renglón abajo el Acerca (el color verde) y que ambos sea fijo respetando los colores Gracias y Saludos!

2votos

luis2016 Puntos1780

quitale el responsive que tiene el codigo que te dio x4mp73r

 ```
     <body class="empresa">
    <header>
    <div class="nav">
    <ul>
    <li class="home"><a href="#">Inicio</a></li>
    <li class="acerca"><a href="#">Acerca</a></li>

     </ul>
     </div>
     </header>
    </body>
   body {
   margin: 0;
   padding: 0;
   background: #ccc;
   }
    header{

    position:fixed;
    }
  .nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
     padding: 0;
      margin: 0;
    }
     .home {
   font-family: 'Oswald', sans-serif;
     font-size: 1.2em;
     line-height: 40px;
    background: #F4511E;
     height: 40px;
      border-bottom: 1px solid #888;
 }
.acerca {
  font-family: 'Oswald', sans-serif;
   font-size: 1.2em;
   line-height: 40px;
   background: #66BB6A;
  height: 40px;
   border-bottom: 1px solid #888;
   }

 .nav a {
    text-decoration: none;
   color: #fff;
  display: block;
   transition: .3s background-color;
  }

   .nav a:hover {
   background-color: #005f5f;
    }

Luluica comentado Sep 5, 2016

Muchas Gracias Luis por contestar ya aplique el ejercicio y si se baja el botón solo que ahora estoy viendo como aplicarlo a que cuando sean mas puntos del menu si se vaya hacia un lado y no hacia abajo en ambos renglones

Gracias :)

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta