Markeringe af aktiv menupunkt
-
- Begynder
- Indlæg:8
- Tilmeldt:9. aug 2015, 20:10
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.
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 (165.74KiB)Vist 21715 gange
Re: Markeringe af aktiv menupunkt
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
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
-
- Begynder
- Indlæg:7
- Tilmeldt:2. okt 2015, 17:49
- Kontakt:
Re: Markeringe af aktiv menupunkt
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:
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;
}
-
- Begynder
- Indlæg:8
- Tilmeldt:9. aug 2015, 20:10
Re: Markeringe af aktiv menupunkt
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
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
Re: Markeringe af aktiv menupunkt
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).
-
- Begynder
- Indlæg:8
- Tilmeldt:9. aug 2015, 20:10
Re: Markeringe af aktiv menupunkt
Hej
Tak for dit indlæg.
Jeg vil afprøve dit forslag, når jeg genoptager mit arbejde.
Mvh
Pensionisten
Tak for dit indlæg.
Jeg vil afprøve dit forslag, når jeg genoptager mit arbejde.
Mvh
Pensionisten
Re: Markeringe af aktiv menupunkt
Note. Jeg er ikke ude på at "ball buste" nogle.
Spørgsmål
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
Til denne sætter du så din CSS
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.
Spørgsmål
@ThomasHvordan 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?
@andershagbardDu kan desværre ikke gøre dette med CSS udelukkende. Du skal hen og anvende jQuery og en simpel kode.
Overstående svar er ikke rigtigt, CSS kan sagtens håndtere et farveskift for et element baseret på hvordan / hvornår man bevægerSom sagt, kan du ikke anvende ren CSS til dette formål.
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>
Kode: Vælg alt
#active a {
background-color: orange;
}
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.
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.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.
- 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).
Re: Markeringe af aktiv menupunkt
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.
http://jsfiddle.net/jepperask/spjt8y5h/
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.
http://jsfiddle.net/jepperask/spjt8y5h/
Re: Markeringe af aktiv menupunkt
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
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
-
- Begynder
- Indlæg:7
- Tilmeldt:2. okt 2015, 17:49
- Kontakt:
Re: Markeringe af aktiv menupunkt
[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.
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.
- Daniel
- Admin
- Indlæg:625
- Tilmeldt:14. jun 2011, 09:27
- Geografisk sted:Danmark, Fyn, Nørre Aaby
- Kontakt:
Re: Markeringe af aktiv menupunkt
Der må jeg nu give Cristian ret, det er ikke nødvendigvis bad practice at gentage sin egen kode.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.
Det er lidt det samme som at sige at PHP procedural er bad practice i forhold til objekt orienteret PHP.
Re: Markeringe af aktiv menupunkt
I eksemplet som jeg viste gentager vi ikke vores egen kode.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.
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.
-
- Begynder
- Indlæg:7
- Tilmeldt:2. okt 2015, 17:49
- Kontakt:
Re: Markeringe af aktiv menupunkt
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.
Vil dog gerne lige bemærke at jeg alt hellere vil lave en serverside løsning, frem for JavaScript.
Re: Markeringe af aktiv menupunkt
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øgerandershagbard 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.
på en givet hjemmeside?
-
- Begynder
- Indlæg:7
- Tilmeldt:2. okt 2015, 17:49
- Kontakt:
Re: Markeringe af aktiv menupunkt
Jacristian skrev: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øgerandershagbard 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.
på en givet hjemmeside?
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>
Re: Markeringe af aktiv menupunkt
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?
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?
-
- Begynder
- Indlæg:7
- Tilmeldt:2. okt 2015, 17:49
- Kontakt:
Re: Markeringe af aktiv menupunkt
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.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?
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'
)