PHP/Javascript - Hjälp med meny - Programmering och digitalt skapande

2017-04-17 00:20

Permalänk

Allegany

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

Rapportera Redigera

Citera flera Citera

2017-04-17 00:47

Permalänk

Florrpan

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.

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Rapportera Redigera

Citera flera Citera

2017-04-17 18:31

Permalänk

kevvs

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.

Rapportera Redigera

Citera flera Citera

2017-04-17 21:24

Permalänk

Florrpan

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.

Gå till inlägget

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.

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Rapportera Redigera

Citera flera Citera (1)

2017-04-17 22:36

Permalänk

kevvs

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.

Gå till inlägget

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

Rapportera Redigera

Citera flera Citera

2017-04-17 23:24

Permalänk

Florrpan

Medlem ★