Vous n'êtes pas identifié(e).
- Contributions : Récentes | Sans réponse
#1 25-09-2006 à 18:19
- 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 
#2 25-09-2006 à 18:52
- GG le sympa
- Administrateur
- Lieu : Graçay
- Inscription : 03-08-2006 à 14:41
- Messages : 17 599
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);
}
}
}
}Hors ligne
#3 26-09-2006 à 14:57
- 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)
#4 26-09-2006 à 15:18
- GG le sympa
- Administrateur
- Lieu : Graçay
- Inscription : 03-08-2006 à 14:41
- Messages : 17 599
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.
Hors ligne
Pages : 1
- Accueil
- » Mise en page
- » Comment créer une liste déroulante pour jeux