Wordpress og "aktiv" meny.

[Torjus]

Heisann, har prøvd på dette før, men uten å lykkes.

 

Det jeg vil ha er en aktiv meny, altså når man trykker på en lenke og kommer inn på siden så vil menyen endre seg slik at man ser at det er den siden man er inne på. Feks en pil e.l.

 

Er dette mulig?

 

Eksempel: http://thinkfuzzy.net/meny/index.html

[Vindstille]

Ikke med html eller css nei. Men det kan helt fint gjøres med javascript eller php (eller lignende). Et serversidescriptspråk er vel å anbefale.

[Torjus]

Okey. Vet du om noen sider eller noe som forklarer hvordan dette gjøres?

[eigan]

Det kan fikses i XHTML/CSS jo...

 

Du kan lage en klasse for den aktive menyen. Så designer du den i CSS.. Når du bytter side, så flyttes klassen til den som da er aktiv..

 

Du kan jo bare se kildekoden til det eksempelet da...

Endret 11. april 2007 av Einar

[Vindstille]

Så ikke at du brukte Wordpress.

 

Vis du lager en meny med funsjonen wp_list_pages(..) vil WP automatisk legge til classen "current_page_item" på linken som linker til den aktive siden.

 

Så du kan helt enkelt bare style den med; .current_page_item { ... }

[Vindstille]

En annen metode som egentlig ikke er å anbefale (mens om sikkert er den enkleste) er å ta i bruk dette javascriptet:

 

window.onload = function () {

meny = document.getElementById('meny');

menyLinks = new Object();
menyLinks = document.getElementsByTagName('a');

for( keyVar in menyLinks ) {
link = menyLinks[keyVar];
if( link.href == window.location ) {
 link.style.color = 'red';
 break;
}
}
};

[Torjus]

Så ikke at du brukte Wordpress.

 

Vis du lager en meny med funsjonen wp_list_pages(..) vil WP automatisk legge til classen "current_page_item" på linken som linker til den aktive siden.

 

Så du kan helt enkelt bare style den med; .current_page_item { ... }

8361259[/snapback]

 

Ok... hvordan gjøre dette? Prøvde meg litt frem, men får det ikke til å fungere.

 

Jeg fulgte denne:

http://codex.wordpress.org/Dynamic_Menu_Highlighting

 

Jeg la dette i header.php:

	<?php
if ( is_page('Page One') ) { $current = 'one'; }
elseif ( is_page('Page Two') ) { $current = 'two'; }
elseif ( is_page('Page Three') ) { $current = 'three'; }
elseif ( is_page('Page Four') ) { $current = 'four'; }
elseif ( is_page('Page Five') ) { $current = 'five'; }
?>

<style type="text/css">
#<?php echo $current; ?> {
background-color: yellow;
}
</style>

 

Også dette i sidebaren:

    <li id="one"><a href="index.php">Hovedsiden</a></li>  
   <li id="two"><a href="?page_id=86">Profil</a></li>  
   <li id="three"><a href="?page_id=87">Galleri</a></li>  
   <li id="four"><a href="?page_id=17">Portefølje</a></li>  
   <li id="five"><a href="?page_id=88">Kontakt</a></li>	

 

Men det virket ikke

[Vindstille]

Dette bør funke.

 

//header.php (evt. sidebar avhengig av hvor du har menyen)

 

...

?php wp_list_pages("title_li=&child_of=".$post->ID."&sort_column=menu_order&show_date=modified&date_format=$date_format");?>

...

 

 

 

I CSS-filen:

.current_page_item { color:red }

 

 

Nå vil den aktive linken bli rød.

[Torjus]

Fikk hjelp av Teddy, jeg trengte visst bare å legge til i CSS: (som du, JonT skrev over) .current_page_item {et eller annet}

 

også:

 

<?php wp_list_pages() ?>

 

Da dukket akkurat det jeg ville opp. Men jeg mangler selve linken til hovedsiden. Er det mulig å få den inn blandt de andre lenkene?

 

http://www.thinkfuzzy.net

(Under "sider" er det den nye menyen)

[Vindstille]

Regner med at du skjønner greia

<ul>
 <li <?php if ( is_home() ) {?>class="current_page_item"<?php } ?>><a href="<?php bloginfo('url'); ?>">Forside</a></li>
 <?php wp_list_pages('title_li=&depth=-1'); ?>
</ul>

[Torjus]

Regner med at du skjønner greia

<ul>
 <li <?php if ( is_home() ) {?>class="current_page_item"<?php } ?>><a href="<?php bloginfo('url'); ?>">Forside</a></li>
 <?php wp_list_pages('title_li=&depth=-1'); ?>
</ul>

8361822[/snapback]

 

Tusen takk for at du var tålmodig og hjalp meg! Tusen hjertelig! Det virket perfekt

Endret 11. april 2007 av fUzZy^

[Vindstille]

Bare hyggelig å kunne hjelpe.