Forums entraide et discussions

alex0714

Invité

Re : Comment créer une liste déroulante pour jeux

bonjour,

je voudrais créer une liste déroulante et ajouter des catégories de jeux et que quand on clique sur la catégorie cela nous mène sur une page avec les jeux par exemple d'aventure mais je ne sais pas comment faire est ce que quelqu'un pourrait m'aider ?

merci d'avance

GG le sympa

Administrateur

Lieu : Graçay

Inscription : 03-08-2006 à 14:41

Messages : 17 567

Re : Comment créer une liste déroulante pour jeux

Tu as plusieurs solutions.... CSS + Javascript ou Dhtml, ou encore du Flash

Voilà un éxemple CSS + Javascript :

Code Html du menu :

<table>
  <tr>
    <td colspan="3" class="menuz"><div id="mainMenu">
        <ul id="menuList">
          <!-- Menu Option 1 -->
          <li class="menubar"> <a class="starter" accesskey="1" href="#">Lien</a>
            <!-- Submenu 1 Options -->
            <!-- Menu Option 2 -->
          </li>
          <li class="menubar"> <a class="starter" accesskey="2 "href="#">Lien</a>
            <!-- Submenu 1 Options -->
            <ul class="menu" id="menu2">
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
            </ul>
            <!-- Menu Option 3 -->
          </li>
          <li class="menubar"> <a class="starter3" accesskey="3" href="#">Lien</a>
            <!-- Submenu 1 Options -->
            <ul class="menu" id="menu3">
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
            </ul>
            <!-- Menu Option 4 -->
          </li>
          <li class="menubar"> <a class="starter" accesskey="4" href="#">Lien</a>
            <!-- Submenu 1 Options -->
            <ul class="menu" id="menu4">
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
            </ul>
            <!-- Menu Option 5 -->
          </li>
          <li class="menubar"> <a class="starter" accesskey="5" href="#">Lien</a>
            <!-- Submenu 1 Options -->
            <ul class="menu" id="menu5" >
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
            </ul>
            <!-- Menu Option 6 -->
          </li>
        </ul>
      </div></td>
  </tr>
</table>

Pour les styles css :

A.starter{
	background-image:url(img/button.gif);
	background-repeat:no-repeat;
	text-align:center;
	background-color:transparent;
	color: #FFFFFF;
	width:73px;
	height:21px;
	padding-top:5px;
	display:block;
	float:left; 
	margin: 0px;
}

	A.starter:hover{	background-image:url(img/buttonh.jpg);
	background-repeat:no-repeat;
	text-align:center;	
	background-color:transparent;
	display: block ;color:#FFFFFF}

	A.starter:active{	background-image:url(img/buttonh.jpg);
	background-repeat:no-repeat;
	text-align:center;	
	background-color:transparent;
	display: block ;color:#FFFFFF}

	a.starter3{	background-image:url(img/button2.gif);
	background-repeat:no-repeat;
	text-align:center;	
	background-color:transparent;
	display: block ;
	color: #FFFFFF;width:110px; height:21px;
	padding-top:5px;
	display: block; 
	float:left}

a:hover.starter3{	background-image:url(img/button2h.jpg);
	background-repeat:no-repeat;
	text-align:center;	
	background-color:transparent;
	display: block ;color:#FFFFFF}

.menuz{ background-color:#3431b8; width:0px;}

#mainMenu {
    border-top: 1px solid #fff;
	text-align: left;
	position: relative;
}

#menuList {
	padding: 0px; 
	margin: 0px;
	
}
#menuList ul {
	padding: 0px; 
	margin: 0px; 
	
}
#menuList li {
	display: inline; 
	list-style-type: none;
	
}

.menu {
	background-repeat:no-repeat;
	text-align:center;	
	background-color:transparent;
	color: #FFFFFF;width:145px; height:21px;
	padding-top:5px;
	position: absolute;
	visibility: hidden;
	display: block;

}

.menu li a {
	background-image:url(img/button2m.gif);
	background-repeat:no-repeat;
	text-align:left;	
	background-color:transparent;
	color: #FFFFFF;width:145px; height:21px;
	display: block;
	padding-top:5px;
	padding-left:10px;
}

.menu li a:hover {
	background-image:url(img/button2hm.jpg);
	color:#FFFFFF
}

A savoir que les images doivent se trouver dans le dossier "img"

Dans le head tu ajoutes :

<script src="http://www.tonsite.com/oola.js" type=text/javascript></script>

Et le code du javascript :

var currentMenu = null;
	var mytimer = null;
	var timerOn = false;
	var opera = window.opera ? true : false;

	if (!document.getElementById)
		document.getElementById = function() { return null; }
	
	function initialiseMenu(menu, starter, root) {
		var leftstarter = false;
	
		if (menu == null || starter == null) return;
			currentMenu = menu;
	
		starter.onmouseover = function() {
			if (currentMenu) {
				if (this.parentNode.parentNode!=currentMenu) {
					currentMenu.style.visibility = "hidden";
					

				}
				if (this.parentNode.parentNode==root) {
					tempCurrentMenu = currentMenu
					while (tempCurrentMenu.parentNode.parentNode!=root) {
						tempCurrentMenu.parentNode.parentNode.style.visibility = "hidden";
						tempCurrentMenu = tempCurrentMenu.parentNode.parentNode;
					}
				}
				currentMenu = null;
				this.showMenu();
	        	}
		}
	
		menu.onmouseover = function() {
			if (currentMenu) {
				currentMenu = null;
				this.showMenu();
	        	}
		}	
	
		starter.showMenu = function() {
			if (!opera) {
				if (this.parentNode.parentNode==root) {
					menu.style.left = this.offsetLeft + "px";
					menu.style.top = this.offsetTop + this.offsetHeight + "px";
				}
				else {
				 	menu.style.left = this.offsetLeft + this.offsetWidth + "px";
				 	menu.style.top = this.offsetTop + "px";
				}
			}
			else {
				if (this.parentNode.parentNode==root) {
					menu.style.left = this.offsetLeft + "px";
					menu.style.top = this.offsetHeight + "px";
				}
				else {
				 	menu.style.left = this.offsetWidth + "px";
				 	menu.style.top = this.offsetTop + "px"; 
				}

			}
			menu.style.visibility = "visible";
			currentMenu = menu;
		}

		starter.onfocus	 = function() {
			starter.onmouseover();
		}
	
		menu.onfocus	 = function() {
		}

		menu.showMenu = function() {
			menu.style.visibility = "visible";
			currentMenu = menu;
			stopTime();
		}

		menu.hideMenu = function()  {
			if (!timerOn) {
				mytimer = setInterval("killMenu('" + this.id + "', '" + root.id + "');", 1000);
				timerOn = true;
				for (var x=0;x<menu.childNodes.length;x++) {
					if (menu.childNodes[x].nodeName=="LI") {
						if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
							menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
							menuItem.style.visibility = "hidden";
						}
					}
				}
			}
		}

		menu.onmouseout = function(event) {
			this.hideMenu();
		}

		starter.onmouseout = function() {
			for (var x=0;x<menu.childNodes.length;x++) {
				if (menu.childNodes[x].nodeName=="LI") {
					if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
						menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
						menuItem.style.visibility = "hidden";
					}
				}
			}
			menu.style.visibility = "hidden";
		}
}
	function killMenu(menu, root) {
		var menu = document.getElementById(menu);
		var root = document.getElementById(root);
		menu.style.visibility = "hidden";
		for (var x=0;x<menu.childNodes.length;x++) {
			if (menu.childNodes[x].nodeName=="LI") {
				if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
					menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
					menuItem.style.visibility = "hidden";
				}
			}
		}
		while (menu.parentNode.parentNode!=root) {
			menu.parentNode.parentNode.style.visibility = "hidden";
			menu = menu.parentNode.parentNode;
		}
		stopTime();
	}
	function stopTime() {
		if (mytimer) {
		 	 clearInterval(mytimer);
			 mytimer = null;
			 timerOn = false;
		}
	} 

	window.onload = function() {
		var root = document.getElementById("menuList");
		getMenus(root, root);
	}

function getMenus(elementItem, root) {
	var selectedItem;
	var menuStarter;
	var menuItem;
	for (var x=0;x<elementItem.childNodes.length;x++) {
		if (elementItem.childNodes[x].nodeName=="LI") {
			if (elementItem.childNodes[x].getElementsByTagName("UL").length>0) {
				menuStarter = elementItem.childNodes[x].getElementsByTagName("A").item(0);
				menuItem = elementItem.childNodes[x].getElementsByTagName("UL").item(0);
				getMenus(menuItem, root);
				initialiseMenu(menuItem, menuStarter, root);
			}
		}
	}
}

alex0714

Invité

Re : Comment créer une liste déroulante pour jeux

à bon merci je vais prendre ce script :

<table>
  <tr>
    <td colspan="3" class="menuz"><div id="mainMenu">
        <ul id="menuList">
          <!-- Menu Option 1 -->
          <li class="menubar"> <a class="starter" accesskey="1" href="#">Lien</a>
            <!-- Submenu 1 Options -->
            <!-- Menu Option 2 -->
          </li>
          <li class="menubar"> <a class="starter" accesskey="2 "href="#">Lien</a>
            <!-- Submenu 1 Options -->
            <ul class="menu" id="menu2">
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
            </ul>
            <!-- Menu Option 3 -->
          </li>
          <li class="menubar"> <a class="starter3" accesskey="3" href="#">Lien</a>
            <!-- Submenu 1 Options -->
            <ul class="menu" id="menu3">
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
            </ul>
            <!-- Menu Option 4 -->
          </li>
          <li class="menubar"> <a class="starter" accesskey="4" href="#">Lien</a>
            <!-- Submenu 1 Options -->
            <ul class="menu" id="menu4">
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
            </ul>
            <!-- Menu Option 5 -->
          </li>
          <li class="menubar"> <a class="starter" accesskey="5" href="#">Lien</a>
            <!-- Submenu 1 Options -->
            <ul class="menu" id="menu5" >
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
              <li><a href="#">Lien</a></li>
            </ul>
            <!-- Menu Option 6 -->
          </li>
        </ul>
      </div></td>
  </tr>
</table>

merci beaucoup (PS: je vais m'inscrire car je trouve se forum genial en plus des aides)

GG le sympa

Administrateur

Lieu : Graçay

Inscription : 03-08-2006 à 14:41

Messages : 17 567

Re : Comment créer une liste déroulante pour jeux

Pour une fois je vais dire : "xD ^^"

Tous les codes que je t'ai donné ci dessus forment un seul et même menu. Tu ne peux pas les dissocier. Ce ne sont pas des menus différents mais un menu xhtml 1.0 strict utilisant la mise en page CSS avec un petit peu de javascript et compatible xhtml 1.1.