CSS menu concept 2

Developer
Josep Antoni Bover Comas
Size
9,311 Kb
Views
30,360
  1. CSS menu concept 2 Previews
  2. CSS menu concept 2 HTML Codes
  3. CSS menu concept 2 CSS Codes

How do I make an css menu concept 2?

What is a css menu concept 2? How do you make a css menu concept 2? This script and codes were developed by Josep Antoni Bover Comas on 27 August 2022, Saturday.

CSS menu concept 2 Previews
IQ Test

CSS menu concept 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS menu concept 2</title> <link rel='stylesheet prefetch' href='css/alkmxn.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class='MenuDesalineado'> <div class='Pregunta'>Cual es la mejor forma de derrotar a un demonio?</div> <li><span>Una estaca bien clavada en el ojo..</span></li> <li><span>Con sexo drogas y rock'n roll.</span></li> <li><span>Ácido corrosivo en las partes intimas.</span></li> <li><span>Un destructor imperial, nunca falla.</span></li> <li><span>Al modo tradicional, con espada y escudo.</span></li> <li><span>Agua bendita.</span></li>
</ul> <script src='js/alkmxn.js'></script>
</body>
</html>

CSS menu concept 2 - Script Codes CSS Codes

.MenuDesalineado { position:absolute; padding:0px; display:inline-block; margin:0px; -webkit-user-select: none; /* Chrome, Safari, y Opera 15 */ -moz-user-select: none; -ms-user-select: none; user-select: none; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; color:white; text-shadow:1px 1px 0px rgb(50,50,50);
}
/* MenuItem */
.MenuDesalineado > li > span { margin:10px 0px 0px 60px; display:table; padding:5px; border:1px solid rgb(0,0,0); background-color:rgb(235, 0, 0); position:relative; -webkit-transform:scale(1.0,1.0); transform:scale(1.0,1.0); transition:-webkit-transform 0.3s ease-in 0s, color 0.5s ease-in 0s; transition:transform 0.3s ease-in 0s, color 0.5s ease-in 0s; outline:1px solid transparent;
}
.MenuDesalineado > li:nth-child(2) > span {	background-color:rgb(235, 0, 0);	}
.MenuDesalineado > li:nth-child(3) > span {	background-color:rgb(225, 0, 0);	}
.MenuDesalineado > li:nth-child(4) > span {	background-color:rgb(215, 0, 0);	}
.MenuDesalineado > li:nth-child(5) > span {	background-color:rgb(205, 0, 0);	}
.MenuDesalineado > li:nth-child(6) > span {	background-color:rgb(195, 0, 0);	}
.MenuDesalineado > li:nth-child(7) > span {	background-color:rgb(185, 0, 0);	}
.MenuDesalineado > li:hover { z-index:200;
}
/* Escala */
.MenuDesalineado > li > span:hover { -webkit-transform:scale(1.2, 1.2); transform:scale(1.2, 1.2); background-color:#F60;
}
/* Eje para las rotaciones de los menuitems */
.MenuDesalineado > li { margin:12px auto; display:table; cursor:pointer; position:absolute; top:4px; list-style:none; border-radius:5px; transform:rotateZ(-180deg); -webkit-transform:rotateZ(-180deg); /* (Aquí el delay es 1 porque es el mouseout) */ transition:-webkit-transform 0.5s ease-in 1.5s, top 0.5s ease-in 1.5s; transition:transform 0.5s ease-in 1.5s, top 0.5s ease-in 1.5s;
}
/* El primer item se considera el menú padre */
.MenuDesalineado > .Pregunta { font-weight:bold; margin:15px auto; padding: 14px 12px 14px 52px; position:relative; list-style:none; border:1px solid rgb(0,0,0); background-color:rgb(155, 0, 0); z-index:100; border-radius:5px; transition:background-color 0.5s ease-in 0s; background-image:url('http://devildrey33.es/Web/Graficos/Logo.png'), -webkit-linear-gradient(rgba(255, 0, 0, 0.7), rgb(150, 0, 0)); background-image:url('http://devildrey33.es/Web/Graficos/Logo.png'), linear-gradient(rgba(255, 0, 0, 0.7), rgb(150, 0, 0)); background-repeat:no-repeat, no-repeat; background-position:left center;
}
.MenuDesalineado:hover > .Pregunta {	background-color:rgb(255,0,0);	}
/* Posiciones para los items */
.MenuDesalineado > li:nth-child(2) > span {	z-index:99;	}
.MenuDesalineado > li:nth-child(3) > span {	z-index:98;	}
.MenuDesalineado > li:nth-child(4) > span {	z-index:97;	}
.MenuDesalineado > li:nth-child(5) > span {	z-index:96;	}
.MenuDesalineado > li:nth-child(6) > span {	z-index:95;	}
.MenuDesalineado > li:nth-child(7) > span {	z-index:94;	}
/* Transición del despliegue */
.MenuDesalineado:hover > li { /* Rotaciones para los items (Aquí el delay es 0 porque es el mouseover) */ transition:transform 0.5s ease-in 0s, top 0.5s ease-in 0s; transition:-webkit-transform 0.5s ease-in 0s, top 0.5s ease-in 0s;
}
/* Mozilla Firefox requiere el transition en el mismo selector que las propiedades (yo creo que es un bug..) */
.MenuDesalineado:hover > li:nth-child(2) {	transition:transform 0.5s ease-in 0s, top 0.5s ease-in 0s;	top:58px;	-webkit-transform:rotateZ(5deg);	transform:rotateZ(5deg);	}
.MenuDesalineado:hover > li:nth-child(3) {	transition:transform 0.5s ease-in 0s, top 0.5s ease-in 0s;	top:102px;	-webkit-transform:rotateZ(-363.5deg);	transform:rotateZ(-363.5deg);	}
.MenuDesalineado:hover > li:nth-child(4) {	transition:transform 0.5s ease-in 0s, top 0.5s ease-in 0s;	top:146px;	-webkit-transform:rotateZ(-1.3deg);	transform:rotateZ(-1.3deg);	}
.MenuDesalineado:hover > li:nth-child(5) {	transition:transform 0.5s ease-in 0s, top 0.5s ease-in 0s;	top:190px;	-webkit-transform:rotateZ(2deg);	transform:rotateZ(2deg);	}
.MenuDesalineado:hover > li:nth-child(6) {	transition:transform 0.5s ease-in 0s, top 0.5s ease-in 0s;	top:234px;	-webkit-transform:rotateZ(-1.9deg);	transform:rotateZ(-1.9deg);	}
.MenuDesalineado:hover > li:nth-child(7) {	transition:transform 0.5s ease-in 0s, top 0.5s ease-in 0s;	top:278px;	-webkit-transform:rotateZ(1.2deg);	transform:rotateZ(1.2deg);	}
CSS menu concept 2 - Script Codes
CSS menu concept 2 - Script Codes
Home Page Home
Developer Josep Antoni Bover Comas
Username devildrey33
Uploaded August 27, 2022
Rating 3
Size 9,311 Kb
Views 30,360
Do you need developer help for CSS menu concept 2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josep Antoni Bover Comas (devildrey33) Script Codes
Name
Anillos
Simple geometry
3D Rgb Spyral
CSS Loader Cassette
Sphere vertex shader
MultiCube
CSS menu concept
3D Audio Analyzer 0.2
Hex Tunnel 0.2
Adiestramiento de cubos
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!