Menu in- en uitklappen
Ik ben aan het proberen om mijn menu in en uit te laten klappen.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$(document).ready(function () {
$( "#header > .links" ).toggle(function() { // Als er voor de eerste keer op wordt geklikt
$( "#content > .links" ).animate({width: '250px'}, "slow" ); // Het menu 250px breedt maken
}, function() { // Als er voor de tweede keer op wordt geklikt
$( "#content > .links" ).animate({width: '50px'}, "fast" ); // Het menu 50px breedt maken (normaal)
});
});
$( "#header > .links" ).toggle(function() { // Als er voor de eerste keer op wordt geklikt
$( "#content > .links" ).animate({width: '250px'}, "slow" ); // Het menu 250px breedt maken
}, function() { // Als er voor de tweede keer op wordt geklikt
$( "#content > .links" ).animate({width: '50px'}, "fast" ); // Het menu 50px breedt maken (normaal)
});
});
Je moet eerst op de header klikken om het menu breedt te maken, als je dan vervolgens nog een keer klikt moet hij weer naar zijn normale positie gaan, 50px breedt.
Nu werkt de code nog niet. Ik heb eigenlijk bij elke code $(document).ready(function () { zien staan. Maar dat is hier blijkbaar niet de goede manier, als ik de pagina laadt gaat het menu namelijk meteen weg. Dat 'ie weg gaat is ook al iets apparts, nergens staat namelijk width: 0 of iets dergelijks.
Help?!
Toevoeging op 14/12/2013 20:45:47:
Waarom #header > .links nou weg gaat snap ik eigenlijk wel. Staat logisch in de code namelijk. Hij wordt getoggled.
Heb het even online gezet:
http://jsfiddle.net/MachielK_/ZfHZV/521/
Gewijzigd op 14/12/2013 20:47:18 door Machiel K
Je kan eventueel dit doen:
Code (php)
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
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
<style>
#header {
background: red;
height: 50px;
width: 100%;
overflow: hidden;
}
#header > .links {
width: 60px;
height: 50px;
line-height: 50px;
text-align: center;
border-right: 1px solid darkred;
cursor: pointer;
}
#content {
background: lightgrey;
width: 100%;
height: 500px;
}
#content > .links {
background: grey;
width: 60px;
height: 500px;
border-right: 1px solid black;
cursor: pointer;
}
#content > .expanded {
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// wanneer de pagina geladen is
$(document).ready(function() {
// elementen cashen
var header_links = $('#header > .links');
var content_links = $('#content > .links');
// we zetten een onClick op #header > .links
$('#header > .links').click(function() {
// kijken of '#content > .links' expanded is; we kijken enkel naar element 0.
// Dan moeten we .expanded toevoegen of weg nemen
var is_expanded = content_links.eq(0).hasClass('expanded');
if (is_expanded) {
content_links.removeClass('expanded');
content_links.animate({width: '60px'}, "slow" );
}
else {
content_links.addClass('expanded');
content_links.animate({width: '250px'}, "slow" );
}
});
});
</script>
<div id="header">
<div class="links">
Klik
</div>
</div>
<div id="content">
<div class="links">
Menu <br/>
Menu <br/>
</div>
</div>
#header {
background: red;
height: 50px;
width: 100%;
overflow: hidden;
}
#header > .links {
width: 60px;
height: 50px;
line-height: 50px;
text-align: center;
border-right: 1px solid darkred;
cursor: pointer;
}
#content {
background: lightgrey;
width: 100%;
height: 500px;
}
#content > .links {
background: grey;
width: 60px;
height: 500px;
border-right: 1px solid black;
cursor: pointer;
}
#content > .expanded {
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// wanneer de pagina geladen is
$(document).ready(function() {
// elementen cashen
var header_links = $('#header > .links');
var content_links = $('#content > .links');
// we zetten een onClick op #header > .links
$('#header > .links').click(function() {
// kijken of '#content > .links' expanded is; we kijken enkel naar element 0.
// Dan moeten we .expanded toevoegen of weg nemen
var is_expanded = content_links.eq(0).hasClass('expanded');
if (is_expanded) {
content_links.removeClass('expanded');
content_links.animate({width: '60px'}, "slow" );
}
else {
content_links.addClass('expanded');
content_links.animate({width: '250px'}, "slow" );
}
});
});
</script>
<div id="header">
<div class="links">
Klik
</div>
</div>
<div id="content">
<div class="links">
Menu <br/>
Menu <br/>
</div>
</div>
Ik gebruik nu gewoon dezelfde code als die in de jsfiddle van het eerste bericht.
Code (php)
1
2
3
4
5
2
3
4
5
$( "#header > .links" ).toggle(function() { // Als er op het "menu" icoontje" wordt geklikt
$( "#main > .links" ).stop().animate( { width: "225px" }, "slow" ); // De icoontjes en de tekst laten zien
}, function() { // Als er nog een keer op het "menu icoontje" wordt geklikt
$( "#main > .links" ).stop().animate( { width: "50px" } ); // Alleen de icoontjes laten zien
});
$( "#main > .links" ).stop().animate( { width: "225px" }, "slow" ); // De icoontjes en de tekst laten zien
}, function() { // Als er nog een keer op het "menu icoontje" wordt geklikt
$( "#main > .links" ).stop().animate( { width: "50px" } ); // Alleen de icoontjes laten zien
});
Hij werkt prima... alleen met 1.7.2.min.js (jsfiddle). Als ik namelijk 1.9.1.min.js (jsfiddle) gebruik, geeft hij een totaal ander effect (een effect dat ik niet wens!)
Gewijzigd op 16/12/2013 12:16:58 door Machiel K
Toggle betekent vandaag iets anders (is nu een trigger. Dus voert de toggle zelf uit).
Dus met een moderne jQuery versie werkt de oude code niet. Het lijkt me geen goede practice om speciaal een achterhaalde jQuery versie te laden om 1 verouderde functie te kunnen blijven gebruiken.
Toevoeging op 16/12/2013 12:27:45:
Machiel, wat wil je precies bereiken? Wellicht kan ik je helpen zonder Jquery te gebruiken (of javascript).
- Als je op #header > .links klikt: moet de breedte van #content > .links, van 50px naar 250px gaan.
- Als je vervolgens nog een keer op #header > .links klikt: moet de breedte van #content > .links, weer terug gaan naar zijn normale breedte, 50px.
Wat ik dan ook nog als eis heb, is dat het met een 'veeg beweging' veranderd, en niet bam in een keer.
Het liefst gebruik ik jQuery (of javascript) omdat het dan meestal in alle browsers werkt. CSS transition bijvoorbeeld, werkt niet in elke browser.
Machiel K op 16/12/2013 12:38:28:
Het liefst gebruik ik jQuery (of javascript) omdat het dan meestal in alle browsers werkt. CSS transition bijvoorbeeld, werkt niet in elke browser.
CSS transition word ondersteund door elke browser (mits deze up-to-date is) op Opera Mini na. Mensen die die browser of een oudere versie van een browser hebben verdienen deze fancy-ness niet. Keus ligt geheel aan jou, ik zou het alleen zelf jammer vinden om speciaal voor een menu extra javascript te schrijven in een appart bestandje die appart in de pagina geladen moet worden.
Toch heb ik later het zelfde principe ook weer nodig. Alle formulieren verzend ik met jQuery/ajax.
Een "goed" knop.
- Voor de eerste keer op goed klikken: Goed +1 in de database en niet nog een keer kunnen klikken.
- Voor de tweede keer op goed klikken: Goed -1 in de database en weer aanklikbaar maken.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
(function($) {
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));