Sujet Précédent Sujet Suivant

Menu Javascript et CSS complexe

Résolu/Fermé
xavierh Messages postés 72 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 9 août 2009 - 3 juil. 2008 à 21:09
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:49
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
A voir également:

10 réponses

Réponse 1 / 10
blue-project
3 juil. 2008 à 23:52 
<dl>
   <dt onmouseover="stopanim()," onmouseout="replayanim();" onclick="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>


Differencie les 2 actions différament, sinon si tu veut que ce soit toujour au 'survolage'

sinon methode flach...
1
Réponse 2 / 10
xavierh Messages postés 72 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 9 août 2009 25
5 juil. 2008 à 08:48
J'ai déplacé ce post dans la catégorie webmastering, ici http://www.commentcamarche.net/forum/affich 7244109 menu css et javascript complexe
1
Réponse 3 / 10
xavierh Messages postés 72 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 9 août 2009 25
4 juil. 2008 à 08:14
Merci beaucoup, c'est ce que je voulais, ce n'ai pas grave si ca n'est pas au survolage. Je vais tester tout de suite.
0
Réponse 4 / 10
xavierh Messages postés 72 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 9 août 2009 25
4 juil. 2008 à 08:24
Oui mais il faut que je mettent un div "centre".

Edite: j'ai tout embrouillé je n'y arrive pas!
Quelqu'un pourrais juste faire un test avec par exemple menu 1 et dans ce menu 1, 3 sous-menu.

et faire 3 ou 4 menu.

Si vous y arrivez tennez moi au courant,
Merci.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
xavierh Messages postés 72 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 9 août 2009 25
4 juil. 2008 à 11:39
Un UP
0
Réponse 6 / 10
xavierh Messages postés 72 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 9 août 2009 25
4 juil. 2008 à 14:37
Personne ne pourrais me donner un code dont il est sur? Un code complet je veux dire parce que moi je ne comprends pas bien cela alors si vous me dites il suffit de... Ca coince ^^
0
Réponse 7 / 10
xavierh Messages postés 72 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 9 août 2009 25
4 juil. 2008 à 17:55
Personne ne peux m'aider?
0
Réponse 8 / 10
xavierh Messages postés 72 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 9 août 2009 25
4 juil. 2008 à 21:53
Encore un UP
0
Réponse 9 / 10
xavierh Messages postés 72 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 9 août 2009 25
5 juil. 2008 à 08:06
Aidez moi svp!
0
Réponse 10 / 10
xavierh Messages postés 72 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 9 août 2009 25
5 juil. 2008 à 08:49
;)
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses