Aide javascript
jalalnet
Messages postés
293
Date d'inscription
Statut
Membre
Dernière intervention
-
coeus Messages postés 3296 Statut Membre -
coeus Messages postés 3296 Statut Membre -
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
- A javascript error occurred in the main process - Forum Handicap / Accessibilté
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Javascript arrondi - Forum Javascript
- Javascript arrondi après la virgule ✓ - Forum Windows
8 réponses
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 !
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
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 !
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
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...
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:)
