Menu responsive con imagenes demo de ayuda en foro

Developer
Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;)
Size
2,515 Kb
Views
46,552
  1. Menu responsive con imagenes demo de ayuda en foro Previews
  2. Menu responsive con imagenes demo de ayuda en foro HTML Codes
  3. Menu responsive con imagenes demo de ayuda en foro CSS Codes

How do I make an menu responsive con imagenes demo de ayuda en foro?

Este demo es solo una sugerencia para un usuario de forosdelweb: http://www.forosdelweb.com/f53/menu-responsive-con-imagenes-1098846/. What is a menu responsive con imagenes demo de ayuda en foro? How do you make a menu responsive con imagenes demo de ayuda en foro? This script and codes were developed by Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;) on 18 October 2022, Tuesday.

Menu responsive con imagenes demo de ayuda en foro Previews
IQ Test

Menu responsive con imagenes demo de ayuda en foro - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu responsive con imagenes demo de ayuda en foro</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="menu-imagenes"> <ul class="lista"> <li class="item"> <a href="#target"> <img id="Image2" src="http://www.crmbusiness.biz/purah2/wp-content/themes/inovado/framework/inc/headers/menu/img/BOTONES%20MENU-01.png"> </a> </li> <li class="item" id="target"> <a href="#"> <img id="Image3" src="http://www.crmbusiness.biz/purah2/wp-content/themes/inovado/framework/inc/headers/menu/img/BOTONES%20MENU-26.png"> </a> </li> <li class="item"> <a href="#"> <img id="Image4" src="http://www.crmbusiness.biz/purah2/wp-content/themes/inovado/framework/inc/headers/menu/img/BOTONES%20MENU-27.png"> </a> </li> <li class="item"> <a href="#"> <img id="Image5" src="http://www.crmbusiness.biz/purah2/wp-content/themes/inovado/framework/inc/headers/menu/img/BOTONES%20MENU-28.png"> </a> </li> <li class="item"> <a href="#"> <img id="Image7" src="http://www.crmbusiness.biz/purah2/wp-content/themes/inovado/framework/inc/headers/menu/img/BOTONES%20MENU-30.png"> </a> </li> <li class="item"> <a href="#"> <img id="Image8" src="http://www.crmbusiness.biz/purah2/wp-content/themes/inovado/framework/inc/headers/menu/img/BOTONES%20MENU-31.png"> </a> </li> </ul>
</nav>
</body>
</html>

Menu responsive con imagenes demo de ayuda en foro - Script Codes CSS Codes

.lista
{ padding: 0; background-color: rgb(140, 198, 63); text-align: center; max-width: 66em; margin: 0 auto;
}
.lista, .lista *
{ box-sizing: border-box; -webkit-transition: all ease .5s; transition: all ease .5s;
}
.item
{ list-style-type: none; display: inline-block; border: 2px dashed rgba(255,255,255,.5); border-width: 0 1px 0 0; margin: 0.5em 0em; padding: .5em;
}
.item:last-child
{ border: none;
}
.item a
{ display: block;
}
@media (max-width: 70em) { .item { width: 32.5%; margin: 0.1em; border-width: 0 1px 1px 0; } .item img { height: 5em; }
}
@media (max-width: 50em) { .item { width: 48%; margin: 0.1em; border-width: 0 1px 1px 0; } .item:nth-child(even) { border-width: 0 0 1px; } .item:nth-child(5) { border-bottom: none; } .lista .item:not(:first-child), .lista .item:not(:first-child) * { -webkit-transition: all ease .5s; transition: all ease .5s; } .item img { height: 4.55em; }
}
@media (max-width: 20em) { .item { width: 100%; margin: 0.1em; border-width: 0 0 1px 0; overflow: hidden; padding: 0; } .item:nth-child(5) { border-bottom: 1px dashed rgba(255,255,255,.5); } .item:first-child { height: 4em; width: 98%; } .item img { -webkit-transform: scaleY(0); transform: scaleY(0); height: 1px; margin: 0; } .item:first-child a { min-height: 3em; background-image: url('http://cdn.flaticon.com/png/256/11350.png'); background-size: auto 100%; background-repeat: no-repeat; background-position: center center; -webkit-filter: invert(1); filter: invert(1); } .item:first-child img { padding: 1em; height: 3.5em; } .item:not(:first-child) { position: absolute; opacity: 0; -webkit-transition: all 1s ease 1s; transition: all 1s ease 1s; } .item:first-child:hover ~ .item, item:target, .item:target ~ .item { display: inline-block; opacity: 1; position: static; -webkit-transition: all .5s ease .3s; transition: all .5s ease .3s; } .item:first-child:hover ~ .item img, item:target img, .item:target ~ .item img { -webkit-transform: scaleY(1); transform: scaleY(1); height: 10vh; -webkit-transition: all .5s ease .3s; transition: all .5s ease .3s; }
}
Menu responsive con imagenes demo de ayuda en foro - Script Codes
Menu responsive con imagenes demo de ayuda en foro - Script Codes
Home Page Home
Developer Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;)
Username g3kdigital
Uploaded October 18, 2022
Rating 3
Size 2,515 Kb
Views 46,552
Do you need developer help for Menu responsive con imagenes demo de ayuda en foro?

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!

Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;) (g3kdigital) Script Codes
Name
Menu Arbol Vr 1.3
Personalizando el input file
SynerMetrix Maqueta
Version beta EDUHOLDING
INTENTO FALLIDO DE ANIMACION SVG
Correo fraudulento de Davivienda
Seven pillars
Menu Arbol Vr 1.4
Slider Molon CSS3 RWD, background-image
Aviso de Cookies
Create amazing love letters 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!