entre Desarrolladores

Question

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

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...
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!
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...
Coloca una imagen de como la quieres, porqwue simplemente tu eres el que necesita ayuda ;)
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!
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.

Answer 1

3 Respuestas

Luluica · Answer 2 · 2016-09-05T18:00:37+0000

2votos

Leonardo-Tadei Puntos227320

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!

respondido por Leonardo-Tadei (227.320 puntos) Sep 5, 2016

seleccionada por Luluica Sep 7, 2016

0voto

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

comentado por Luluica (180 puntos) Sep 7, 2016

0voto

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;
}

comentado por Luluica (180 puntos) Sep 7, 2016

editado por Leonardo-Tadei Sep 7, 2016

Leonardo-Tadei · Answer 3 · 2016-09-02T17:24:31+0000

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

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!

luis2016 · Answer 4 · 2016-09-04T17:20:14+0000

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;
    }

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 :)

Pregunta

Como hacer un menú fijo horizontal pero con dos renglones de diferente color solo usando HTML y CSS

Leonardo-Tadei comentado Sep 2, 2016

Luluica comentado Sep 2, 2016

Leonardo-Tadei comentado Sep 2, 2016

x4mp73r comentado Sep 3, 2016

Luluica comentado Sep 5, 2016

Peter comentado Sep 7, 2016

Por favor, accede o regístrate para añadir un comentario.

3 Respuestas

Luluica comentado Sep 7, 2016

Luluica comentado Sep 7, 2016

Por favor, accede o regístrate para añadir un comentario.

Luluica comentado Sep 2, 2016

Por favor, accede o regístrate para añadir un comentario.

Luluica comentado Sep 5, 2016

Por favor, accede o regístrate para añadir un comentario.

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

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Santiago2610 comentó Mar 23

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta