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
122
123
124
125
126
127
128
129
130
131
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<meta name="description" content="Page type">
<title>Page type</title>
<style>
/* BASE */
body {
background-color:#ffffff;
color:#000000;
font-family:sans-serif;
font-size:medium;
font-style:normal;
font-weight:normal;
line-height:normal;
letter-spacing:normal;
}
h1,h2,h3,h4,h5 {
font-family:serif;
}
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
margin:0px;
padding:0px;
}
/* TEST */
#navigation-block {
position:relative;
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: 100%;
}
#hide {
position:absolute;
top:30px;
left:-190px;
}
ul#sliding-navigation
{
list-style: none;
font-size: .75em;
margin: 30px 0;
padding: 0;
}
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
display: block;
width: 150px;
padding: 5px 18px;
margin: 0;
margin-bottom: 5px;
}
ul#sliding-navigation li.sliding-element h3
{
color: #fff;
background:#333 url(../images/menu/heading_bg.jpg) repeat-y;
font-weight: normal;
}
ul#sliding-navigation li.sliding-element a
{
color: #999;
background:#222 url(../images/menu/tab_bg.jpg) repeat-y;
border: 1px solid #1a1a1a;
text-decoration: none;
}
ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }
</style>
<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
<script>
function slide(navigation_id, pad_out, pad_in, time, multiplier){
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";
// initiates the timer used for the sliding animation
var timer = 0;
// creates the slide animation for all list elements
$(list_elements).each(function(i, item){
// margin left = - ([width of element] + [total vertical padding of element])
$(item).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(item).animate({ marginLeft: "0" }, timer);
$(item).animate({ marginLeft: "15px" }, timer);
$(item).animate({ marginLeft: "0" }, timer);
});
// creates the hover-slide effect for all link elements
$(link_elements).each(function(i, item){
$(item).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
}
);
});
}
$(function(){
slide("#sliding-navigation", 25, 15, 150, .8);
});
</script>
</head>
<body>
<div id="conteneur">
<div id="navigation-block">
<ul id="sliding-navigation">
<li class="sliding-element"><h3>Navigation Title</h3></li>
<li class="sliding-element"><a href="#">Link 1</a></li>
<li class="sliding-element"><a href="#">Link 2</a></li>
<li class="sliding-element"><a href="#">Link 3</a></li>
<li class="sliding-element"><a href="#">Link 4</a></li>
<li class="sliding-element"><a href="#">Link 5</a></li>
</ul>
</div>
</div>
<iframe src="http://www.developpez.com/ws/badge?user=285162" style="border:none;"></iframe>
</body>
</html> |
