Jquery Lavalamp menu actuel

Question

J'ai implémenté le menu Lavalamp sur mon site, et je voulais le faire: lorsque les utilisateurs cliquent sur un lien dans le menu, le pointeur reste dans ce lien.

L'effet lavalamp fonctionne.

Le jquerycode J'est ceci:

<script type="text/javascript"> 
    $(function() { 
     $("#menutop").lavaLamp({ 
      fx: "backout", 
      speed: 700, 
      click: function(event, menuItem) { 
       return true; 
       } 
     }); 
    }); 
</script> 

Le code html pour le menu est la suivante:

<ul class="menu-top" id="menutop"> 
       <li class="current"><a href="index.php">Início</a></li> 
       <li><a href="servidores.php">Servidores</a></li> 
       <li><a href="pagamentos.php">Pagamentos</a></li> 
       <li><a href="forum/">Fórum</a></li> 
       <li><a href="sobre.php">Sobre</a></li> 
</ul> 

Je pense que la solution est en train de faire quelque chose avec jquery qui affecte le courant de classe à la li avec le href de la page que nous visualisons.

Je ne sais pas comment faire, mais si vous avez compris et sais me faire savoir xD

Merci

ps: Bien sûr, il y a d'autres pages de mon site, mais s'il n'y a pas li avec le href de la page commence à être vu, la classe actuelle sera toujours pointée dans le li de l'index.php

Answer 1

@Afonso, Cela peut être tard mais mieux vaut tard que jamais. Cela pourrait aider quelqu'un d'autre qui atteint cette page.

Vous voulez donc que le pointeur reste sous l'élément li de la page que vous utilisez actuellement, n'est-ce pas? Pour cela, nous allons changer le plugin pour accepter la position de départ en tant que variable. Faites comme ça -

1. Définissez les options pour avoir une variable start_position avec la valeur par défaut 0.

   o = $.extend({ fx: "linear", speed: 500, start_position: 0, click: function(){} }, o || {}); 
   

2. Modifier le plugin pour définir l'élément Curr comme indiqué

   curr = $("li.current", this)[o.start_position] || $($li[o.start_position]).addClass("current")[0]; 
   

3. Maintenant, dans le javascript de la page que vous êtes chez vous pouvez:

   $("#navlinks").lavaLamp({ 
       fx: "backout",//optional 
       speed: 700, 
       start_position: 1,//When page is loaded hover will be under Servidores 
       click: function(event, menuItem) { 
        return true;//so that you navigate to the appropriate link under 'li' 
       } 
   }); 
   

J'avais utilisé la version 0.1.0 pour le tester. Et je n'ai pas fait de réglage manuel de la classe 'courant'.

Vous pouvez maintenant définir manuellement sous quel élément vous voulez que le survol soit, qu'il soit lié ou non à la page affichée.

Answer 2

codage im en php et il était un peu gênant pour redéfinir le start_position evertime donc je l'ai utilisé php dans mon en-tête pour savoir quelle page je suis et réglez la classe actuelle en conséquence:

// Je reçois mon courant nom de la page

<?php 
    $page = $_SERVER['SCRIPT_NAME']; 
    $page = substr($page, 1); 
?> 

// i compare la page en cours à mes éléments de menu

<ul class="arrowslide" id="1"> 
<li <?php if($page=="index.php")echo("class='current'");?>><a href="index.php">accueil</a></li> 
<li <?php if($page=="club.php")echo("class='current'");?>><a href="club.php">le club</a></li> 
<li <?php if($page=="equipe.php")echo("class='current'");?>><a href="equipe.php">l'equipe</a></li> 
<li <?php if($page=="avion.php")echo("class='current'");?>><a href="avion.php">l'avion</a></li> 
</ul> 

soyez carreful comparer vos pages, si vous êtes sous-répertoire de votre SERV Vous devrez soustraire un autre niveau ou extraire l'adresse entière. donc soit

$page = substr($page,2); 

ou

if($page=="directory/page.php").. 

espoir qui aide ceux qui le à l'avenir pb!