MENÚ PANEL DE COLOR CON CSS3
septiembre 02, 2019
Existen los menús horizontales y verticales, pero también se puede crear uno que aune estas dos características.
Y eso es lo que he hecho con este menú con forma de panel, creado únicamente con CSS3, sin ningún tipo de imagen.
Como veis, consta de 9 enlaces cada uno de un color con efecto gradient (difuminado) que, al pasar el cursor por encima de ellos aparece el numero correspondiente al recuadro.
Para ponerlo en vuestro blog o web, tan solo tenéis que poner estos dos códigos, primero el CSS, que lo pondremos en la plantilla antes de </head> y guardamos.
Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
Coloca este código en el buscador y dale un "Enter"
</head>
Inserta las siguientes líneas de código justo arriba (ó antes) del código que encontraste
<style>
.menupanel{
width: 620px;
margin-left:-7px; padding: 15px;
list-style: none;
counter-reset: li;
background: #eee;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menupanel:before,
.menupanel:after {
content: "";
display: table;
}
.menupanel:after {
clear: both;
}
.menupanel {
zoom:1;
}
/* -------------------------------- */
.menupanel li {
position: relative;
float: left;
cursor: pointer;
height: 120px; width: 200px;
margin: 10px 0 0 10px;
color: #fff !important;font-size:22px;
}
.menupanel li:hover, .menu li:focus{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
}
.menupanel .cover{
z-index: 2;
}
.menupanel .cover .content{
overflow: visible;
}
.menupanel .cover:focus{
outline: 0;
}
/* -------------------------------- */
.menupanel li::after{
content: counter(li);
counter-increment: li;
font: italic bold 22px serif, georgia;
position: absolute;
color: rgba(255,255,255,.1);
opacity: 0;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.menupanel li:hover::after, .menu li:focus::after{
font-size: 100px;
opacity: 1;
}
.menupanel.cover::after{
z-index: -1;
}
/* -------------------------------- */
.menupanel li:nth-child(1),
.menupanel li:nth-child(2),
.menupanel li:nth-child(3){
margin-top: 0;
}
.menupanel li:nth-child(1),
.menupanel li:nth-child(4),
.menupanel li:nth-child(7){
margin-left: 0;
}
/* -------------------------------- */
.menupanel li:nth-child(1),
.menupanel li:nth-child(1) .content,
.menupanel li:nth-child(1) .close{
background-color: #2c618f;
}
.menupanel li:nth-child(2),
.menupanel li:nth-child(2) .content,
.menupanel li:nth-child(2) .close{
background-color: #91ab31;
}
.menupanel li:nth-child(3),
.menupanel li:nth-child(3) .content,
.menupanel li:nth-child(3) .close{
background-color: #714a28;
}
.menupanel li:nth-child(4),
.menupanel li:nth-child(4) .content,
.menupanel li:nth-child(4) .close{
background-color: #e58600;
}
.menupanel li:nth-child(5),
.menupanel li:nth-child(5) .content,
.menupanelli:nth-child(5) .close{
background-color: #c33a00;
}
.menupanel li:nth-child(6),
.menupanel li:nth-child(6) .content,
.menupanel li:nth-child(6) .close{
background-color: #7f5dac;
}
.menupanel li:nth-child(7),
.menupanel li:nth-child(7) .content,
.menupanel li:nth-child(7) .close{
background-color: #5672b7;
}
.menupanel li:nth-child(8),
.menupanel li:nth-child(8) .content,
.menupanel li:nth-child(8) .close{
background-color: #69003f;
}
.menupanel li:nth-child(9),
.menupanel li:nth-child(9) .content,
.menupanel:nth-child(9) .close{
background-color: #393043;
}
/* -------------------------------- */
.menupanel .content{
opacity: 0; display: none\9;
overflow: hidden;
font: 12px Arial, Helvetica;
position: absolute;
height: 120px; width: 200px; /* Ideally: height: 100%; width: 100%; but works at it should just in FF */
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.menupanel .expanded{
opacity: .95; display: block\9;
padding: 40px;
height: 300px; width: 540px; /* Cover the entire area */
}
.menupanel li:nth-child(3n) .content{ /* 3,6,9 */
right: 0;
}
.menupanel li:nth-child(3n-1) .expanded{ /* 2,5,8 */
left: 50%;
margin-left: -310px;
}
.menupanel li:nth-child(7) .content, /* 7,8,9 */
.menupanel li:nth-child(8) .content,
.menupanel li:nth-child(9) .content{
bottom: 0;
}
.menupanel li:nth-child(4) .expanded, /* 4,5,6 */
.menupanel li:nth-child(5) .expanded,
.menupanel li:nth-child(6) .expanded{
margin-top: -190px;
top: 50%;
}
/* -------------------------------- */
.menupanel .title{
position: absolute;
height: 100%; width: 100%;
text-align: center;
font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
opacity: .2;
}
.menupanel li:hover .title{
opacity: .7;
}
/* -------------------------------- */
.menupanel .close {
display: none;
border: 5px solid #fff;
color: #fff !important;
cursor: pointer;
height: 40px; width: 40px;
font: bold 20px/40px arial, helvetica;
position: absolute;
text-align: center;
top: -20px; right: -20px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}
.menupanel .cover .close{
display: block;
}
</style>
.menupanel{
width: 620px;
margin-left:-7px; padding: 15px;
list-style: none;
counter-reset: li;
background: #eee;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menupanel:before,
.menupanel:after {
content: "";
display: table;
}
.menupanel:after {
clear: both;
}
.menupanel {
zoom:1;
}
/* -------------------------------- */
.menupanel li {
position: relative;
float: left;
cursor: pointer;
height: 120px; width: 200px;
margin: 10px 0 0 10px;
color: #fff !important;font-size:22px;
}
.menupanel li:hover, .menu li:focus{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
}
.menupanel .cover{
z-index: 2;
}
.menupanel .cover .content{
overflow: visible;
}
.menupanel .cover:focus{
outline: 0;
}
/* -------------------------------- */
.menupanel li::after{
content: counter(li);
counter-increment: li;
font: italic bold 22px serif, georgia;
position: absolute;
color: rgba(255,255,255,.1);
opacity: 0;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.menupanel li:hover::after, .menu li:focus::after{
font-size: 100px;
opacity: 1;
}
.menupanel.cover::after{
z-index: -1;
}
/* -------------------------------- */
.menupanel li:nth-child(1),
.menupanel li:nth-child(2),
.menupanel li:nth-child(3){
margin-top: 0;
}
.menupanel li:nth-child(1),
.menupanel li:nth-child(4),
.menupanel li:nth-child(7){
margin-left: 0;
}
/* -------------------------------- */
.menupanel li:nth-child(1),
.menupanel li:nth-child(1) .content,
.menupanel li:nth-child(1) .close{
background-color: #2c618f;
}
.menupanel li:nth-child(2),
.menupanel li:nth-child(2) .content,
.menupanel li:nth-child(2) .close{
background-color: #91ab31;
}
.menupanel li:nth-child(3),
.menupanel li:nth-child(3) .content,
.menupanel li:nth-child(3) .close{
background-color: #714a28;
}
.menupanel li:nth-child(4),
.menupanel li:nth-child(4) .content,
.menupanel li:nth-child(4) .close{
background-color: #e58600;
}
.menupanel li:nth-child(5),
.menupanel li:nth-child(5) .content,
.menupanelli:nth-child(5) .close{
background-color: #c33a00;
}
.menupanel li:nth-child(6),
.menupanel li:nth-child(6) .content,
.menupanel li:nth-child(6) .close{
background-color: #7f5dac;
}
.menupanel li:nth-child(7),
.menupanel li:nth-child(7) .content,
.menupanel li:nth-child(7) .close{
background-color: #5672b7;
}
.menupanel li:nth-child(8),
.menupanel li:nth-child(8) .content,
.menupanel li:nth-child(8) .close{
background-color: #69003f;
}
.menupanel li:nth-child(9),
.menupanel li:nth-child(9) .content,
.menupanel:nth-child(9) .close{
background-color: #393043;
}
/* -------------------------------- */
.menupanel .content{
opacity: 0; display: none\9;
overflow: hidden;
font: 12px Arial, Helvetica;
position: absolute;
height: 120px; width: 200px; /* Ideally: height: 100%; width: 100%; but works at it should just in FF */
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.menupanel .expanded{
opacity: .95; display: block\9;
padding: 40px;
height: 300px; width: 540px; /* Cover the entire area */
}
.menupanel li:nth-child(3n) .content{ /* 3,6,9 */
right: 0;
}
.menupanel li:nth-child(3n-1) .expanded{ /* 2,5,8 */
left: 50%;
margin-left: -310px;
}
.menupanel li:nth-child(7) .content, /* 7,8,9 */
.menupanel li:nth-child(8) .content,
.menupanel li:nth-child(9) .content{
bottom: 0;
}
.menupanel li:nth-child(4) .expanded, /* 4,5,6 */
.menupanel li:nth-child(5) .expanded,
.menupanel li:nth-child(6) .expanded{
margin-top: -190px;
top: 50%;
}
/* -------------------------------- */
.menupanel .title{
position: absolute;
height: 100%; width: 100%;
text-align: center;
font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
opacity: .2;
}
.menupanel li:hover .title{
opacity: .7;
}
/* -------------------------------- */
.menupanel .close {
display: none;
border: 5px solid #fff;
color: #fff !important;
cursor: pointer;
height: 40px; width: 40px;
font: bold 20px/40px arial, helvetica;
position: absolute;
text-align: center;
top: -20px; right: -20px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}
.menupanel .cover .close{
display: block;
}
</style>
Ahora, alli donde queramos mostrarlo, pegamos el siguiente codigo, en un gadget HTML/Javascript sustituyendo lo que esta en color rojo por los textos y las urls de los enlaces que queramos poner:
<ul class="menupanel">
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
</ul>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
</ul>
En Blogger también podéis añadir los 2 códigos juntos en un gadget HTML/Javascript, eso ya a gusto de cada uno/a.
Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Busca el widget que dice “HTML-Javascript” y ábrelo
Coloca el siguiente código en el interior
Después de haber insertado el código, un clic en "Guardar"
Data de la Publicación; 02-09-2019
Fuente; redeando
Publicado por;
0 comentarios