Avatar billede riefart Seniormester
11. september 2013 - 09:05 Der er 9 kommentarer og
1 løsning

Lodret dropdown-menu med udtræk fra database

Jeg skal lave et menukort til en restaurant.
Overskrifterne til menukortet skal hentes fra en database, være klikbare og vises på en lodret liste som herunder:

Starters
Pizza
Bøf
Børneretter


Ved mouseover og klik i overskrifterne, skal en undermenu, som også ligger i databasen, indlæses og rykke de øvrige overskrifter nedad. Eks:
Starters
Pizza

margarita
neptun
bologna

Bøf
Børneretter

Hvordan laver jeg dette i ren PHP og CSS?
Nogle ekspertideer?
Avatar billede jakobdo Ekspert
11. september 2013 - 09:55 #1
Du skal jo "bare" have et udtræk som har hovedmenu og undermenuer, og så smide det ind i denne kode:

http://jqueryui.com/accordion/

Hvor meget ved du selv og hvor meget skal jeg forklare, for du kan løse opgaven?
Avatar billede riefart Seniormester
11. september 2013 - 20:47 #2
Hej Jakobdo.
Jeg prøver lige at arbejde med det i morgen. Hvis jeg ender med en stor skaldet plet i hovedet, råber jeg efter din hjælp.
Avatar billede riefart Seniormester
12. september 2013 - 22:06 #3
-> Jacobdo.
Så fik jeg revet indtil flere bare pletter i hovedbunden.
Jeg har prøvet mig lidt frem med den JQuery, du anbefalede. Det er meget tæt på den jeg ønsker, og kan sikkert style mig til resten.
Jeg har dog et problem med at indlæse databaseresultater. Har forsøgt dette:
<?php
include("db.php");
if($res = $mysqli->query('SELECT * FROM `menu`')) {
        while($row = $res->fetch_assoc()) {
    $overskrift = $row['overskrift'];
        $indhold = $row['indhold'];
    $indhold = nl2br($indhold);

?>
<div id="accordion">
<h3><?php echo "$overskrift"; ?></h3>
<div><p><?php echo "$indhold"; ?></p></div>
</div>
<?php
}
    $res->free();
}
$mysqli->close();
?>

Men får kun første post vist i accordion-menuen, resten vises uformatteret nedenunder.
Du har sikkert en god løsning. Kan du hjælpe?
Avatar billede jakobdo Ekspert
12. september 2013 - 22:18 #4
Nok ikke helt perfekt, da jeg muligvis vil mene dine undermenuer burde være i samme tabel som menu.
Men kender ikke din struktur.

Men prøv lige dette:

<?php
include("db.php");
if($res = $mysqli->query('SELECT * FROM `menu`')) {
    echo '<div id="accordion">';
    while($row = $res->fetch_assoc()) {
        $overskrift = $row['overskrift'];
        $indhold = $row['indhold'];
        $indhold = nl2br($indhold);

        echo '<h3>' . $overskrift . '</h3>';
        echo '<div><p>' . $indhold . '</p></div>';
    }
    echo '</div>';
    $res->free();
}
$mysqli->close();
?>
Avatar billede riefart Seniormester
12. september 2013 - 22:58 #5
Undermenu (indhold) og overskrifter ligger i samme post.
Da jeg med dit forslag samtidigt smed 'echo "<div id='accordion'>";' før databasekaldet fik jeg det til at virke. Super. Tak for hjælpen.
Ved du om det muligt, at sætte funktionen til ikke at have et menupunkt åbent når siden læses ind?
Avatar billede jakobdo Ekspert
12. september 2013 - 23:02 #6
Tror denne er løsningen:

http://api.jqueryui.com/accordion/#option-active

Er dog ikke meget for du laver id="..." i et loop.
Du burde kunne nøjes med en. Men kan tage fejl.
Avatar billede riefart Seniormester
12. september 2013 - 23:13 #7
Det var lige netop løsingen. Du har ret mht. div's i loop's - det validerer i hvert fald ikke; plejer dog også at bruge class'es. Men vil prøve at sætte div'en udenfor loopet.
Tak skal du have endnu en gang.
Smid et svar.
Avatar billede jakobdo Ekspert
13. september 2013 - 21:31 #8
Svar!
Avatar billede riefart Seniormester
14. september 2013 - 23:02 #9
Jeg var måske lige lidt hurtig i vendingen. Det er ganske vist den funktion jeg ønsker, men hvor initialiserer jeg funktionen; altså sætter kodestumpen ind? Umiddelbart er der ikke nogle af de forsøg jeg har gjort, der har virket.
Avatar billede jakobdo Ekspert
15. september 2013 - 10:28 #10
Lad mig evt. se din side eller få adgang til koden.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester