Aide javascript

Fermé

jalalnet Messages postés 294 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 3019 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

A voir également:

Aide javascript
Telecharger javascript - Télécharger - Langages
Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
Javascript echo ✓ - Forum PHP
Exercice calculatrice en javascript ✓ - Forum Javascript
Retour à la ligne javascript ✓ - Forum Javascript

8 réponses

Réponse 1 / 8

coeus Messages postés 3019 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
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 :

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 !

Réponse 2 / 8

jalalnet Messages postés 294 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

merci pour votre réponse j'ai essayé ce que ta dis mais j'arrive pas voila mon code si tu peut m aidé

<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

Réponse 3 / 8

coeus Messages postés 3019 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
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 à :

<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 !

Réponse 4 / 8

jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
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

Réponse 5 / 8

jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
10 nov. 2010 à 16:49

sinon ya t-il une fonction pour détecter sur quelle page est l'utilisateur.

Réponse 6 / 8

coeus Messages postés 3019 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
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 :

<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...

Réponse 7 / 8

jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
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

<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:)

Réponse 8 / 8

coeus Messages postés 3019 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
10 nov. 2010 à 20:41

Bon ben parfait, c'est pas fou ton idée ! :)

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

afficher un tableau JS en HTML

Nodejs.exe est-ce un virus

[Javascript] Tables de Multiplication

Discussions similaires

Newsletters