Aide javascript
Fermé
jalalnet
Messages postés
293
Date d'inscription
mardi 20 octobre 2009
Statut
Membre
Dernière intervention
30 juillet 2023
-
Modifié par jalalnet le 10/11/2010 à 14:50
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 10 nov. 2010 à 20:41
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 10 nov. 2010 à 20:41
Bonjour,
j'aimerai comprendre le fonctionnement du menu CCM celui on haut
pour cela je test une menu chez moi
mais j'arrive pas comprendre comment faire pour que l'attribut Borderbottom sous les menus s'applique sous le menu de la rubrique choisis(Ex vous etes sur dans la forum ccm alors il ya un borderbottom sous le menu Forum,si on change de rubrique le border aussi déplace dans le menu de la rubrique chois) ,
en oubliant pas que un Borderbottom s'applique aussi au moment d'un hover celui la easy
j'aimerai comprendre le fonctionnement du menu CCM celui on haut
pour cela je test une menu chez moi
mais j'arrive pas comprendre comment faire pour que l'attribut Borderbottom sous les menus s'applique sous le menu de la rubrique choisis(Ex vous etes sur dans la forum ccm alors il ya un borderbottom sous le menu Forum,si on change de rubrique le border aussi déplace dans le menu de la rubrique chois) ,
en oubliant pas que un Borderbottom s'applique aussi au moment d'un hover celui la easy
A voir également:
- Aide javascript
- Telecharger javascript - Télécharger - Langages
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Node.js javascript runtime virus ✓ - Forum Virus
- Erreur #125 javascript - Forum Mozilla Firefox
- A javascript error occurred in the main process - Forum Handicap / Accessibilté
8 réponses
coeus
Messages postés
3021
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
10 nov. 2010 à 15:53
10 nov. 2010 à 15:53
Il y a plusieurs réponses, mais je pense qu'ultimement le site ici n'utilise pas Javascript pour cet effet, seulement du CSS.
Le menu est une suite de balises <li>. Pour faire l'effet de mouse-over, tu déclares l'attribut CSS :
Et pour quer la bordure reste sous le lien forum quand on est sur la page forum, remarque que la balise <li> du lien Forum possède deux classes : selected et current. Avec ça c'est facile en combinaison avec PHP (ou un autre script serveur) : tu détectes la page où est l'utilisateur, et si ça correspond à ton lien, tu lui octroies la classe "current", laquelle a la même bordure que le li:hover.
Sinon, si tu tiens absolument à utiliser Javascript, par exemple parce que tu connais mal le CSS, tu peux faire une déclaration :
J'espère que ça t'aide !
Le menu est une suite de balises <li>. Pour faire l'effet de mouse-over, tu déclares l'attribut CSS :
li:hover {
border-bottom:3px solid #FF0000;
}
Et pour quer la bordure reste sous le lien forum quand on est sur la page forum, remarque que la balise <li> du lien Forum possède deux classes : selected et current. Avec ça c'est facile en combinaison avec PHP (ou un autre script serveur) : tu détectes la page où est l'utilisateur, et si ça correspond à ton lien, tu lui octroies la classe "current", laquelle a la même bordure que le li:hover.
Sinon, si tu tiens absolument à utiliser Javascript, par exemple parce que tu connais mal le CSS, tu peux faire une déclaration :
document.getElementById("lien_forum").style.borderBottom = "3px solid #FF0000";
J'espère que ça t'aide !
jalalnet
Messages postés
293
Date d'inscription
mardi 20 octobre 2009
Statut
Membre
Dernière intervention
30 juillet 2023
10
Modifié par jalalnet le 10/11/2010 à 16:42
Modifié par jalalnet le 10/11/2010 à 16:42
merci pour votre réponse j'ai essayé ce que ta dis mais j'arrive pas voila mon code si tu peut m aidé
pour le ccs tu peut test avec ça
si tu peut mettre le bout du code pour que la bordure reste sous le lien forum quand on est sur la page forum (soit en css ,soit en js)ça serait cool
<body>
<ul id="menu_horizontal">
<li class="bouton_gauche"><a href="#">Accueil</a></li>
<li class="bouton_droite"><a href="#">News</a></li>
<li class="bouton_droite"><a href="#">Livre d'or</a></li>
<li class="bouton_droite"><a href="#">Admin</a></li>
<li class="bouton_droite"><a href="#">Contact</a></li>
</body>
pour le ccs tu peut test avec ça
<style type="text/css">
ul#menu_horizontal a {
color:#040404;
text-decoration : none;
font : 0.8em "Trebuchet MS";
}
ul#menu_horizontal {
list-style-type : none;
}
ul#menu_horizontal li:hover
{
border-bottom:2px solid #F90;
width : 70px;
}
</style>
si tu peut mettre le bout du code pour que la bordure reste sous le lien forum quand on est sur la page forum (soit en css ,soit en js)ça serait cool
coeus
Messages postés
3021
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
10 nov. 2010 à 16:41
10 nov. 2010 à 16:41
Pour que la bordure reste, il faut avoir un moyen de détecter sur quelle page est l'utilisateur.
Utilises-tu du PHP ? Si oui, tu n'as qu'à récupérer la variable $_GET['page'] ou l'équivalent, et aller voir plus bas pour la suite.
Si tu utilises uniquement du HTML, alors j'assume que tu as ta suite de <li> qui est copiée/collée sur chacune de tes pages.
Mais peu importe le cas, ça ne change rien. L'important est que tu arrives au résultat suivant. En supposant que ton utilisateur soit sur la page "News", ton code devrait ressembler à :
et ton CSS :
Dis-moi ce que tu en penses !
Utilises-tu du PHP ? Si oui, tu n'as qu'à récupérer la variable $_GET['page'] ou l'équivalent, et aller voir plus bas pour la suite.
Si tu utilises uniquement du HTML, alors j'assume que tu as ta suite de <li> qui est copiée/collée sur chacune de tes pages.
Mais peu importe le cas, ça ne change rien. L'important est que tu arrives au résultat suivant. En supposant que ton utilisateur soit sur la page "News", ton code devrait ressembler à :
<ul id="menu_horizontal"> <li class="bouton_gauche"><a href="#">Accueil</a></li> <li class="bouton_droite present"><a href="#">News</a></li> <li class="bouton_droite"><a href="#">Livre d'or</a></li> <li class="bouton_droite"><a href="#">Admin</a></li> <li class="bouton_droite"><a href="#">Contact</a></li>
et ton CSS :
ul#menu_horizontal li:hover,
ul#menu_horizontal li.present
{
border-bottom:2px solid #F90;
}
Dis-moi ce que tu en penses !
jalalnet
Messages postés
293
Date d'inscription
mardi 20 octobre 2009
Statut
Membre
Dernière intervention
30 juillet 2023
10
10 nov. 2010 à 16:48
10 nov. 2010 à 16:48
j'utilise tout CSS/php/js mais justement je sais pas comment détecter sur quelle page est l'utilisateur.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
jalalnet
Messages postés
293
Date d'inscription
mardi 20 octobre 2009
Statut
Membre
Dernière intervention
30 juillet 2023
10
10 nov. 2010 à 16:49
10 nov. 2010 à 16:49
sinon ya t-il une fonction pour détecter sur quelle page est l'utilisateur.
coeus
Messages postés
3021
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
10 nov. 2010 à 18:29
10 nov. 2010 à 18:29
Il faudrait voir comment tu charges ton contenu...
Quand tu fais un lien vers les autres pages de ton site, à quoi ça ressemble ?
Moi par exemple, un lien serait comme :
Tu dois être au courant que c'est ainsi que tu passes ta variable $_GET d'une page à l'autre...
Un exemple simple de comment je ferais, une fois que ma variable $_GET a été reconnue dans l'URL :
Ça ressemblerait à ça.
Il faut juste savoir comment tu fais pour que l'utilisateur passe d'une page à l'autre... Normalement tu devrais avoir une variable que tu passes dans l'URL qui a rapport avec ça... Peut-être que tu peux me donner des détails sur ce point ?
Comme je dis, donne-moi quelques exemples des hyperliens que tu as sur ton site. On verra comment tu opères...
Quand tu fais un lien vers les autres pages de ton site, à quoi ça ressemble ?
Moi par exemple, un lien serait comme :
<a href="?page=accueil">Accueil</a>
Tu dois être au courant que c'est ainsi que tu passes ta variable $_GET d'une page à l'autre...
Un exemple simple de comment je ferais, une fois que ma variable $_GET a été reconnue dans l'URL :
$page = $_GET['page'];
$menu = array(
'accueil' => 'Accueil',
'news' => 'Nouvelles',
'forum' => 'Forum'
);
print '<ul>';
foreach ($menu as $key => $element) {
print '<li class="bouton_gauche' . ($page == $key ? ' present' : '') . '"><a href="?page=' . $key . '">' . $element . '</a></li>';
}
print '</ul>';
Ça ressemblerait à ça.
Il faut juste savoir comment tu fais pour que l'utilisateur passe d'une page à l'autre... Normalement tu devrais avoir une variable que tu passes dans l'URL qui a rapport avec ça... Peut-être que tu peux me donner des détails sur ce point ?
Comme je dis, donne-moi quelques exemples des hyperliens que tu as sur ton site. On verra comment tu opères...
jalalnet
Messages postés
293
Date d'inscription
mardi 20 octobre 2009
Statut
Membre
Dernière intervention
30 juillet 2023
10
10 nov. 2010 à 19:01
10 nov. 2010 à 19:01
merci pour tés réponse sérieux;
j'ai réussi a faire ce que je veut avant que tu pose ton dernier réponse
voila ce que j'ai fais j ai combiné le style css avec du php
la classe non p:)
j'ai réussi a faire ce que je veut avant que tu pose ton dernier réponse
voila ce que j'ai fais j ai combiné le style css avec du php
<style type="text/css">
<?php
if (isset($_GET["page"])) $page = $_GET["page"];
else $page=0;
switch ($page) {
case 1 : ?> a.News{border-bottom:2px solid #F90;} <?php ; break;
case 2 : ?> a.livre{border-bottom:2px solid #F90; } <?php ; break;
case 3 : ?> a.Admin{border-bottom:2px solid #F90;} <?php ; break;
case 4 : ?> a.Contact{border-bottom:2px solid #F90; } <?php ; break;
default : ?> a.Accueil{border-bottom:2px solid #F90;} <?php ; break;
}
?>
</style>
la classe non p:)
coeus
Messages postés
3021
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
10 nov. 2010 à 20:41
10 nov. 2010 à 20:41
Bon ben parfait, c'est pas fou ton idée ! :)
