PHP/Javascript - Hjälp med meny

Trädvy Permalänk
Medlem
Plats
Örebro
Registrerad
Jan 2008

PHP/Javascript - Hjälp med meny

Hej!

Jag har fått i uppdrag att bygga en hemsida och jag behöver lite hjälp med att bygga ett menysystem. Jag har hållit på lite tidigare med websidor men jag får ända klassa mig som nybörjare.

Jag vill ha en sidomeny som inte laddas om utan det är enbart är informationen till höger som skall förändras. Menyn skall bestå av flera undermenyer (upp till 3 st) och jag vill att när man klickat på på en underkategori så stannar den öppen och markerad. Jag vill inte ha något meny där man bara hovrar över för att undermenyer skall öppnas.

http://www.bmeters.se/produkter.php har nästan exakt det jag efterfrågar i menysystemet. Jag har läst sidkällan och googlat och försökt mig förstå hur detta är gjort men hittar ingenting som gör mig klokare om detta. Finns allting på produkter.php från början och länkarna med ?cat= enbart bestämmer vad som ska visas? Men det känns som ingenting laddas om förutom själva maincontent och förutom att menyn blir markerad där man trycker. Även övermenyn osv verkar inte laddas om. Det enda som kan förbättras i min drömvärld är att det finns en pil nedåt för att få fram undermenyn till höger om menytexten (där menytexten är länken) så man kan välja vilken del man vill se innan högra maincontent-delen laddas. Detta är dock inget måste.

Hur är detta gjort egentligen? Var kan jag läsa specifikt om det? Eller finns det något annat som kan göras i JQuery/Javascript som påminner om detta? Alla tips mottages tacksamt.

Mvh / Christoffer

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

Menyn laddas ju troligen in som en separat PHP fil med if-statments som lyssnar på CAT värdet.

if ( CAT > 50 && CAT < 60) { //om CAT är mellan 50 & 60
Ladda denna meny istället
}

Nu var det typ 23456 år sedan jag kodade egna saker i PHP, men detta ser ut som den mest troliga lösningen.

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Plats
Landskrona
Registrerad
Nov 2008

@Allegany Låt säga att du har produkter.php och meny.php

Produkter.php

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Produkter</title> <!-- CSS-länkar här --> </head> <body> <div class="container"> <?php include "meny.php"; ?> <div class="products"> <!-- Produkter här --> </div> </div> <!-- Javascript här --> </body> </html>

Meny.php

<?php // Check if cat is set, if not use default value 0 $cat = isset($_GET['cat']) ? $_GET['cat'] : '0'; // First item level 1 $item_1 = array('58', '59', '60', '61', '66', '67', '68', '69', '70', '71', '75', '76', '77', '102'); // First item level 1, first item level 2 $item_1_1 = array('59', '66', '67', '68'); // First item level 1, second item level 2 $item_1_2 = array('60', '70', '71', '102', '69'); ?> <ul> <!-- First item level 1 --> <li> <span <?php if( in_array($cat, $item_1) ) { echo "class='markerad'"; } ?>>Vattenmätare</span> <?php if( in_array($cat, $item_1) ) { ?> <ul> <!-- First item level 1, first item level 2 --> <li> <span <?php if( in_array($cat, $item_1_1) ) { echo "class='markerad'"; } ?>>Lägenhetsmätare</span> <?php if( in_array($cat, $item_1_1) ) { ?> <ul> <li <?php if( $cat == '67' ) { echo "class='markerad'"; } ?>>M-BUS radio</li> <li <?php if( $cat == '68' ) { echo "class='markerad'"; } ?>>M-BUS trådad</li> <li <?php if( $cat == '66' ) { echo "class='markerad'"; } ?>>Puls</li> </ul> <?php } // End if ?> </li> <!-- First item level 1, second item level 2 --> <li> <span <?php if( in_array($cat, $item_1_2) ) { echo "class='markerad'"; } ?>>Hushållsmätare</span> <?php if( in_array($cat, $item_1_2) ) { ?> <ul> <li <?php if( $cat == '70' ) { echo "class='markerad'"; } ?>>M-BUS radio</li> <li <?php if( $cat == '71' ) { echo "class='markerad'"; } ?>>M-BUS trådad</li> <li <?php if( $cat == '102' ) { echo "class='markerad'"; } ?>>Med plusutgång</li> <li <?php if( $cat == '69' ) { echo "class='markerad'"; } ?>>Utan kommunikation</li> </ul> <?php } // End if ?> </li> <!-- First item level 1, third item level 2 --> <li>...</li> </ul> <?php } // End if ?> </li> <!-- Second item level 1 --> <li>Värme/Kylmätare</li> <!-- Third item level 1 --> <li>Elmätare</li> <!-- Fourth item level 1 --> <li>...</li> </ul>

Jag antar att kommentarerna ovan förklarar vad det är som händer i koden. Kortfattat så kollar jag med hjälp av PHP vad $_GET['cat'] har för värde och kollar sedan om värdet finns i de tre listorna som jag har skapat för det första menyvalet. Därefter så lägger jag till klassen markerad på rubriker som skall få blå bakgrund och/eller visar undermenyer till aktuellt menyval.

@Florrpan Du måste hämta värdet $_GET['cat'] först, endast CAT duger ej i en if-sats.

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006
Skrivet av kevvs:

@Florrpan Du måste hämta värdet $_GET['cat'] först, endast CAT duger ej i en if-sats.

Ser det verkligen ut som jag försökte skriva fungerande kod? haha
Nej, jag gjorde ett enkelt exempel, sen tyckte jag han skulle få pussla ihop det själv.

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Plats
Landskrona
Registrerad
Nov 2008
Skrivet av Florrpan:

Ser det verkligen ut som jag försökte skriva fungerande kod? haha
Nej, jag gjorde ett enkelt exempel, sen tyckte jag han skulle få pussla ihop det själv.

Jupp, det ser ut som att du försökte skriva fungerande kod som svar till trådskaparen. Därav mitt svar

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006
Skrivet av kevvs:

Jupp, det ser ut som att du försökte skriva fungerande kod som svar till trådskaparen. Därav mitt svar

Det var under bältet, haha!
Han sa ju att han byggt sidor förut, och detta är hans uppdrag. Så jag tänker inte göra jobbet åt han, som vissa andra

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780