Večstopenjski meni

kaj bi lahko kdo sestavu kratek primer, kjer bi bile tri stopnje v meniju (meni-podmeni-podpodmeni) + da se celotna pod do podpodmeni-ja obarva!!! (če ni težko, da je meni horizontalni, ostali pa cvertikalni + da se odpirajo podmeni-ji na klik v meni-ju [ne na HOVER!!!])

PLEASE!!!

KmelJo, mislim da tvoj problem malo presega področje te teme.

Pa pazit moraš, kje boš tak meni uporabil. Če gre za kakšno ožje usmerjeno, s funkcijami natrpano spletno aplikacijo, potem rešitev najbrž ni slaba, za kakšno predstavitveno stran, ki jo bo obiskoval nezahteven uporabnik, pa moraš dvakrat premislit, če je primerna. Uporabnik se zna počutiti precej nerodno medtem ko mora paziti, da mu kurzor ne bo padel iz podmenija in bo moral navigacijo ponoviti od začetka.

KmelJo: Se ravno ukvarjam s podobnim primerom. Rad bi naredil veš nivojski vertikalni menu, ki se bo odrprl in obarval aktivno povezavo v meniju, ki kaže na podstran (četudi bo link kje drugje na strani). S težavo sem našel neko javascript varianto, vendar je imela samo 1 podnivo. Rabim pa 2. Pa sem študiru skor 1 tedn tisto kodo, kako bi kej spremenu, pa mi ni blo najbl jasn kaj pa kako. Pa sm se spravu za knjigo PHP in 24 hours in upam, da mi bo v kratkem uspel podvig - napisati kodo za meni.

Vsaj upam...

KmelJo: Tole je pa kr zalogaj... Tega pomoje ne boš našu nikjer med že narjenimi skriptami, ker ni glih pogost primer.

Ja, prosim če ustvarite novo temo glede delanja tega menija, bom tam napisal kaj več, ker sem se s PHP rešitvijo tega že ukvarjal. Pa tudi javascript rešitev verjetno ni neki bav bav
Celoten link pa dobiš s window.location.href

<script>
alert(window.location.href);
</script>

Ja, seveda, da se PHP koda sprocesira se mora stran ponovno naložiti, to sploh ni dvoma.
Ampak na oni strani imajo to zagotovo rešeno na tak način.

Recimo en enostaven primer. Zaradi enostavnosti sem napisal fleksibilno funkcijo ClassIme, ki sprejme 3 parametre, pogoj ob katerem se bo zadeva spremenila in imena za neaktiven in aktiven class.

PreveriURL pa preveri kdaj naj pokaže del kode.Recimo ukaz PreveriURL("moja_stran") bo izpolnjen ko bo naslov enak /moja_stran/index.html ali index.html?moja_stran

<style>
.aktivno {
background: black;
}
.neaktivno {
background: blue;
}
.foo {
background: red;
}
.bar {
background: green;
}
a {
color: white;
}
</style>

<?php
function ClassIme($pogoj,$neaktivno,$aktivno) {
	if(strstr($_SERVER['PHP_SELF'],$pogoj) || strstr($_SERVER['QUERY_STRING'],$url)) {
	$c = $aktivno;
	}
	else {
	$c = $neaktivno;
	}
	return $c;
}
function PreveriURL ($url) {
	if(strstr($_SERVER['QUERY_STRING'],$url) || strstr($_SERVER['PHP_SELF'],$pogoj)) {
	return true;
	}
	else {
	return false;
	}
}

echo '<div id="meni">' . "\n";
echo '<ul>' . "\n";
echo '<li id="meni1" class="'.ClassIme("link1","neaktivno","foo").'"><a href="?link1.html">link1</a>'. "\n";
if(PreveriURL("link1")) {
echo '<li id="meni4" class="'.ClassIme("link4","neaktivno","aktivno").'"><a href="/link4/">link4</a></li>'. "\n";
echo '<li id="meni5" class="'.ClassIme("link5","bar","aktivno").'"><a href="link5/link.html">link5</a></li>'. "\n";
}
echo '</li>'. "\n";
echo '<li id="meni2" class="'.ClassIme("link2","neaktivno","foo").'"><a href="/link2/">link2</a></li>'. "\n";
echo '<li id="meni3" class="'.ClassIme("link3","neaktivno","aktivno").'"><a href="link3/link.html">link3</a></li>'. "\n";
echo '</ul>'. "\n";
echo '</div>'. "\n";

No zdej sm pršu do te stopnje, da ima vsak element v meniju ime in id, tako da sem lahko naredil linke. Stvar dela BP. Meni se lepo odpira in zapira.

Sedaj samo še dodam 2. podnivo in pa poskusim podatke o meniju zapakirat v XML bazo, ker sedaj sem jih kar ročno vnesel v array.

Tak meni, kot je 1. primer, se da precej simpl narest, oz. se dobi ogromn skript. Pa narest se ga da tut samo z uporabo CSS-ja + nekaj vrstic javascripta, da dela še v IE. Glih zanč sm gledu en tutorial kako to narest samo s CSS-jm. Pa mi ni blo kej dost jasn k so bli eni čudni znaki ("<" in ">") v CSS kodi.

Sem poslal kmeljotu na ZS primer večih menijev, med drugim tut tazga kot je prvi.

No, ko pa dokončam svojega, ga bom dal na ogled.

No men je izdelava menija uspela. Naredu sm kt sm si zadal. Ne glede na to kje je link kliknjen (v meniju ali podstrani) se ustrezno odpre in aktivno obarva, ima 2 podnivoja, naloži pa se iz XML baze. Še nekaj lepotnih popravkov in moje prvo veliko PHP delo bo končano. Pol pa prlepm sm link, če bo kšn začetnik rabu!

Zelo zelo lepo!

Meni narejen s php-jem verjetno nikoli ne bo imel takih efektov, ampak delal bo pa v vsakem primeru. Ker če uporabnik nima vklopljenega javascripta...

trenutno delam stran, kjer se z vsakim klikom na link stran refreša, kar ni najbolje, ampak drugače ne gre.

zato tudi pri meniju ni pomembno ali se refreša ali ne. jaz bi rabil samo ta meni, da se "rešim" ene strani, ker me samo še meni zajebava prav zaradi tega barvanja poti, zato sem tudi poiskal pomoč in kot vidim, nisem zgrešil.

hvala za vse nasvete, ki do bili dani in ki bodo še dani(upam, da bojo )

Jackass: Upam, da ti bo čimprej uspelo narediti meni, da mi boš lahko razložil, na kakšen način ti je uspelo!!

Jackass: če uproabnik nima vklopljenega javascripta pride menu pač cel raztegnjen... je malo glupo ker je vnosov ogromno (zato pa je bil narejen tak js menu). Je pa to manj kot 1% hitov na stran tako da se sploh ne sekiramo.

MRB0rYS: "ima vč strani kjer je meni naret kot se vidi pač tam kjer si" lahko malo razložiš kaj si mislil s tem? Se mi pa zdi da ni tako narejeno .


Malo okleščen source se dal na http://www.studenti.pef.upr.si/~tinem/p...
pef_menu.php v bistvu samo izpiše html, ki naloži taprave .js datoteke in include meni.inc
Prava magija pa se dogaja v pef_menu.js

Če se da komu spisat dokumentacijo o tem kako zadeva funkcionira bom ful vesel

SeTAr: sem izklopil javascript, reloadov stran in celoten meni se ni raztegnil. Uporabljam FireFox 1.5.0.7.

THE MENI (by jAcKaSS):

meni.php:

---------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-...>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
<!--
body {
}
#mojmeni {
height: 500px;
background-color: #46351F;
padding: 10px;
width: 150px;
position: relative;
}
.box1 {
text-indent: 12px;
font-weight: bold;
font-size: 14px;
line-height: 31px;
font-family: arial;
width: 150px;
margin: 10px 0 0 0;
padding: 0px 0 0 0; /* top, right, bottom, left */
background: #7B6139;
}
.box1 a{
color: #f9f9f9;
text-decoration:none;
}
.box1 a:hover {
color: #FFEBA9;
text-decoration:none;
}
.box1-active{
text-indent: 12px;
font-weight: bold;
font-size: 14px;
line-height: 31px;
font-family: arial;
width: 150px;
margin: 10px 0 0 0;
padding: 0px 0 0 0; /* top, right, bottom, left */
background: #7B6139;
}
.box1-active a{
color: #FFEBA9;
text-decoration:none;
}
.box2, .box2-active { /*vse je isto*/
width: 130px;
background-color: #46351F;
font-family: arial;
font-size: 13px;
line-height: 15px;
margin: 0 0 0px 10px; /* top, right, bottom, left */
border-color: #7B6139;
border-width: 1px;
border-style: solid solid solid solid;
padding: 0px;
display: block;
}
.box2-active {
font-weight: bold; /* vse je isto, le pisava je krepka */
}
.box2 a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 1px 0 2px 6px;
}
.box2 a:hover {
color: #FFEBA9; /*color: #FFFF99;*/
border-color: #7B6139;
background-color: #5B4529;
}
.box2-active a{
color: #FFEBA9;
border-color: #7B6139;
background-color: #5B4529;
text-decoration: none;
display: block;
padding: 1px 0 2px 6px;
}
.box3, .box3-active {
width: 117px;
background-color: #46351F;
font-family: arial;
font-size: 13px;
line-height: 15px;
margin: 0 0 0px 23px; /* top, right, bottom, left */
border-color: #7B6139;
border-width: 1px;
border-style: solid solid solid solid;
padding: 0px;
display: block;
}
.box3-active {
font-weight: bold; /* vse je isto, le pisava je krepka */
}
.box3 a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 1px 0 2px 6px;
}
.box3 a:hover {
color: #FFEBA9;
border-color: #7B6139;
background-color: #5B4529;
}
.box3-active a {
color: #FFEBA9;
background-color: #5B4529;
text-decoration: none;
display: block;
padding: 1px 0 2px 6px;
}
-->
</style>


</head>


<body>

<?php

$xml_file="meni.xml"; //

if(file_exists($xml_file)){ //preverimo ali XML baza sploh obstaja

$menu = simplexml_load_file($xml_file); //naložimo XML bazo

$tabela = array(); //ustvarimo tabelo v katero bomo shranili vrednosti iz baze


/*po kakšnem čudnem principu je to shranjeno v tabelo raje ne sprašuj, ampak vseeno:

1. nivo je zapisan v stolpcu [x][0][0] pri čemer se x spreminja.
2. nivo je zapisan v stolpcih [x][y][0] pri čemer je x zaporedna številka 1. nivoja in y zaporedna številka 1. nivoju pripadajočega 2. nivoja, pri čemer je y<=1.
3. nivo je zapisan v stolpcih [x][y][z] pri čemer za x in y velja isto kot v 2. nivoju (x<=0; y<=1), z pa je zaporedna številka 2. nivoju pripadajočega 3. nivoja, pri čemer je z<=1;
*/

$i=0;
$j=1;
$k=1;
//z zanko gremo čez xml bazo in prepišemo vrednosti v tabelo
foreach($menu->nivo1 as $nivo1){
$j=1;
$tabela[$i][0][0][ime]=$nivo1->ime;
$tabela[$i][0][0][id]=$nivo1->id;

foreach($nivo1->nivo2 as $nivo2){
$tabela[$i][$j][0][ime]=$nivo2->ime;
$tabela[$i][$j][0][id]=$nivo2->id;
$k=1;

foreach($nivo2->nivo3 as $nivo3){
$tabela[$i][$j][$k][ime]=$nivo3->ime;
$tabela[$i][$j][$k][id]=$nivo3->id;
$k++;
}
$j++;
}
$i++;
}

if (isset($_GET["id"])) $id=$_GET["id"]; //dobiš id od predhodnega klica funkcije
else $id='domov'; //če ne, določi privzet id


//Poišcemo ustrezen id v tabeli
$a;
$b;
$c;
for($i=0; $i<count($tabela); $i++){
for($j=0; $j<count($tabela[$i]); $j++){
for($k=0; $k<count($tabela[$i][$j]); $k++){
if($id==$tabela[$i][$j][$k][id]){
$a=$i;
$b=$j;
$c=$k;
break;
}
}
}
}

//izpis menija
print("<div id=\"mojmeni\">");

for($i=0; $i<count($tabela); $i++){

if($i==$a){ //ce je i=a je 1. nivo odprt ali aktiven
//link na 1. nivoju nastavi na active
print("<div class=\"box1-active\"><a href=\"meni.php?id=".$tabela[$i][0][0][id]."\">".$tabela[$i][0][0][ime]."</a></div>");
for($j=1; $j<count($tabela[$i]); $j++){ //izpisovanje 2. nivoja

if($j==$b){ //ce je odprt 2. nivo, link na 2. nivoju nastavi na active
print("<div class=\"box2-active\"><a href=\"meni.php?id=".$tabela[$i][$j][0][id]."\">".$tabela[$i][$j][0][ime]."</a></div>");
for($k=1; $k<count($tabela[$i][$j]); $k++){ //izpisovanje 3. nivoja

if($k==$c){ //ce so take koordinate, pomeni, da je aktiven link na 3. nivoju -> nastavi na active
print("<div class=\"box3-active\"><a href=\"meni.php?id=".$tabela[$i][$j][$k][id]."\">".$tabela[$i][$j][$k][ime]."</a></div>");
}
else{ //ce ni aktiven link na 3. nivoju, normalno izpiši 3. nivo
print("<div class=\"box3\"><a href=\"meni.php?id=".$tabela[$i][$j][$k][id]."\">".$tabela[$i][$j][$k][ime]."</a></div>");
}
}
}
else{ //ce j!=b
print("<div class=\"box2\"><a href=\"meni.php?id=".$tabela[$i][$j][0][id]."\">".$tabela[$i][$j][0][ime]."</a></div>");
}
}
}
else{ //ce i!=a
print("<div class=\"box1\"><a href=\"meni.php?id=".$tabela[$i][0][0][id]."\">".$tabela[$i][0][0][ime]."</a></div>");
}
}

print("</div>");

} //konec if stavka za preverjanje, ce obstaja xml datoteka


?>
<p>Kaj se zgodi, če klikneš link nekje drugje na strani, ne v meniju:</p>
<a href="meni.php?id=html">HTML</a>
<a href="meni.php?id=kontakt">Kontakt</a>

</body>
</html>

------------------------------------------------------------------------------

XML baza (meni.xml):

------------------------------------------------------------------------------

<?xml version="1.0" encoding="iso-8859-2"?>
<!-- This is a sample XML menu file -->
<menu>

<!--struktura-->
<nivo1>
<ime>Domov</ime>
<id>domov</id>
</nivo1>

<!--naslednja struktura-->
<nivo1>
<ime>Prenosi</ime>
<id>prenosi</id>

<nivo2>
<ime>Prenos 1</ime>
<id>prenos1</id>
</nivo2>
<nivo2>
<ime>Prenos 22</ime>
<id>prenos22</id>

<nivo3>
<ime>FTP</ime>
<id>ftp</id>
</nivo3>
<nivo3>
<ime>HTML</ime>
<id>html</id>
</nivo3>

</nivo2>
<nivo2>
<ime>Prenos 3</ime>
<id>prenos3</id>
</nivo2>
</nivo1>

<!--naslednja struktura-->
<nivo1>
<ime>Kontakt</ime>
<id>kontakt</id>
<nivo2>
<ime>Kje nas najdete</ime>
<id>kje_nas_najdete</id>
</nivo2>
</nivo1>

</menu>

------------------------------------------------------------------------------

Kdor potrebuje, si lahko prekopira tole skripto, tisti, ki pa imate več izkušenj s php-jem, pa so dobrodošli vaši nasveti za izboljšanje skripte in ne kritike kaj vse je zanič.

LP,

Šumniki ti ne delajo, ker imaš v meni.php nastavljen encoding iso-8859-1, spremeni ga v iso-8859-2.
Koda zgleda kar zakomplicirano, bom kaj več zapisal kasneje, ko si jo bom imel čas ogledati.

Mogoče bi moral poskusiti s windows-1250 ali UTF-8.
Poskusi zaenkrat samo pognati iconv na $menu. Sem imel enkrat podobne težave pri pisanju na slike. ICONV je rešil vse.

kaj se pa mora spremeniti, če hočeš, da deluje na PHP 4.3???