Gå til innhold

Dynamisk meny i JS. (Fikset)

Sono Juventino

Anbefalte innlegg

Sono Juventino

Sono Juventino

Skrevet
Skrevet (endret)

Driver for tiden å lager et nytt design til en side. Der skal jeg ha en ganske avansert meny som jeg nok må lage i Javascript. Per dags dato er menyen laget i php og funker helt fint. Problemet er bare at siden må lastes hver gang man trykker på menyen. Dette er fordi den er bygget på include.

 

Menyen består av to deler. En overmeny som er fast. Trykker man på en av linkene i overmenyen, skal det dukke opp fem underalternativer som er unike for hver link. Siden jeg har veldig liten peiling på javascript, så aner jeg ikke hvor vanskelig dette kan være, derfor håper jeg på litt hjelp fra noen som kan dette.

 

En liten forklaring:

eks.png

 

Menyen er bygget med valid html og css.

 

Menyen finnes her. http://juventusnorge.com/menu/menu1.php

 

Hadde satt utrolig pris på litt hjelp, enten ved at noen forteller meg litt om hva jeg må lære meg for å kunne bygge en slik meny, eller at noen lager den hvis det ikke er så alt for store jobben.

 

Mvh. Thomas

Endret av Sono
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Kagee

Kagee

Skrevet
Skrevet (endret)

Denne kunne antagelig være laget i kun CSS ved å bruke a:hover og litt triksing med marginer. Skal de hva jeg får til.

 

I JS blir det vel en kombinasjon av onclick, element.style.display og en drøss med skulte div's...

 

Spørsmålet er om du vil ha onclick eller hover.

Endret av Kagee
Lenke til kommentar
Sono Juventino

Sono Juventino

Skrevet
  • Forfatter
Skrevet (endret)

Nydelig at du vil hjelpe. Har tenkt litt på css, men kom ikke på noen måte å få dette til. Har holdt på med css i en to års tid, så er nok ikke så god enda. :)

 

Edit: Så spørsmålet ditt først nå. Er egentlig det samme for meg om det er onclick eller hover. Det kommer egentlig an på hva du synes er lettest å bruke i denne sammenhengen, men hover er jeg ihvertfall veldig kjent med selv.

Endret av Sono
Lenke til kommentar
Wattengård

Wattengård

Skrevet
Skrevet (endret)

Dette er uprøvd rett ut av hodet:


<script type="javascript">
var um1 = document.getElementById('undermeny1');
var um2 = document.getElementById('undermeny2');
var um3 = document.getElementById('undermeny3');
var um4 = document.getElementById('undermeny4');

function hideAll()
{
 um1.style = "display: none;'";
 um2.style = "display: none;'";
 um3.style = "display: none;'";
 um4.style = "display: none;'";
}

function showMenu(menu)
{
 hideAll();
 menu.style = "display: block;" // Eller "inline" usikker på hva som blir rett her
}
</script>

 

Menyen:

<ul id="toppmeny">
<li id="valg1" onclick="displayMenu(um1);">Valg1</li>
<li id="valg2"onclick="displayMenu(um2);">Valg2</li>
<li id="valg3"onclick="displayMenu(um3);">Valg3</li>
<li id="valg4"onclick="displayMenu(um4);">Valg4</li>
</ul>

<ul style="display: none;" id="undermeny1"><li>...menyliste...</li></ul>
<ul style="display: none;" id="undermeny2"><li>...menyliste...</li></ul>
<ul style="display: none;" id="undermeny3"><li>...menyliste...</li></ul>
<ul style="display: none;" id="undermeny4"><li>...menyliste...</li></ul>

 

Tror dette vil nesten gjøre det du vil...

Må selvfølgelig kombineres med CSS for å få listitem-ene til å stå etter hverandre istedet for under hverandre. Samt posisjonering av DIV'ene.

 

-C-

Endret av ChristianW
Lenke til kommentar
Sono Juventino

Sono Juventino

Skrevet
  • Forfatter
Skrevet (endret)

Tusen takk for skriptet! Har allikevel problemer med å få det til å virke. Har prøvd endel forskjellig, men forstår meg ikke noe særlig på javascript.

 

Jeg tror det er noe som er feil med html'en i skriptet først og fremst. For the første, så var det ikke mulig å klikke på linkene før jeg la"onclick" inn i <a-taggen.. Tror også det mangler en javascript-kode i html'en. display: none; må jo gjøres om til display: block; på en eller annen måte?

 

Kanskje bare jeg som ikke forstår dette i det hele tatt. :hmm:

 

Dette er sånn koden min ser ut nå:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="no">
<head>
	<link rel="shortcut icon" href="img/favicon.ico">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link href="style.css" rel="stylesheet" type="text/css" media="screen">
	<script language="JavaScript" type="text/javascript" src="script/menu.js"></script>
</head>
<body>
<ul id="toppmeny">
<li id="valg1"><a onclick="showMenu(um1);" href="menu.html#">Valg1</li>
<li id="valg2"><a onclick="showMenu(um1);" href="menu.html#">Valg2</li>
<li id="valg3"><a onclick="showMenu(um1);" href="menu.html#">Valg3</li>
<li id="valg4"><a onclick="showMenu(um1);" href="menu.html#">Valg4</li>
</ul>

<ul style="display: none;" id="undermeny1"><li>...menyliste...</li></ul>
<ul style="display: none;" id="undermeny2"><li>...menyliste...</li></ul>
<ul style="display: none;" id="undermeny3"><li>...menyliste...</li></ul>
<ul style="display: none;" id="undermeny4"><li>...menyliste...</li></ul>

</body>
</html>

 

<script type="javascript">
var um1 = document.getElementById('undermeny1');
var um2 = document.getElementById('undermeny2');
var um3 = document.getElementById('undermeny3');
var um4 = document.getElementById('undermeny4');

function hideAll()
{
um1.style = "display: none;'";
um2.style = "display: none;'";
um3.style = "display: none;'";
um4.style = "display: none;'";
}

function showMenu(menu)
{
hideAll();
menu.style = "display: block;" 
}
</script>

Endret av Sono
Lenke til kommentar
Wattengård

Wattengård

Skrevet
Skrevet

Du trenger ikke putte menyvalgene i en link. En onclick event er gyldig på en listitem også.

 

Tror også det mangler en javascript-kode i html'en. display: none; må jo gjøres om til display: block; på en eller annen måte?

 

Den gjør det i scriptet. showMenu funksjonen gjemmer alle menyene først, så viser den valgt meny.

meny.style = "display: block;" blir det samme som å sette stilen til valgt element til "display: block". Bare dynamisk.

 

-C-

Lenke til kommentar
Sono Juventino

Sono Juventino

Skrevet
  • Forfatter
Skrevet

Jeg får det allikevel ikke til å fungere. Har prøvd både å legge inn skriptet ditt uten redigeringer og jeg har prøvd å redigere det selv. Her kan du se hvordan det virker uredigert:

 

http://sono.frac.dk/menu/

 

Problemet, sett utifra mitt ståsted, er at det ikke er mulig å trykke på listene. Har prøvd både i Firefox, som jeg bruker til vanlig, og IE for å skjekke om det kan være noe galt med instillingene i browseren, men heller ikke da fikk jeg et annet resultat.

 

Takker for all hjelp hittil! Strålende at det finnes folk som bryr seg! :D

Lenke til kommentar
Kagee

Kagee

Skrevet
Skrevet
meny.style = "display: block;" blir det samme som å sette stilen til valgt element til "display: block". Bare dynamisk.

 

-C-

7968890[/snapback]

Det blir det ikke.

Hvis vi dropper et par apostrofer, og henviser til de riktige objectverdier, 

meny.style.display ="block";

og

 

um1.style.display = "none";
um2.style.display = "none";
um3.style.display = "none";
um4.style.display = "none";

så funker mye bedre.

Lenke til kommentar
Sono Juventino

Sono Juventino

Skrevet
  • Forfatter
Skrevet

Føler at det nærmer seg nå. Har prøvd endel forskjellig igjen - fortsatt uten resultat. Allikevel tok jeg en ny titt i IE og da fikk jeg opp en feilmelding. Kanskje den kan fortelle dere noe?

 

feilmelding.png

 

Ps. Den nederste linjen som ikke er synlig, inneholder bare link til siden.

 

Tror fortsatt at feilen ligger i at listene ikke er trykkbare. Hvordan skal man kunne få glede av onclick hvis elementet ikke er klikkbart?

Lenke til kommentar
tZar

tZar

Skrevet
Skrevet (endret)

Bruk document.getElementById('undermeny4').style.display istedet for um4.style.display og se hvordan det går ... ikke at det skal ha alt for mye å si

 

Sikkert på at det ikke er klikkbart? Det er ikke bare at cursor ikke endres? Det kan i så fall legges til i css'en

 

Edit: fiksa litt feil

Endret av tZar
Lenke til kommentar
Sono Juventino

Sono Juventino

Skrevet
  • Forfatter
Skrevet (endret)

Takk for at det er enda en som vil prøve seg! Desverre ser det ikke ut som du løste problemet.

 

Ifølge IEs javascript-"greie" får jeg vite at det er feil med linje 38 i filen, noe som vil si at det nå dreier seg om html'en.

 

Dette er linje 38:

<li id="valg2" onclick="showMenu(um2);">Valg2</li>

 

og feilmeldingen lyder:

um2 er udefinert

 

Nå veit jeg ikke hvor mye vekt man skal ilegge dette, men jeg prøver så godt jeg kan. :(

 

Noen som får noe fornuftig ut av dette?

 

Edit: Tror ikke listen er klikkbar nei. Grunnen er at musepekeren ligner pekeren man får opp når musa føres over tekst. Dette med å endre cursor tror jeg ikke er så lett.

Endret av Sono
Lenke til kommentar
tZar

tZar

Skrevet
Skrevet
Edit: Tror ikke listen er klikkbar nei. Grunnen er at musepekeren ligner pekeren man får opp når musa føres over tekst.

7981099[/snapback]

Det er fordi det er tekst, og ikke en link. onclick på et element blir ikke det samme som link, derfor får du ikke "hånden". Det kan derimot settes opp med style="cursor: pointer;" på elementene

Lenke til kommentar
Sono Juventino

Sono Juventino

Skrevet
  • Forfatter
Skrevet (endret)

Aha.. Da skjønner jeg hva du mener med cursors. Allikevel har det vel ingen reel betydning? De vil vel komme opp uansett om listene er klikkbare eller ikke siden de ikke legges på noe a-element.

 

Blir listene lagt opp sånn, eller har jeg misforstått?

 

<li id="valg1" onclick="showMenu.document.getElementById('undermeny1');">Valg1</li>

Endret av Sono
Lenke til kommentar
Sono Juventino

Sono Juventino

Skrevet
  • Forfatter
Skrevet

Tror jeg har skrevet opp linken over noen steder. Her følger den ihvertfall. :)

 

http://sono.frac.dk/menu/

 

Jeg la javascript-koden inn i index.php grunnet at det er mye styr å skulle krysslese to filer. Håper noen kan hjelpe meg å få dette skriptet til å funke! Det hadde gjort alt så utrolig mye lettere for meg.

 

Vil igjen takke for alle som prøver å komme med hjelp her! Dere skal vite at det settes pris på. :D

Lenke til kommentar
Wattengård

Wattengård

Skrevet
Skrevet

Ble en voldsom rewrite dette, men det funker mer eller mindre nå... Styling trengs selvfølgelig :)

 

Foreslår at du ser på Prototype rammeverket. Det er et enkelt rammeverk å jobbe med.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="no">
<head>
 <base href="http://sono.frac.dk/menu/">
 <link rel="shortcut icon" href="img/favicon.ico">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Juventusnorge.com · Norsk supporterside for Juventus Fc.</title>
 <meta http-equiv="Keywords" content="">
 <link href="style.css" rel="stylesheet" type="text/css" media="screen">
 <!-- <link href="style.css" rel="stylesheet" type="text/css" media="screen"> -->
<script type="text/javascript">
function init() {
var um1 = document.getElementById('undermeny1');
var um2 = document.getElementById('undermeny2');
var um3 = document.getElementById('undermeny3');
var um4 = document.getElementById('undermeny4');
hideAll();
}

function hideAll()
{
 document.getElementById('undermeny1').style.display = "none";
 document.getElementById('undermeny2').style.display = "none";
 document.getElementById('undermeny3').style.display = "none";
 document.getElementById('undermeny4').style.display = "none";
}

function showMenu(menu)
{
hideAll();
switch (menu) {
   case 1: { document.getElementById('undermeny1').style.display = "block"; break }
   case 2: { document.getElementById('undermeny2').style.display = "block"; break }
   case 3: { document.getElementById('undermeny3').style.display = "block"; break }
   case 4: { document.getElementById('undermeny4').style.display = "block"; break }
   
 }

}
</script>
</head>

<body onload="init();">  

<div id="wrap">
<h1><span><a href="#" id="main">Norsk supporterside for Juventus. Fc.</a></span></h1>
</div>
<ul id="toppmeny">
<li id="valg1" style="cursor: pointer;" onclick="showMenu(1);">Valg1</li>
<li id="valg2" style="cursor: pointer;" onclick="showMenu(2);">Valg2</li>
<li id="valg3" style="cursor: pointer;" onclick="showMenu(3);">Valg3</li>
<li id="valg4" style="cursor: pointer;" onclick="showMenu(4);">Valg4</li>
</ul>

<ul style="display: none;" id="undermeny1"><li>...menyliste1...</li></ul>
<ul style="display: none;" id="undermeny2"><li>...menyliste2...</li></ul>
<ul style="display: none;" id="undermeny3"><li>...menyliste3...</li></ul>
<ul style="display: none;" id="undermeny4"><li>...menyliste4...</li></ul>
</body>

</html>

 

-C-

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...