[JS/JQUERY] Horizontaal slide menu
Ik heb niet echt veel kennis van jQuery en heb ook al het een het ander geprobeerd maar raak niet echt vooruit.
Het is beste wat ik kan met jQuery is de tekstkleur van de links rood maken wanneer je erover gaat met de muis en als de muis terug uit het menu gaat alles terug op het origineel kleur zetten..
Daarom heb ik een test layout gemaakt en hoop dat jullie mij hierbij kunnen helpen om een slide menu met jQuery te maken.
Wat ik juist bedoel met een "slice menu" is dat je een bepaalde actieve knop hebt en als je over een andere knop gaat de background van de huidige knop naar de andere slided..
Is er iemand die weet met welke functies en hoe ik hier juist aan begin?
Dit is alvast de broncode van de test pagina, die overigens hier online te bekijken is: http://uploads.wouterds.be/download/9/phphulp.html/
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
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
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
<!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>Test JavaScript Project Layout</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
background: url('http://uploads.wouterds.be/download/5/body_bg.png/') top left repeat;
}
div#wrapper {
margin: 50px auto;
border: 1px solid #CCC;
background: #FAFAFA;
width: 500px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
div#wrapper div#header {
font-size: 150%;
padding: 10px 0 20px 15px;
}
div#wrapper div#menu {
background: #EEE;
padding: 5px 0;
border: 1px solid #CCC;
border-left: 0;
border-right: 0;
}
div#wrapper div#menu a {
color: #151515;
text-decoration: none;
padding: 5px 10px;
}
div#wrapper div#menu a:hover, div#wrapper div#menu a.active, div#wrapper div#menu:hover a:hover, div#wrapper div#menu:hover a.active:hover {
background: #DDD;
}
div#wrapper div#menu:hover a.active {
background: none;
}
div#wrapper div#content {
line-height: 20px;
padding: 5px 20px;
}
div#wrapper div#footer {
text-transform: uppercase;
font-size: 10px;
font-style: italic;
text-align: center;
color: #555;
padding: 5px;
border-top: 1px solid #CCC;
letter-spacing: 2px;
word-spacing: 2px;
}
</style>
<script type="text/javascript" src="http://uploads.wouterds.be/download/6/jquery-1.5.2.js/"></script>
<script type="text/javascript">
$(function(){
$('#menu').children('a').mouseover(function() {
$(this).css('color', 'red');
}); // Kleur tekst rood wanneer muis over knop gaat
$('#menu').mouseleave(function() {
$(this).children('a').css('color', 'inherit');
}); // Zet kleur terug op origineel als muis uit het menu gaat
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">Test JavaScript Project</div>
<div id="menu">
<a href="#" class="active">About</a>
<a href="#">Blog</a>
<a href="#">Services</a>
<a href="#">History</a>
<a href="#">Scripts</a>
<a href="#">Contact</a>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget libero et enim ullamcorper condimentum ut et elit. Curabitur interdum arcu mollis velit imperdiet vitae condimentum urna tristique. Etiam faucibus ligula sed est venenatis a fermentum nisi facilisis. Sed libero diam, suscipit a tempus eget, egestas vel est. Aliquam erat volutpat.</p>
<p>Vestibulum ut aliquam risus. Suspendisse sit amet arcu tortor, eget bibendum orci. Morbi eleifend sagittis hendrerit. Donec in urna eget mi consequat mattis. Etiam bibendum sem non massa lobortis vitae hendrerit ligula iaculis.</p>
<p>Aliquam elementum felis molestie libero tincidunt ut gravida ante ultricies. Proin feugiat sapien non erat condimentum sollicitudin. Pellentesque eget ipsum quis ipsum lacinia ullamcorper at nec urna. Fusce in massa in elit venenatis lobortis. Aenean condimentum tempor laoreet.</p>
</div>
<div id="footer">© 2011 All Rights Reserved To WouterDS</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test JavaScript Project Layout</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
background: url('http://uploads.wouterds.be/download/5/body_bg.png/') top left repeat;
}
div#wrapper {
margin: 50px auto;
border: 1px solid #CCC;
background: #FAFAFA;
width: 500px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
div#wrapper div#header {
font-size: 150%;
padding: 10px 0 20px 15px;
}
div#wrapper div#menu {
background: #EEE;
padding: 5px 0;
border: 1px solid #CCC;
border-left: 0;
border-right: 0;
}
div#wrapper div#menu a {
color: #151515;
text-decoration: none;
padding: 5px 10px;
}
div#wrapper div#menu a:hover, div#wrapper div#menu a.active, div#wrapper div#menu:hover a:hover, div#wrapper div#menu:hover a.active:hover {
background: #DDD;
}
div#wrapper div#menu:hover a.active {
background: none;
}
div#wrapper div#content {
line-height: 20px;
padding: 5px 20px;
}
div#wrapper div#footer {
text-transform: uppercase;
font-size: 10px;
font-style: italic;
text-align: center;
color: #555;
padding: 5px;
border-top: 1px solid #CCC;
letter-spacing: 2px;
word-spacing: 2px;
}
</style>
<script type="text/javascript" src="http://uploads.wouterds.be/download/6/jquery-1.5.2.js/"></script>
<script type="text/javascript">
$(function(){
$('#menu').children('a').mouseover(function() {
$(this).css('color', 'red');
}); // Kleur tekst rood wanneer muis over knop gaat
$('#menu').mouseleave(function() {
$(this).children('a').css('color', 'inherit');
}); // Zet kleur terug op origineel als muis uit het menu gaat
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">Test JavaScript Project</div>
<div id="menu">
<a href="#" class="active">About</a>
<a href="#">Blog</a>
<a href="#">Services</a>
<a href="#">History</a>
<a href="#">Scripts</a>
<a href="#">Contact</a>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget libero et enim ullamcorper condimentum ut et elit. Curabitur interdum arcu mollis velit imperdiet vitae condimentum urna tristique. Etiam faucibus ligula sed est venenatis a fermentum nisi facilisis. Sed libero diam, suscipit a tempus eget, egestas vel est. Aliquam erat volutpat.</p>
<p>Vestibulum ut aliquam risus. Suspendisse sit amet arcu tortor, eget bibendum orci. Morbi eleifend sagittis hendrerit. Donec in urna eget mi consequat mattis. Etiam bibendum sem non massa lobortis vitae hendrerit ligula iaculis.</p>
<p>Aliquam elementum felis molestie libero tincidunt ut gravida ante ultricies. Proin feugiat sapien non erat condimentum sollicitudin. Pellentesque eget ipsum quis ipsum lacinia ullamcorper at nec urna. Fusce in massa in elit venenatis lobortis. Aenean condimentum tempor laoreet.</p>
</div>
<div id="footer">© 2011 All Rights Reserved To WouterDS</div>
</div>
</body>
</html>
Dank bij voorbaat,
met vriendelijke groeten,
Paradox
Gewijzigd op 24/07/2011 09:42:15 door John Acid
Ter aanvulling: als je met de muis over een li gaat dan kan je met http://api.jquery.com/position/ de positie opvragen (van links). Die waarde gebruik je voor de animatie. Als je met de muis weg gaat dan vraag je met position de waarde op van het actieve element en doe je een animate daar naar toe.
Paradox Nvt op 24/07/2011 00:55:37:
Beste PHPHulp leden,
Ik heb niet echt veel kennis van jQuery en heb ook al het een het ander geprobeerd maar raak niet echt vooruit.
Het is beste wat ik kan met jQuery is de tekstkleur van de links rood maken wanneer je erover gaat met de muis en als de muis terug uit het menu gaat alles terug op het origineel kleur zetten..
Ik heb niet echt veel kennis van jQuery en heb ook al het een het ander geprobeerd maar raak niet echt vooruit.
Het is beste wat ik kan met jQuery is de tekstkleur van de links rood maken wanneer je erover gaat met de muis en als de muis terug uit het menu gaat alles terug op het origineel kleur zetten..
@TheForce;
Zoals je kunt lezen heeft Paradox het over de hover op de links,volgens mij via jquery, dit kan/moet gewoon met CSS aangezien alle browsers, ook de IE versies, dat ondersteunen.
Daar had ik het over, dat is toch vrij duidelijk, lijkt mij.
Gewijzigd op 24/07/2011 13:51:20 door John Acid
Bij deze ga ik het nog eens herhalen, die links die rood worden als je erover gaat is het beste wat ik kan met jQuery waarmee ik dus wou aantonen dat ik er niet echt verstand van heb en echt wel veel hulp nodig heb..
Wat ik er tot nu toe dus van afleid is dat ik in de navigatie div (#menu) een extra div steek met een bepaald kleur dat dus eigenlijk de bewegende achtergrond wordt?
Gewijzigd op 29/07/2011 12:13:03 door Wouter De Schuyter