Bonjour,
Ce que je vais vous demander est assez complexe il me semble.
Il faut s'y connaitre en Javascript et en CSS.
Voilà: j'arrive à faire un menu déroulant en Javascript grace à ce code:
exemple 1
CODE JAVASCRIPT
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
CODE CSS
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menudéroulant {
position: fixed;
margin-left:150px;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menudéroulant dl {
float: left;
width: 200px;
margin: 0 1px;
}
#menudéroulant dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #deeee7;
}
#menudéroulant dd {
font: small;
}
#menudéroulant li {
text-align: center;
background: rgb(50,0,100);
}
#menudéroulant li a, #menu dt a {
color: gray;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menudéroulant li a:hover, #menudéroulant dt a:hover {
background: #a0cebc;
}
a {text-decoration: none;
color: black;
color: #222;
}
CODE HTML
<body>
<div id="menudéroulant">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">OX GAMES</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Jeux Flash</a></li>
<li><a href="#">Jeux en C</a></li>
<li><a href="#">Jeu PHP</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">OX MUSIC</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Vidéos</a></li>
<li><a href="#">Tablatures</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">OX TUTORIELS</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Flash</a></li>
<li><a href="#">Blender</a></li>
</ul>
</dd>
</dl>
</body>
Avec le code ci dessus j'ai donc une speedbarre fixe dans mon site.
_______________________________________________________________________________________
Deuxième chose que je sais faire: un menu circulaire!
exemple 2
CODE JAVASCRIPT
var c = 0;
var nb2;
var timer;
function menu(nb)
{
var a = 360 / nb;
nb2 = nb;
var posX;
var posY;
var rayon = 60;
var centreX = document.getElementById("centre").offsetLeft;
var centreY = document.getElementById("centre").offsetTop;
var lItem = 20;
var i = 1;
var item;
var b;
for(b = 0; b < 360; b += a)
{
posX = centreX + 25 + rayon * Math.cos(b * Math.PI / 180);
posY = centreY + 25 + rayon * Math.sin(b * Math.PI / 180);
item = document.getElementById("item" + i);
item.className = "item";
item.style.top = (posY - lItem / 2) + "px";
item.style.left = (posX - lItem / 2) + "px";
i++;
}
}
function anim()
{
c++;
var a = 360 / nb2;
var posX;
var posY;
var rayon = 70;
var centreX = document.getElementById("centre").offsetLeft;
var centreY = document.getElementById("centre").offsetTop;
var lCentre = 50;
var lItem = 20;
var i = 1;
var item
var b;
for(b = 0; b < 360; b = b + a)
{
posX = centreX + 25 + rayon * Math.cos((b + c) * Math.PI / 180);
posY = centreY + 25 + rayon * Math.sin((b + c) * Math.PI / 180);
item = document.getElementById("item" + i);
item.style.top = (posY - lItem / 2) + "px";
item.style.left = (posX - lItem / 2) + "px";
i++;
}
}
timer = setInterval("anim()",50);
function stopanim()
{
clearInterval(timer);
}
function replayanim()
{
timer = setInterval("anim()",50);
}
CODE CSS
#menu h2
{
color: #0000EE;
font-size: 15px;
}
#menu li
{
list-style-type: none;
list-style-position: inside;
}
#centre
{
height: 50px;
width: 50px;
margin: 70px;
border: 1px solid #BBBBBB;
}
.item
{
position: absolute;
position: fixed;
}
CODE HTML
<body onload="menu(5);">
<div id="menu" onmouseover="stopanim()," onmouseout="replayanim();">
<div id="centre">
Menu
</div>
</dd>
<ul>
<li id="item1">Menu 1</li>
<li id="item2">Menu 2</li>
<li id="item3">Menu 3</li>
<li id="item4">Menu 4</li>
<li id="item5">Menu 5</li>
</ul>
</div>
</body>
Et voila, avec ces codes j'obtient un menu circulaire qui tourne autour d'un centre!
_____________________________________________________________________________________
Maintenant voila ma
QUESTION !
Est-il possible de faire un "mélange" de ces deux codes de manière à avoir un menu circulaire qui tourne autour d'un point (deuxième code) et qui lorsque l'on y pointe son curseur, alors il dévoile des sous-menu (premier code)?
J'èspère avoir été clair,
Merci
PS: Je voudrait garder les menus et les sous menus du premier exemple.
Et si vous voulez des exemples sur internet, dites le moi et je vous donne un exemple pour chaqun mes deux exemples o_0
Configuration: Windows Vista
Internet Explorer 7.0
