Markeringe af aktiv menupunkt

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
Pensionisten
Begynder
Indlæg:8
Tilmeldt:9. aug 2015, 20:10
Markeringe af aktiv menupunkt

Indlæg af Pensionisten » 9. aug 2015, 20:57

Som analfabet i dette forum er jeg usikker på, om mit spørgsmål er formuleret korrekt, og om det er stillet på den rette plads.

Når musen bevæges hen over en menu i toppen af en hjemmeside, skifter menuen ofte farve (mørkere eller lysere), og denne farve forbliver den samme, så længe den pågældende side er aktiv. Sådan er det på nogle hjemmesider.
Hvordan bærer man sig ad med at få ens egen hjemmeside til at fastholde dette farveskift, mens siden er aktiv og ikke kun, når musen er i bevægelse over menupunktet?

Se vedhæftede eksempel.
Vedhæftede filer
Apple.jpg
Apple.jpg (165.74KiB)Vist 21099 gange

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Markeringe af aktiv menupunkt

Indlæg af ThomasI » 14. aug 2015, 11:55

Hej og undskyld mit sene svar.

Du kan desværre ikke gøre dette med CSS udelukkende. Du skal hen og anvende jQuery og en simpel kode.

Se eksempel her: http://jsfiddle.net/DDZNz/

Og tilhørende artikel: http://www.itworld.com/article/2832973/ ... query.html

andershagbard
Begynder
Indlæg:7
Tilmeldt:2. okt 2015, 17:49
Kontakt:

Re: Markeringe af aktiv menupunkt

Indlæg af andershagbard » 2. okt 2015, 17:54

Hej,

Som sagt, kan du ikke anvende ren CSS til dette formål. CSS kan ikke idenficere den nuværende URL, og derfor skal du benytte noget JavaScript, eller noget serverside der giver det aktive link en class.
Hvis du ikke har opdelt dine filer i header footer osv, og har statiske HTML pages til alle siderne, kan du jo også tilføje classen manuelt. Bad practice, men en mulighed.

Det kunne se sådan her ud:

Kode: Vælg alt

<ul>
	<li><a href="1.html">Link 1</a></li>
	<li class="current"><a href="2.html">Link 2</a></li>
</ul>

Kode: Vælg alt

ul li.current a {
	color: blue;
}

Pensionisten
Begynder
Indlæg:8
Tilmeldt:9. aug 2015, 20:10

Re: Markeringe af aktiv menupunkt

Indlæg af Pensionisten » 2. okt 2015, 20:21

Hej
Tak for svaret.
Jeg har været lidt væk fra emnet i en periode, men jeg må se at få "kridtet programmerings-skoene" igen.
Mvh
Pensionisten

jepperask
Geni
Geni
Indlæg:378
Tilmeldt:4. nov 2012, 17:57

Re: Markeringe af aktiv menupunkt

Indlæg af jepperask » 2. okt 2015, 23:26

Skriver du udelukkende i HTML/CSS? I givet fald går jeg ud fra at du har fx 3 sider, med 3 menupunkter som refererer til hver af de 3 sider. Så kan du jo bare duplikere menuen i hver side og sætte farven anderledes.. Der findes også :target som kan benyttes, hvis du ligesom i Thomas' indlæg så laver en href til #menupunkt1, og så har givet dit menupunkt dét ID (menupunkt1).

Pensionisten
Begynder
Indlæg:8
Tilmeldt:9. aug 2015, 20:10

Re: Markeringe af aktiv menupunkt

Indlæg af Pensionisten » 3. okt 2015, 07:26

Hej
Tak for dit indlæg.
Jeg vil afprøve dit forslag, når jeg genoptager mit arbejde.
Mvh
Pensionisten

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Markeringe af aktiv menupunkt

Indlæg af cristian » 3. okt 2015, 21:03

Note. Jeg er ikke ude på at "ball buste" nogle.

Spørgsmål
Hvordan bærer man sig ad med at få ens egen hjemmeside til at fastholde dette farveskift, mens siden er aktiv og ikke kun, når musen er i bevægelse over menupunktet?
@Thomas
Du kan desværre ikke gøre dette med CSS udelukkende. Du skal hen og anvende jQuery og en simpel kode.
@andershagbard
Som sagt, kan du ikke anvende ren CSS til dette formål.
Overstående svar er ikke rigtigt, CSS kan sagtens håndtere et farveskift for et element baseret på hvordan / hvornår man bevæger
sig rundt på en hjemmeside. Det er rigtigt at CSS ikke dynamisk baseret på en URL kan foretage denne handling, men du kan sætte en statisk værdi for et element. F.eks

Kode: Vælg alt

<li id="active">
<a href="#"></a>
</li>
Til denne sætter du så din CSS

Kode: Vælg alt

#active a {
background-color: orange;
}
Det rimelig lav-praktisk men det giver det ønskede resultat i forhold til spørgsmålet.
Jeg giver så ret i at jQuery (jQuery er en JS wrapper) vil give en mere dynamisk hjemmeside så du ikke sætter værdier forkert på større sider, er nemmere at opdatere mm.
Hvis du ikke har opdelt dine filer i header footer osv, og har statiske HTML pages til alle siderne, kan du jo også tilføje classen manuelt. Bad practice, men en mulighed.
Hvad får dig til at sige at overstående er "bad practice"? Der er massere af grunde til at man kan gå den vej.
  • Ens side er relativ lille og nem at administrere igennem hardcoded klasser / id'er.
  • Funktionaliteten skal virke selv uden JS kørende i browseren.
  • Man ønsker ikke den øget kompleksitet (JS).

jepperask
Geni
Geni
Indlæg:378
Tilmeldt:4. nov 2012, 17:57

Re: Markeringe af aktiv menupunkt

Indlæg af jepperask » 4. okt 2015, 00:57

Nu ved jeg ikke hvad jeres definition af dynamisk er, men med :target kan man godt gøre det i siger er umuligt.

Eksempel der virker.. Menu'en skifter farve alt efter hvilken tab der er trykket på og content ændres alt efter hvad der skal vises.. Det giver overhovedet ikke mening at benytte, men det ser ud til at virke. :D

http://jsfiddle.net/jepperask/spjt8y5h/

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Markeringe af aktiv menupunkt

Indlæg af ThomasI » 6. okt 2015, 17:06

Fint eksempel Jeppe, men som du selv siger, så giver det ikke mening i forhold til Pensionistens side, da man jo skifter side mellem menupunkterne.

Men ja, Cristian har ret, hvis du per side kan tilføje en klasse i menuen, så kan du styre, hvordan netop det menupunkt ser ud på netop den side.

Nu kender jeg dog pensionistens egen hjemmeside, og den er lavet i WordPress, hvilket gør denne løsning ret svær at udføre - det er nok derfor at jeg mejede en ren CSS løsning ned med det samme.

Kigger man på Spørgsmålet isoleret set, så er Cristians svar helt korrekt :D

andershagbard
Begynder
Indlæg:7
Tilmeldt:2. okt 2015, 17:49
Kontakt:

Re: Markeringe af aktiv menupunkt

Indlæg af andershagbard » 6. okt 2015, 17:25

[quote="cristian"][/quote]

Selvfølgelig er det bad practice at gentage sin egen kode... Absolut ingen grund til det.
Hvis din server kun kan kører HTML, så er du selvfølgelig nødt til det, hvis du ikke vil anvende JS.

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: Markeringe af aktiv menupunkt

Indlæg af Daniel » 6. okt 2015, 19:23

andershagbard skrev:Selvfølgelig er det bad practice at gentage sin egen kode... Absolut ingen grund til det.
Hvis din server kun kan kører HTML, så er du selvfølgelig nødt til det, hvis du ikke vil anvende JS.
Der må jeg nu give Cristian ret, det er ikke nødvendigvis bad practice at gentage sin egen kode.
Det er lidt det samme som at sige at PHP procedural er bad practice i forhold til objekt orienteret PHP.

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Markeringe af aktiv menupunkt

Indlæg af cristian » 6. okt 2015, 23:53

andershagbard skrev: Selvfølgelig er det bad practice at gentage sin egen kode... Absolut ingen grund til det.
Hvis din server kun kan kører HTML, så er du selvfølgelig nødt til det, hvis du ikke vil anvende JS.
I eksemplet som jeg viste gentager vi ikke vores egen kode.
Vi laver et custom id (en gang) som vi herefter kalder X antal gange (så mange gange det er nødvendigt).

Dette er helt acceptabelt og nødvendigt for siden i denne sammenhæng.

Bare fordi vi kan bruge JS er det ikke ensbetydende med at vi skal.

andershagbard
Begynder
Indlæg:7
Tilmeldt:2. okt 2015, 17:49
Kontakt:

Re: Markeringe af aktiv menupunkt

Indlæg af andershagbard » 6. okt 2015, 23:59

Lad os bare lade den lægge :)

Vil dog gerne lige bemærke at jeg alt hellere vil lave en serverside løsning, frem for JavaScript.

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Markeringe af aktiv menupunkt

Indlæg af cristian » 7. okt 2015, 00:03

andershagbard skrev:Lad os bare lade den lægge :)

Vil dog gerne lige bemærke at jeg alt hellere vil lave en serverside løsning, frem for JavaScript.
Den fanger jeg ikke lige angående serverside løsningen, snakker vi stadig for at vise et aktivt menu link (ved at farve det) i forhold til den side vi besøger
på en givet hjemmeside?

andershagbard
Begynder
Indlæg:7
Tilmeldt:2. okt 2015, 17:49
Kontakt:

Re: Markeringe af aktiv menupunkt

Indlæg af andershagbard » 7. okt 2015, 00:09

cristian skrev:
andershagbard skrev:Lad os bare lade den lægge :)

Vil dog gerne lige bemærke at jeg alt hellere vil lave en serverside løsning, frem for JavaScript.
Den fanger jeg ikke lige angående serverside løsningen, snakker vi stadig for at vise et aktivt menu link (ved at farve det) i forhold til den side vi besøger
på en givet hjemmeside?
Ja :)

Via et serversite language, f.eks. PHP, så kan du tjekke om den nuværende URL, er lig linket. f.eks. sådan her:

Kode: Vælg alt

<ul>
<?php foreach ($links as $link): ?>
<li <?php if ($link['url'] === $current_url) echo 'class="active"'; ?>><a href="<?php echo $link['url']; ?>"><?php echo $link['name']; ?></a></li>
<?php endforeach; ?>
</ul>
Hvor classen active så giver det farvede link.

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Markeringe af aktiv menupunkt

Indlæg af cristian » 8. okt 2015, 07:50

Hvad giver $link name for en værdi?

Spørgsmål til forummet.
Når du embedder php direkte ind i en *.html fil, laver du så et postback når php koden bliver kørt og reloader siden?

Eller er det scriptlet der bliver eksekveret direkte i browseren uden et postback?

andershagbard
Begynder
Indlæg:7
Tilmeldt:2. okt 2015, 17:49
Kontakt:

Re: Markeringe af aktiv menupunkt

Indlæg af andershagbard » 8. okt 2015, 15:51

cristian skrev:Hvad giver $link name for en værdi?

Spørgsmål til forummet.
Når du embedder php direkte ind i en *.html fil, laver du så et postback når php koden bliver kørt og reloader siden?

Eller er det scriptlet der bliver eksekveret direkte i browseren uden et postback?
Lidt itvivl hvad du mener med at jeg reloader siden når koden bliver kørt. Normalt så renderer PHP jo det den vil sende til brugeren, og så sender den det.

Nu kan man ikke køre PHP i en html fil (Jo mindre din server er konfigurerer til det), så jeg kører det i en *.php fil.
Nu var det bare et eksempel jeg kom med, men $link kunne jo være en array der så sådan her ud:

Kode: Vælg alt

array(
	'name' => 'Om os',
	'url' => 'about-us.php'
)

Besvar