Création menu style Oracle.com

Version imprimable

18/01/2011, 20h55
alex_vino

Création menu style Oracle.com

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.
18/01/2011, 21h41
omelhor

Citation:

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/
18/01/2011, 22h11
alex_vino

Super examples, mais on ne peut pas les télécharger ni même regarder le code ?
19/01/2011, 15h11
ornitho13

si tu scrolles légèrement la page, tu verras le code CSS et XHTML ;)
19/01/2011, 15h36
lodan

C'est comme sur La Redoute et cela porte un nom ?
19/01/2011, 16h41
alex_vino

Citation:

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 :aie:)

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

:oops:

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.

19/01/2011, 19h27
alex_vino

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

Merci beaucoup je vais scruter le site :ccool: