Hacer DIV responsive
Publicado por Y3rs3Y (1 intervención) el 07/03/2018 22:39:20
buenas tardes :
necesito que mi codigo sea responsive:
mi estructura es basicamente asi
es mi pagina de inicio en la cual muestro un menu con 3 imagenes y redirijo a otras paginas segun la seleccion.
pero necesito que sea responsive.
agradesco su ayuda
seria genial que el menu al verse en un dispositivo movil en lugar de verse horizontal se vea vertical.
adjunto mi codigo y archivos js/css/imagenes espero su ayuda.
muchas gracias
Mi HTML
Mi CSS
necesito que mi codigo sea responsive:
mi estructura es basicamente asi
1
2
3
4
5
6
7
<DIV>
<UL>
<Li>
<Li>
<Li>
</UL>
</DIV>
es mi pagina de inicio en la cual muestro un menu con 3 imagenes y redirijo a otras paginas segun la seleccion.
pero necesito que sea responsive.
agradesco su ayuda
seria genial que el menu al verse en un dispositivo movil en lugar de verse horizontal se vea vertical.
adjunto mi codigo y archivos js/css/imagenes espero su ayuda.
muchas gracias
Mi HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Image Menu Example</title>
<link href="jimgMenukwicks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>
<!--[if IE]>
<script type="text/javascript">
$().ready(function() {
$(".jimgMenu ul").kwicks({max: 310, duration: 400, easing: "easeOutQuad"});
});
</script>
<![endif]--><script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({max: 600, duration: 300, easing: 'easeOutQuad'});
});
</script>
</head>
<body>
<div class="outer-div">
<div class="jimgMenu" >
<ul>
<li id="nature" class="servicetable"><a href="/helpdesk/">Nature</a></li>
<li id="abstract" class="servicetable"><a href="/siges/">Abstract</a></li>
<li id="urban" class="servicetable"><a href="/compras/">Urban</a></li>
</ul>
</div>
</div>
</body>
</html>
Mi CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
body
{ padding: 30px;background-color: #fcfcfc;
}.outer-div
{ padding: 30px;background-color: #f3f3f3;
}.jimgMenu {
position:relative; margin: 0 auto;max-width: 750px;
padding: 0px; height:500px; overflow: hidden;}.jimgMenu ul {
table-layout: fixed;
list-style: none;
margin: 0px; padding: 0px; display: block; height: 500px; position: relative; }.jimgMenu ul li {
width: 250px; float: left; display: block; overflow: hidden;}.jimgMenu ul li a {
text-indent: -1000px;
background:#fff repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer; display:block; overflow: hidden; height: 500px;}.jimgMenu ul li#nature a {
background: url(images/nature.jpg) repeat scroll 0%;
}.jimgMenu ul li#abstract a {
background: url(images/abstract.jpg) repeat scroll 0%;
}.jimgMenu ul li#urban a {
background: url(images/urban.jpg) repeat scroll 0%;
border-right-style: none;
}.clear {
clear: both;}- menu.rar(312,9 KB)
Valora esta pregunta
0
