Sujet Précédent Sujet Suivant

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


8 réponses

Réponse 1 / 8
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
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 !
0
Réponse 2 / 8
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
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
0
Réponse 3 / 8
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
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 !
0
Réponse 4 / 8
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
j'utilise tout CSS/php/js mais justement je sais pas comment détecter sur quelle page est l'utilisateur.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
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
sinon ya t-il une fonction pour détecter sur quelle page est l'utilisateur.
0
Réponse 6 / 8
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
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...
0
Réponse 7 / 8
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
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:)
0
Réponse 8 / 8
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
Bon ben parfait, c'est pas fou ton idée ! :)
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
java activée mais ne fonctionne pas !
chating -
chating -

4 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses