endre menytekst ved mouseOver

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009

Tenkte på dette:

Det står "knapp" - til vanlig - (ingen link)

når brukeren beveger makøren over, så endrer teksten seg til "knapp 1.1". (link til 1.1)

I tilleg så blir det også en drop-down knapp som heter "knapp 1.2" (link til 1.2)

 

Forstålig?

Hvordan utføres dette?

Kan det gjøres med kun CSS, eller må man ty til JavaScript?

med hilsen
Thomas Kile

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Knapper, jQuery, HTML, CSS og JavaScript

For å svare på det siste først: Det er best å bruke JavaScript for kompabilitet over en rekke nettlesere. CSS3 kan endre hva som står på knappen, men CSS skal jo helst brukes til design og ikke til å manipulere innholdet.

Jeg anbefaler deg å bruke jQuery i dette tilfellet, det forutsetter at du har lastet ned jQuery library (velg minified for effektivitet).

Funksjonaliteten på knappene

Subjektivt må jeg si at endring fra "knapp" til "link til 1.1" gir en dårlig brukeropplevelse. For meg ville det hele virket forvirrende at man først hadde ordet knapp som ikke var en link, for så at både tekst og link skulle endre seg. Det er ikke sikkert jeg ville tatt musa over "knapp" engang.

Er meningen her å linke til spesifikke deler av en webside øverst slik som Wikipedia gjør i sine artikler? I såfall, hvorfor ikke løse det slik Wikipedia har gjort, det er jo folk vant til allerede. Her støtter jeg meg på slagordet til REMA1000 "Det enkleste er ofte det beste".

Suckerfish meny med CSS og JavaScript

For noen år siden var det veldig populært med slike dropdown menyer. Disse laget man av lister i HTML, i kombinasjon med CSS og JavaScript. Hos A List Apart har de en god tutorial på suckerfish menyer. Her er et eksempel på implementasjon av suckerfish. Merk at eksemplet bruker det i headeren over linker, men det kan selvsagt godt gjøres andre steder i dokumentet også.

Kode sin egen variant med jQuery, HTML og CSS

Til slutt kan man selvsagt kode sin egen variant.

Her er HTML-kodene

<ul id="knapper">
  <li><span>Knapp</span>
    <ul>
      <li><a href="#">Link til 1.2</a></li>
      <li><a href="#">Link til 1.3</a></li>
      <li><a href="#">Link til 1.4</a></li>
    </ul>
  </li>
</ul>

Her er jQuery kodene. Lagre denne i en egen fil med filetternavnet js og inkluder den ved hjelp av script-taggen i head seksjonen av HTML-dokumentet, etter at du har gjort det samme med jQuery library.

$(document).ready(function() {
  // Gjemmer knappene
  $('#knapper ul').hide();
  // Viser knappene & til endrer link
  $('#knapper li').hover(function() {
    $('#knapper ul').slideDown('slow');
    $('#knapper span').html('<a href="#">link til 1.1</a>');
  });
});

Eksempel på funksjonalitet

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009
for å svare, før jeg har

for å svare, før jeg har lest/studert alt, så er meningen at det skal stå "Informasjon". Og når brukeren beveger markøren over skal det stå "Muligheten" og "Prdukter"...

 

Men ordinær dropdown meny, som har samme visualitet som jeg har i dag går sikkert like greit da... men nå skal jeg studere det du ahr skrevet...

med hilsen
Thomas Kile

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009
Trur kansje det kan bli

Trur kansje det kan bli vanskelig å det til å se bra ut... jeg har ett litt utradisjonelt menysystem virker det som. I forhold til mange sider som benytter dropdown's hvertfall... De er på en måte mer sofistikerte en min funky stil kanskje...

Kansje jeg heller lager en index side for "informasjonen"

med hilsen
Thomas Kile

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Enig i at dropdowns kan være dårlig løsning

Jeg er enig med deg i at det kan bli vanskelig å få det til å se bra ut. Det kan fort forvirre folk som ikke er websavvy, for ikke å snakke om at man må ha kompabilitet for alt av nettlesere.

Hvis du skal ha produkter, hvorfor ikke gjøre dem så synlig som mulig? Jeg liker Komplett sin løsning. Den er muligens kjedelig, men brukervennlig – det er den. Det er jo bare å se på bunnlinjen deres, hehe. :) Når man kommer inn dit er det jo ingen tvil om hva de driver med, og hvis man vet hva man skal ha er det en breeze å finne frem.

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009
mhm, helt enig der da. Ryddig

mhm, helt enig der da. Ryddig og flott side.. Men det er på en måte mer en informasjonsside jeg jobber med...

jeg er mer opptatt av å skaffe personlig kontakt

med hilsen
Thomas Kile

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Call to action på infoside

Da er det kanskje lurt å promotere produkter sekundært, ja. Mer som informasjon, slik du sier. Ville nok uansett gjort tilgangen til informasjon om produktene lett tilgjengelig.

Jeg snakker ikke av erfaring her, men av observasjon. De som er gode på å få kontakt har gjerne noen tillitsvekkende bilder av seg selv, for ikke å snakke om video. Sistnevnte er en fin måte å pitche ting på, og å lage "call to action" i slutten av videoen; enten det er å ta opp telefonen for å ringe, skrive inn epost og navn i et skjema eller sende en epost.

Vet ikke, men tror responsen blir større når man har en person å forholde seg til fra start. God business handler jo mye om folk og folketekke. :)

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009
mhm, helt enig der. Derfor

mhm, helt enig der. Derfor jeg har de to hovedelementene på forsiden. Ganske store elementer...

med hilsen
Thomas Kile

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Veldig bra!

* popper innom en verden av ekslusive produkter * – se her, ja – her var det oppdateringer siden sist! Har en rekke forslag, hvis du vil ha dem. :) Du får opprette en egen tråd, så skal jeg gi deg noen tips som er av teknisk karakter (noen omdirigeringer) pluss litt annet. :)

Du skal ha for pågangsmotet, Thomas. Du har virkelig stått på hardt, og du må ha lært utrolig mye ved å angripe dette uten å kunne særlig mye PHP. Veldig bra!

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009
ja, tro meg, det har blitt

ja, tro meg, det har blitt noen laaange netter med knoting... Men har vert utrolig morsomt da...

 

Tar gjerne imot forslag vettu... hvor skal jeg opprette en tråd? I vise din hjemmeside seksjonen?

med hilsen
Thomas Kile

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Motivasjon

Ja, det tror jeg nok så gjerne. Kjenner til det selv. Da jeg lærte meg PHP holdt jeg på akkurat som deg. Lange netter, mange errormeldinger og mye læringsvilje :)

Ja, lag den der, så skal jeg gi noen tilbakemeldinger til deg :)

Svar på forumemnet

(If you're a human, don't change the following field)
Your first name.
Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.