Discussion :

[alex_vino]

Bonjour,

Je souhaiterais réaliser des menus du mêùe style que Oracle : http://www.oracle.com/technetwork/ja...ads/index.html

Je le trouve très simple d'utilisation, très performant et très jolie.

Quelqu'un aurait des idées pour m'éclairer ?

Merci d'avance.

[omelhor]

Bonjour,

Je souhaiterais réaliser des menus du mêùe style que Oracle : http://www.oracle.com/technetwork/ja...ads/index.html

Je le trouve très simple d'utilisation, très performant et très jolie.

Quelqu'un aurait des idées pour m'éclairer ?

Merci d'avance.

Tu devrais pouvoir trouver des exemple et t'en inspirer sur :
http://www.cssplay.co.uk/menus/

[alex_vino]

Super examples, mais on ne peut pas les télécharger ni même regarder le code ?

[ornitho13]

si tu scrolles légèrement la page, tu verras le code CSS et XHTML

[lodan]

C'est comme sur La Redoute et cela porte un nom ?

[alex_vino]

si tu scrolles légèrement la page, tu verras le code CSS et XHTML

Bon je dois vraiment être trop bête mais je ne vois pas (et pourtant je connais la redoute )

Par exemple dis moi comment obtenir le code de celà : http://www.cssplay.co.uk/menus/css3-backslide.html ??

[lodan]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul id="menu">
<li><a href="#url"><b></b>Home</a></li>
<li><a href="#url"><b></b>Products</a></li>
<li><a href="#url"><b></b>Services</a></li>
<li><a href="#url"><b></b>Privacy</a></li>
<li><a href="#url"><b></b>Contact Us</a></li>
<li><a href="#url"><b></b>Site Map</a></li>
</ul>

Code :

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
<style type="text/css">
#menu {padding:0; margin:0 0 50px 10px; list-style:none; height:50px;}
#menu li {float:left;}
#menu li a {
display:block; 
border: 1px solid #a99;
height:50px; line-height:50px;
text-decoration: none;
font-size:12px;
font-family:verdana, arial, sans-serif;
padding:0 30px;
color:black;
overflow:hidden;
position:relative;
z-index:10;
margin-right:-1px;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#menu li a b {
display:block; 
height:100px; 
width:100%; 
position:absolute; 
left:0; 
top:0; 
background: url(back/back.gif) repeat-x left top; 
z-index:-1;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#menu li a:hover {color: #fff;}
#menu li a:hover b {top:-50px;}
</style>

C'est ce que je trouve dans le code source, je ne vois pas comment autrement.

Ne pas oublier l'auteur Stu Nicholls si nécessaire.