Hoe active link laten verdwijnen by mouseover?

**drzwaan** · 09-05-2010, 15:21

Beste mensen,

Ik ben al een paar uur bezig maar ik krijg het maar niet voor elkaar.

Het gaat om een topmenu. Wanneer je een pagina bezoekt wordt de active link gehighlight met een afbeelding. Wanneer je een mouseover wordt deze met hetzelfde plaatje gehighlight. Dit werkt allebei goed.

Echter wanneer je een mouseover doet in het menu moet de active link niet meer worden gehighlight. Net als bijvoorbeeld het rootmenu van www.tweakers.net.

Ik heb nu de volgende css:

PHP Code:


#top_menu {
    padding: 4px 8px 0px 0px;
    text-align: right;
    clear: right;
}
#top_menu ul li.first-level, #top_menu ul li.first-level.cm-active, #top_menu ul li.first-level:hover {
    padding: 0 2px 0 0;
    margin: 0 0 0 3px;
    text-align: left;
    border: 0px none;
    height: 27px;
}
#top_menu ul li.first-level.cm-active, #top_menu ul li.first-level:hover {
    background: #caf0f9 url('images/top_tab_right_active.gif') no-repeat right top;
    margin: -4px 0 -1px 3px;
    height: 31px;
}
#top_menu ul li.first-level span {
    padding: 6px 15px 4px 19px;
}
#top_menu ul li.first-level.cm-active span, #top_menu ul li.first-level:hover span {
    background: url('images/top_tab_left_active.gif') no-repeat left top;
    padding: 9px 15px 6px 19px;
}

#top_menu ul ul {
    margin-top: 0px;
    padding-top: 3px;
    padding-bottom: 4px;
}

En in PHP:

PHP Code:


{if $top_menu}
<div id="top_menu">
{strip}
<ul class="top-menu dropdown">
    {foreach from=$top_menu item="m"}
    <li class="first-level {if $m.selected == true}cm-active{/if}">
        <span><a{if $m.href} href="{$m.href}"{/if}{if $m.new_window} target="_blank"{/if}>{$m.item}</a></span>
        {if $m.subitems}
            {include file="top_menu.tpl" items=$m.subitems top_menu="" dir=$m.param_4}
        {/if}
    </li>
    {/foreach}
</ul>
{/strip}
</div>

Weet iemand hoe je dit moet oplossen?

**Arjen Rademaker** · 09-05-2010, 15:50

Dit kan je niet doen met css (naar mijn weten). Dit dien je te doen door middel van Javascript (bijvoorbeeld met jQuery).

**Z Tas** · 09-05-2010, 15:53

Dit kan (volgens mij) alleen met javascript/jquery.
Wat je wil is bij een hover de class cm-active weghalen, dus bijv:

$("#top_menu ul li").hover(
function(){
$(this).removeClass("cm-active");
}
);

**drzwaan** · 09-05-2010, 16:07

Origineel gepost door Z Tas

Dit kan (volgens mij) alleen met javascript/jquery.
Wat je wil is bij een hover de class cm-active weghalen, dus bijv:

$("#top_menu ul li").hover(
function(){
$(this).removeClass("cm-active");
}
);

Bedankt hiervoor! Alleen hoe zet ik dat fatsoenlijk weg in de php code zoals hierboven is weergegeven?

**Z Tas** · 09-05-2010, 16:15

phpcode? ik zie boven alleen smarty code, waarschijnlijk uit een .tpl bestand.
Maargoed je moet onderstaande plaatsen in de <head>

PHP Code:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
  $("#top_menu ul li").hover(
   function(){ 
    $(this).removeClass("cm-active");
   }
  );
    });
</script>

**drzwaan** · 09-05-2010, 16:35

Origineel gepost door Z Tas

phpcode? ik zie boven alleen smarty code, waarschijnlijk uit een .tpl bestand.
Maargoed je moet onderstaande plaatsen in de <head>

PHP Code:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
  $("#top_menu ul li").hover(
   function(){ 
    $(this).removeClass("cm-active");
   }
  );
    });
</script>

Met als gevolg een fatal error in de smary code;

PHP Code:


Fatal error:  Smarty error: [in top_quick_links.tpl line 10]:  syntax error: unrecognized tag: $("#top_menu ul li").hover(    function(){     $(this).removeClass("cm-active");  (Smarty_Compiler.class.php, line 445

Heb de "cm-active" al vervangen door "first-level.cm-active" echter zonder resultaat. Misschien moet ik het script parsen met een rdelim?

**Z Tas** · 09-05-2010, 16:55

Probeer eens met literal tags eromheen dus:

{literal}JavaScript hier{/literal}

**drzwaan** · 09-05-2010, 17:18

Origineel gepost door Z Tas

Probeer eens met literal tags eromheen dus:

{literal}JavaScript hier{/literal}

Super bedankt, ik ben al een stuk verder. Alleen nog een klein dingetje, het werkt alleen nadat je een mouseover doet op de active link. Eerder werkt het nog niet. Moet ik dan het javascriptje verplaatsen of aanpassen?

**Z Tas** · 09-05-2010, 18:46

Inmiddels als iets verder?
Het script staat in ieder geval op de juiste plaats dus daar ligt het niet aan.

**Arjen Rademaker** · 09-05-2010, 19:00

PHP Code:


{literal}
<script type="text/javascript">
$(document).ready(function(){
    
    $("#top_menu ul li").hover(function(){ 
    
        $(this).parent().find('#cm-activeid').removeClass("cm-active");
       
    }, function() {
    
        $(this).parent().find('#cm-activeid').addClass("cm-active");
    
    });
    
});
</script>  
{/literal}

Probeer bovenstaand eens en geef de actieve link een id="cm-activeid" mee en een class="cm-active" .
De class gebruik je in de css om de actieve button te stijlen. Dan zal het moeten werken.

**drzwaan** · 09-05-2010, 22:04

Origineel gepost door Arjen Rademaker

PHP Code:


{literal}
<script type="text/javascript">
$(document).ready(function(){
    
    $("#top_menu ul li").hover(function(){ 
    
        $(this).parent().find('#cm-activeid').removeClass("cm-active");
       
    }, function() {
    
        $(this).parent().find('#cm-activeid').addClass("cm-active");
    
    });
    
});
</script>  
{/literal}

Probeer bovenstaand eens en geef de actieve link een id="cm-activeid" mee en een class="cm-active" .
De class gebruik je in de css om de actieve button te stijlen. Dan zal het moeten werken.

Ik heb dit in een aantal varianten geprobeerd maar ik krijg het niet werkend. Wanner ik dit script vervang voor in de plaats van het script van Tas dan werkt het weer zoals in de eerste post. Of moet ik een apparte css voor #cm-activeid maken?

**Arjen Rademaker** · 09-05-2010, 23:01

Fout gelezen. Je moet in dit geval de actieve li de id en class meegeven die ik eerder al aangaf. En je wil twee classes toevoegen aan het actieve lijstelement. Dan gaat het sowieso niet werken. Zit nu op mijn mobiel, dus kan je niet zo snel helpen nu.

**drzwaan** · 10-05-2010, 07:34

Origineel gepost door Arjen Rademaker

Fout gelezen. Je moet in dit geval de actieve li de id en class meegeven die ik eerder al aangaf. En je wil twee classes toevoegen aan het actieve lijstelement. Dan gaat het sowieso niet werken. Zit nu op mijn mobiel, dus kan je niet zo snel helpen nu.

Bedankt voor je bericht. Ik heb de idd en class aan de li toegevoegd alleen geen resultaat.

Hoe active link laten verdwijnen by mouseover?