Menu CSS et Javascript complexe

Fermé

xavierh Messages postés 72 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 9 août 2009 - 5 juil. 2008 à 08:47
xavierh Messages postés 72 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 9 août 2009 - 6 juil. 2008 à 10:16

Bonjour,

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 s'il vous plaît ne me dîtes pas "il suffit de ..." J'ai tout esseyé! Je veux que lorsque je passe la souris sur le cercle qui tourne, il s'arrete: ca c'est fait. Que lorsque j'enlève la souris il recommence: ca c'est fait. Que lorque je clic sur un menu, (onclick), celui dévoile ses sous-menus.
o_O "Me regarde pas comme ça!"

A voir également:

Menu CSS et Javascript complexe
Menu déroulant excel - Guide
Telecharger javascript - Télécharger - Langages
Windows 11 menu démarrer classique - Guide
Canon quick menu - Télécharger - Utilitaires
Réinitialiser menu démarrer windows 10 - Guide

1 réponse

Réponse 1 / 1

xavierh Messages postés 72 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 9 août 2009 25
6 juil. 2008 à 10:16

...

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

les entrées et les sortées

Comment retrouver le bouton menu de Tv Tcl

menu caché

Déblocage du mode hôtel Philips 20HF5234/10