2

Mis objetivos aquí son 3:

  • Rotar o transformar el "+" en una cruz
  • Desplegar un menú centrado al pasar el ratón sobre el "+" bajo la caja, los 4 en la misma línea: Link1/Link2/Link3/Link4. Y que no desaparezcan al quitar el ratón de encima de la caja sino al quitarlo del área de la línea de links + la caja
  • Que al reducirse la pantalla de 600px esta función la realice al hacer clic.

body{ height:1000px;}
#header{
	position:fixed;
	z-index:1000;
	top:5px;
	padding-left:15px;
	padding-top:20px;
	padding-bottom:20px;
	padding-right:15px;
	border:black solid 1px;
	margin:0;
	left:0;
	text-align:center;
	left:50%;
	margin-left:-17px;
	font-size:20px;
	font-weight:bold;
	line-height:0px;
	}
#header:hover {border:none;
}
#menu{display:none;}
<div id="header">
+
  <div id="menu">
   <a href="#"> Link 1</a> 
    <a href="#"> Link 2</a> 
    <a href="#"> Link 3</a> 
    <a href="#"> Link 4</a> 
    </div>
</div>

5
  • Donde está el menú y los demás links? Agrega el ejemplo completo
    – devconcept
    el 10 ago. 2016 a las 14:17
  • Hecho @devconcept
    – Ivan Soler
    el 10 ago. 2016 a las 14:23
  • ¿Podrías claificar un poco lo del "+" y la cruz? No me termina de quedar claro
    – Alvaro Montoro
    el 10 ago. 2016 a las 14:59
  • 1
    ¿Tienes que mantener esa estructura HTML?¿Y ese CSS? Para hacer lo que pides, reescribiría casi todo lo que tienes :$
    – Alvaro Montoro
    el 10 ago. 2016 a las 15:09
  • Pienso lo mismo que @AlvaroMontoro. Para la animación del + podrías usar rotate(45deg) el 10 ago. 2016 a las 15:29

2 respuestas 2

4

Lo que quieres es algo complicado pero aquí tienes una solución de CSS puro.

body {
  height: 1000px;
}
#header {
  position: fixed;
  z-index: 1000;
  top: 5px;
  padding: 20px 15px 15px;
  border: solid 1px black;
  text-align: center;
  left: 50%;
  margin: 0 0 0 -17px;
  font-size: 20px;
  font-weight: bold;
  line-height: 0px;
}
#header:hover {
  border: solid 1px black;
  cursor: pointer;
}
.menu {
  display: none;
  list-style: none;
  position: fixed;
  top: 40px;
  width: 200px;
  left: 50%;
  margin-left: -125px;
}
.menu li {
  color: white;
  font-size: medium;
  font-weight: normal;
  padding: 15px;
  background-color: royalblue;
  border-bottom: white solid 1px;
}
#header:hover .menu {
  display: none;
}
#header .cross {
  position: absolute;
  pointer-events: none;
  top: 15px;
  left: 8px;
  background-color: white;
  font-size: 20px;
  padding: 12px;
  transition: all 0.3s ease-in-out;
  margin: 0;
  display: block;
}
#header:hover .cross {
  transform: none;
}
#header input[type='checkbox']:checked + .cross {
  transform: rotateZ(45deg);
}
#header input[type='checkbox']:checked + .cross + .menu {
  display: block
}
@media screen and (min-width: 600px) {
  #header:hover {
    border: solid 1px transparent;
  }
  #header:hover .menu {
    display: block
  }
  #header:hover .cross {
    transform: rotateZ(45deg);
  }
}
<div id="header">
  <input type="checkbox" />
  <div class="cross">
    +
  </div>
  <ul class="menu">
    <li>
      <a>Link1</a>
    </li>
    <li>
      <a>Link2</a>
    </li>
    <li>
      <a>Link3</a>
    </li>
    <li>
      <a>Link4</a>
    </li>
  </ul>
</div>

La razón por la que es complicado en css es que para hacer un toggle tienes que usar un input de tipo checkbox y la pseudoclase :checked ya que uno de tus requerimientos es que se activase con click.

Estos elementos son un poco difíciles de estilar así que la solución más rápida y simple es cubrirlos con otro elemento y hacer que el click pase "a través" de él con pointer-events: none

Tuve que cambiar un poco la estructura ya que de lo contrario sería imposible lograrlo sin javascript.

1
  • Genial por hacerlo sólo con HTML y CSS. Se me pasó la parte de "con CSS" y me salté a JavaScript. Tendré que actualizar mi respuesta.
    – Alvaro Montoro
    el 10 ago. 2016 a las 17:36
2

Voy a ir desde cero e, incrementalmente, explicando y añadiendo poco a poco lo que pides.

Rotar o transformar el "+" en una cruz

Esto lo puedes hacer bien con texto o bien con las pseudo-clases ::before y ::after. Elijas el método que elijas, el texto que rota debe ir en su propio elemento (porque si no, acabarías rotando todo: texto, caja y menú).

Aquí dejo un ejemplo de cómo se haría con texto:

#header {
  position:fixed;
  top:5px;
  left:50%;
  width:40px;
  height:40px;
  border:1px solid black;
  line-height:40px;
  text-align:center;
  transform:translate(-50%, 0);
  transition:border 0.2s;
}

#header .aspa {
  transition: transform 0.2s;
}

#header:hover {
  border:1px solid transparent;
}

#header:hover .aspa {
  transform:rotate(45deg);
}
<div id="header">
  <div class="aspa">+</div>
</div>

Si lo que buscas es tener una animación más elaborada, personalmente optaría por el método de las pseudo-clases: te da más control al poder animarlas individualmente y con diferentes estilos.


Desplegar un menú centrado al pasar el ratón sobre el "+" bajo la caja, los 4 en la misma línea: Link1/Link2/Link3/Link4. Y que no desaparezcan al quitar el ratón de encima de la caja sino al quitarlo del área de la línea de links + la caja

Esto es relativamente simple: añade la caja con el menú, ponle display:none y cuando se pase el menú por encima de la cruz, que se cambia a display:block. Para centrarlo, dale un año definido y ponle un margin-left negativo de la mitad del ancho (+ la mitad del cuadrado, para que se quede centrado con respecto al mismo).

El código sería así:

#header {
  position:fixed;
  top:5px;
  left:50%;
  width:40px;
  height:40px;
  border:1px solid black;
  line-height:40px;
  text-align:center;
  transform:translate(-50%, 0);
  transition:border 0.2s;
}

#header .aspa {
  transition: transform 0.2s;
}

#header:hover {
  border:1px solid transparent;
}

#header:hover .aspa {
  transform:rotate(45deg);
}

#menu {
  border:1px solid black;
  width:200px;
  display:none;
  margin-left:-80px;
}

#header:hover #menu {
  display:block;
}
<div id="header">
  <div class="aspa">+</div>
  <div id="menu">
    <a href="#"> Link 1</a> 
    <a href="#"> Link 2</a> 
    <a href="#"> Link 3</a> 
    <a href="#"> Link 4</a> 
  </div>
</div>


Que al reducirse la pantalla de 600px esta función la realice al hacer clic

Versión nueva del tercer paso: usando exclusivamente CSS y HTML.

#header {
  position:fixed;
  top:5px;
  left:50%;
  width:40px;
  height:40px;
  border:1px solid black;
  line-height:40px;
  text-align:center;
  transform:translate(-50%, 0);
  transition:border 0.2s;
}

#header input {
  display:none;
}

#header .aspa {
  display:block;
  transition: transform 0.2s;
}

#aspabox:checked ~ #header {
  border:1px solid transparent;
}

#aspabox:checked ~ #header .aspa {
  transform:rotate(45deg);
}

#menu {
  border:1px solid black;
  width:200px;
  display:none;
  margin-left:-80px;
}

input:checked ~ #header #menu {
  display:block;
}

/* hover solo se aplicara cuando el ancho sea 600px o mas */
@media (min-width: 600px) {
  #header:hover {
    border:1px solid transparent;
  }

  #header:hover .aspa {
    transform:rotate(45deg);
  }

  #header:hover #menu {
    display:block;
  }
}
<input type="checkbox" id="aspabox" />
<div id="header">
  <label class="aspa" for="aspabox">+</label>
  <div id="menu">
    <a href="#"> Link 1</a> 
    <a href="#"> Link 2</a> 
    <a href="#"> Link 3</a> 
    <a href="#"> Link 4</a> 
  </div>
</div>


Versión anterior del tercer paso: usa JavaScript - Para esto vas a necesitar dos cosas: JavaScript y @media queries (aunque se podría hacer sólo con JavaScript). La idea es crear una clase que realice lo mismo que el :hover y hacer que el :hover sólo se aplique para resoluciones mayores que 600px. Entonces con JavaScript le añadirías o quitarías esa clase.

Aquí dejo un ejemplo:

document.querySelector("#header").addEventListener("click", function() {
  if (this.className == "active") {
    this.className = "";
  } else {
    this.className = "active";
  }
});
#header {
  position:fixed;
  top:5px;
  left:50%;
  width:40px;
  height:40px;
  border:1px solid black;
  line-height:40px;
  text-align:center;
  transform:translate(-50%, 0);
  transition:border 0.2s;
}

#header .aspa {
  transition: transform 0.2s;
}

#header.active {
  border:1px solid transparent;
}

#header.active .aspa {
  transform:rotate(45deg);
}

#menu {
  border:1px solid black;
  width:200px;
  display:none;
  margin-left:-80px;
}

#header.active #menu {
  display:block;
}

/* hover solo se aplicara cuando el ancho sea 600px o mas */
@media (min-width: 600px) {
  #header:hover {
    border:1px solid transparent;
  }

  #header:hover .aspa {
    transform:rotate(45deg);
  }

  #header:hover #menu {
    display:block;
  }
}
<div id="header">
  <div class="aspa">+</div>
  <div id="menu">
    <a href="#"> Link 1</a> 
    <a href="#"> Link 2</a> 
    <a href="#"> Link 3</a> 
    <a href="#"> Link 4</a> 
  </div>
</div>

Para ver cómo el hover no funciona en pantallas de menos de 600px deberás pulsar el botón de "Pantalla completa" y entonces cambiar el tamaño de la ventana a algo menor de 600px.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.