Création menu style Oracle.com [Résolu]

[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]

Envoyé par 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.

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]

Envoyé par ornitho13

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 :

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 :

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.

[alex_vino]

Ouai galère je pensais qu'on pouvait télécharger directement.

Merci beaucoup je vais scruter le site