Bonsoir à tous,
J'ai un footer qui s'affiche et ce cache via Toggle. En voici les CSS :
et le js :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
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 #toggler{ text-align: center; position: fixed; bottom: 30px; width: 100%; height: 30px; z-index: 9999999; left: 0px; right: 0px; background-color: #000000; margin-left: auto; margin-right: auto; margin-top: 0px; }#toggle{ text-align: center; bottom: 0px; position: fixed; width: 100%; z-index: 999999; background-color: #000000; margin-left: auto; margin-right: auto; margin-top: 0em; } #toggle p{text-align:center;padding:0} .button { background-image: url(imgs/fleche_haut.jpg); background-repeat: no-repeat; text-align: center; position: relative; background-position: 50% 0%; margin-bottom: 0px; } .background { /* [disabled]background-color: #CC3300; */ background-image: url(imgs/fleche_bas.jpg); background-repeat: no-repeat; }
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
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 jQuery(document).ready(function() { jQuery('#toggle').hide(); // toggle() jQuery('a#toggler').click(function() { jQuery('#toggle').slideToggle(400); return false; }); }); /* ]]> */ </script> <script> $(".button").on('click', function(){ $(this).toggleClass('background'); }) </script> <script> $(document).ready(function(){ $('.logo').hide(); }); $(window).load(function(){ $('.header').fadeIn('slow'); $(".header").delay(1800).animate({ marginTop:'0px', opacity:1 },1800,'swing'); }); </script>
Y'a y'il moyen de remplacer les images (fleche_haut et _bas.jpg) par du texte/icônes ?
Voici mon html actuel :
Merci pour votre aide.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 <a href="#" id="toggler" class="button">Ouvrir</a> <div id="toggle" style="display:none;">
Bonne fin de week-end,
dh
Partager