Hjelp til menydesign

[Alekplay]

Hei folkens!

 

Jeg har nå kommet langt videre på nettsiden og trenger litt hjelp til å lage en meny. Jeg vet hvordan den skal se ut, men ikke hvordan jeg skal kunne lage den.

Jeg har også, ved god hjelp av YouTube og Thenewboston, lært meg både HTML5 og JavaScript mye bedre! Men noe sier meg at jeg kanskje kommer til å trenge jQuery for dette?

 

Dere trenger ikke å fysisk lage menyen for meg, med innhold og alt, bare fortelle meg hvordan jeg kan gjøre det. Men om dere har tid, gjerne skriv litt kode

 

Okei, så slik er planen:

 

* Det skal være en overordnet meny bestående av 3 elementer (element 1 element 2 element 3), skrevet i ren tekst som står like langt fra hverandre slik at de fyller ut en div jeg har laget.

 

* Under der skal det være en rett strek som skal strekke seg nesten helt til kantene (<hr>?), og på denne streken skal det være en liten trekant som peker opp på mitt menyvalg (sett dette på noen andre sider, men har ikke link akkurat nå). Det skal også (forhåpentligvis) være en trekant som er litt lysere/ mer gjennomsiktig som skal følge etter musen min når jeg flytter den fra f.eks. element 1 til element 2.

 

* Under her skal det være en undermeny, bestående av noen sirkler. Det skal være f.eks. 5 sirkler rett under hvert menyvalg (5 til hver) som skal være der hele tiden, uavhengig av hvilken hovedmeny jeg har valgt. Hver av disse prikkene skal være klikkbare, og lede til et annet element. Her skal brukeren selv kunne legge inn noe på hver av disse menyvalgene. De som inneholder noe skal være f.eks. lysegrå, den brukeren er på skal være mørkegrå og de som er tomme skal være uthulte med samme lysegrå farge.

 

* Avhengig av hvilken sirkel/ undermeny jeg velger skal det komme opp en ny hvit div under der. Linken skal ikke oppdateres, jeg skal fortsatt være på samme side. Div'en skal være avlang og fylle resten av lengden på div'en, men ikke bredden. Når du beveger deg fra en div/menyvalg/prikk til en annen en skal det animeres, slik at det ser ut som om den kommer fra siden (de forflyttes sidelengs). De to nærmeste divene (til den som jeg er på) skal hele tiden være synlig, men det skal bare vises f.eks. 20% av de. Resten skal "fade" ut.

 

 

 

Dette høres kanskje ut som mye, men jeg har ikke peiling på hvordan jeg lager det. Er ikke nødvendig at noen bruker masse av sin dyrebare tid på dette, men om noen kan si hva jeg skal gjøre/ vet om en tutorial som tar for seg akkurat dette/ eller gidder å skrive litt av koden hadde det vært kjempeflott!

 

Er også på utkikk etter hva det heter når en menylink ikke oppdaterer siden/ linken, men rett og slett bare viser en annen div (altså det spesifikke navnet, slik at jeg kan google dette).

 

Har et tidlig utkast jeg lagde for lenge siden. Fargene og utførelsen er ikke i nærheten av hva det faktisk skal ende opp som, men det kan gi dere et bilde av hva jeg er på utkikk etter:

 

( http://bildr.no/view/1354501 )

 

Tusen takk på forhånd!

Endret 29. desember 2012 av Alekplay

[Crowly]

For element 1-3 så kan du nok bruke div'er med display: inline-block og width: 33%

For linja tror jeg du må bruke ett bilde for å få til haken, så må du bytte ut bildet med javascript/jquery i forhold til hva som blir klikket på.

For å lage en sirkel så kan du f.eks. bruke en span med border-radius: 50% og så bruk padding eller height og width til å styre størrelsen på sirkelen. Ett google søk på "css make a circle" gir mange treff.

 

Hvis du ikke er veldig opphengt i denne ideen, så er det mye tid å spare på å ta i bruk jQuery sin tabs funksjon: http://jqueryui.com/tabs/

Alternativt ett button set: http://jqueryui.com/button/#radio

[Alekplay]

Okei, takker for svar! Da tenker jeg at jeg skal sjekke ut noen jQuery tutorials hos TheNewBoston, samtidig som jeg prøver ditt første forslag, Crowly

 

Men hvordan refererer jeg til at en annen div skal vises ved klikk? Altså, jeg har gått igjennom noen ganske lange HTML5/CSS3 og JavaScript tutorials, men fortsatt ikke lært det. Skal jeg i så fall referere til div'ens ID? F.eks.

<a href="#div1">Menyvalg 1</a>
.....
.....
<div id="div1">Dette er div 1</div>

? Eller må jeg bruke noe JavaScript i tillegg for å få dette til?

Endret 30. desember 2012 av Alekplay

[Nickless]

jQuery (utestet kode):

 

<div id = "test">Jeg er ikke skjult</div>
<div id = "div1" style="display: none;">Jeg var skjult</div>

<script>
$("#test").click(function()
{
 $("#div1").show();
});
</script>

 

http://api.jquery.com/click/

[Crowly]

Alternativt

<div id = "test"><a href="javascript:visskjul()">Jeg er ikke skjult</a></div>
<div id = "div1" style="display: none;">Jeg var skjult</div>

<script>
function visskjul() {
  $('#div1').toggle();
}
</script>

 

Da tenker jeg at jeg skal sjekke ut noen jQuery tutorials hos TheNewBoston

For jQuery UI så er det en del eksempler, med kode. Er bare å kopiere eksempel koden til sin egen test kode og modifisere etter behov, og se hva som skjer. Er en metode som ofte har fungert for meg, når jeg skal lære meg nye ting.

Endret 30. desember 2012 av Crowly