Jquery se ejecuta al cargar la pagina.
Publicado por Tomas (8 intervenciones) el 26/09/2015 14:46:28
Muy buenas, tengo una funcion donde le digo que cuando se haga clic en el logo, aparezca la barra de navegación (versión movil). Pero aparece nada mas cargar la pagina, sin hacer nada..los iconos tampoco se ven, el icono de "menú" que esta al costado del logo(una imagen) sí que se ve.
El css lo cargue al principio, el script jquery y la librería al final. Pueden dar por hecho que la direccion de los archivos están bien.
https://jsfiddle.net/0utf236v/
CSS
JQUERY
El css lo cargue al principio, el script jquery y la librería al final. Pueden dar por hecho que la direccion de los archivos están bien.
https://jsfiddle.net/0utf236v/
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
<body>
<header id="header-principal" >
<div id="logo">
<a><img id="img2" src="logo-mobile.png"></img><img id="img3" src="menu.png"></img></a>
</div>
<nav>
<ul>
<li><a href="">link0<img class="icon" src="img1.png"></img></a></li>
<li><a href="">link1<img class="icon" src="img2.png"></img></a></li>
<li><a href="">link2<img class="icon" src="img3.png"></img></a></li>
<li><a href="">link3<img class="icon" src="img4.png"></img></a></li>
</ul>
</nav>
</header>
<div id="main">
<article id="articulo-uno">
<header class="articulo-header">
<h2>titilo1</h2>
</header>
<p class="articulo">text1</p>
</article>
<article id="articulo-dos">
<header class="articulo-header">
<h2>titulo2</h2>
</header>
<p class="articulo">texto2</p>
</article>
</div>
<footer style="position:absolute;bottom:0;">
<p><font color="grey";>footer </font></p>
</footer>
<!-- Librerias Jquery --><script src="http://code.jquery.com/jquery-latest.js"></script>
<!--script mobile-bar--><script src="menu.js" type="text/jscript"></script>
</body>
</html>
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
body{margin:0px;font-family:'Questrial';
height:100%;
}/********************************************* HEADER ******/#header-principal{
}/****************imagenes**********/#img2{
display:inline-block;
z-index:1;
margin-top:5px;
margin-left:2%;
height:50px;width:80%;
float:left; } #img3{
display:inline-block;
float:right;margin-top:12px;
margin-right:2%;
} #img4{ display:none;}
/******************************** Logo ************/#logo{
margin-top:0px;
height:55px;background: green url('fondo.png') repeat;
}/***************************************************Navigation bar *****/nav{width:100%;
height:auto;background-color:green;
font-size:20px;
position: absolute;}nav li a{list-style:none;
text-decoration:none;
color:black;}
nav ul li.active a{
color: #FFF;
box-shadow: 0px 0px 0px 0px;
padding:0em 0em;float:left;}nav ul li{margin-top:20px;
margin-bottom:20px;
}nav ul{display:inline-flex;
flex-direction:column;
margin-left:0px;
padding-left:2%;
}.icon{
float:right;} /*************************************************************** Footer ******/footer{width:100%;
height:100px;text-align:center;
text-align:center;
background: #1C1C1C url('fondo.png') repeat;
}footer p {position:relative;padding: 2em 0em; }/*********************************************************** Banner *********/#banner{
}/****************************************************** Container *************/#main{
width:100%;
display:inline.flex;
flex-direction:column;
height:auto;}.articulo-header{
text-align:center; }
#articulo-uno{
width:100%;
height:auto;margin-bottom:0px;
text-align:justify;
margin-left:5px;
margin-right:5px;
}#articulo-dos{
width:100%;
height:auto;text-align:justify;
margin-left:5px;
margin-right:5px;}
.articulo{
padding-left:px;
padding-right:10px;
}JQUERY
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(main);
var contador = 1;function main(){
$('#logo').click(function(){
if(contador == 1){
$('nav').animate({
left: '0'
});
contador = 0;} else {
contador = 1;$('nav').animate({
left: '-100%'
});
}});
};Valora esta pregunta
0
