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.
+
podrías usarrotate(45deg)