Forum

[oliverr]

Hallo Forum,

trotz Suche und viel Forum lesen habe ich jetzt doch mal eine Frage.

Ich möchte gerne das Demo2 http://rexdemo02.kukulkan.org mit "<ul>-Navigation für mehrere Benutzerbereiche inc. Breadcrumb" benutzen (wegen der Benutzerbereiche). Nun ist ja die eigentliche Navi vom Demo2 etwas anders eingebaut als bei der <ul>-Navigation. Wie baue ich das Demo so um, das ich die selbe Horizontale- und Vertikale-Navigation habe wie vom Demo aber mit <ul>-Navigation? Da ich nicht ein PHP und CSS Profi bin, blicke ich da nicht so ganz durch.

Würde mich über ein paar Lösungsansätze freuen.

Gruß
Oliver

PS: Was ist eigentlich der Unterschied zwischen Demo1 http://rexdemo01.kukulkan.org (2-teilige Navigation) und Demo2 http://rexdemo02.kukulkan.org (3-teilige Navigation) bzw. zwischen 2-teilige Navigation und 3-teilige Navigation?

[raybeam]

Hallo Oliver,

ich kenne leider den Aufbau des Demotemplates nicht, aber es sollte reichen die horizontale Navigation im Seitentemplate durch

Code: Alles auswählen

print $navigation

und die vertikale Navigation durch

Code: Alles auswählen

print $subNavigation

auszugeben. Vielleicht findest Du bereits ähnliche Bezeichnungen im Demotemplate (wie gesagt, ich kenne den Quelltext nicht)

Wie im <ul>...Template beschrieben, musst Du natürlich den "Menü-Umschalters" auf:

Code: Alles auswählen

$subUl = 'extra';

einstellen. Die eigentliche Gestaltung der Menüs erfolgt über Cascading Style Sheets. Da solltest Du die der Demo evtl. übernehmen können, wenn Du die Klassen- bzw. ID-Namen entsprechend anpasst.

Gruß

Peter

[oliverr]

Hallo Peter,

ich kenne leider den Aufbau des Demotemplates nicht

Solltest Du Dir mal ansehen, sind wie ich finde, wirklich sehr Gute Demo Templates. (Hallo Robert , wie wäre es mit noch einem Demo, wo die "<ul>-Navigation für mehrere Benutzerbereiche" mit eingebaut ist? )

es sollte reichen die horizontale Navigation im Seitentemplate durch

Code: Alles auswählen

print $navigation

und die vertikale Navigation durch

Code: Alles auswählen

print $subNavigation

auszugeben.
Wie im <ul>...Template beschrieben, musst Du natürlich den "Menü-Umschalters" auf:

Code: Alles auswählen

$subUl = 'extra';

einstellen.

Habe ich schon gemacht und weil wohl das CSS dafür dann nicht passt, ist die Hauptnavi, die Horizontal sein soll, aber trotzdem untereinander.

Die eigentliche Gestaltung der Menüs erfolgt über Cascading Style Sheets. Da solltest Du die der Demo evtl. übernehmen können, wenn Du die Klassen- bzw. ID-Namen entsprechend anpasst.

Das wird es wohl sein, na das wird ein Spaß, weil ich CSS noch weniger verstehe wie PHP. Aber an solchen Problemen, lernt man am besten.

Gruß
Oliver

[oliverr]

Das ist der Quellcode der ausgegeben wird vom demo2.

Code: Alles auswählen

<div id="navigation"> <ul class="navsub">
<li class="inactive level2"><a class="level2 inactive" href="15-0-einleitung.html">Einleitung</a></li>
<li class="active  level2"><a class="level2 active" href="16-0-standards.html">Standards</a>
<ul class="subnav2">
<li class="inactive level3"><a class="level3 inactive" href="20-0-dritte-ebene.html">Dritte Ebene</a></li>

</ul>
</li>
<li class="inactive level2"><a class="level2 inactive" href="17-0-downloads.html">Downloads</a></li>
<li class="inactive level2"><a class="level2 inactive" href="18-0-galerie.html">Galerie</a></li>
<li class="inactive level2"><a class="level2 inactive" href="19-0-tabellen.html">Tabellen</a></li>
</ul>
</div>

Hier mein Versuch das CSS File an zu passen:

Code: Alles auswählen

   
/* Linke Spalte */

#left {
   width: 200px;
   float: left;
   margin: 0;
   padding: 0;
}

#navigation {
   width: 199px;
   margin: 0;
}

#navigation ul.navsub {
   list-style-type: none;
   margin-left: 0;
   padding-left: 0;
}

#navigation ul.subnav2 {
   list-style-type: none;
   margin-left: 0;
   padding-left: 0;
}

#navigation ul.navsub li.level2 li a {
   display: block;
   text-decoration: none;
   background: #eee;
   color: #999;
   padding: 10px 10px 10px 20px;
   border-bottom: 1px solid #fff;
}

#navigation ul.navsub li.level2 li.active a {
   background-color: #ccd7dd;
   color: #fff;
   padding: 10px 10px 10px 20px;
}

#navigation ul.navsub li.level2 li a:hover {
   background-color: #EA1144;
   color: #fff;
   padding: 10px 10px 10px 20px;
}

#navigation ul.subnav2 li.level3 li a {
   display: block;
   text-decoration: none;
   background: #3F4C6B;
   color: #fff;
   padding: 10px 10px 10px 20px;
   border-bottom: 1px solid #fff;
}

#navigation ul.subnav2 li.level3 li.active a {
   background-color: #f90;
   color: #fff;
   padding: 10px 10px 10px 20px;
}

#navigation ul.subnav2 li.level3 li a:hover {
   background-color: #EA1144;
   color: #fff;
   padding: 10px 10px 10px 20px;
}

Ich bekomme es aber nicht hin, das CSS so angepasst zu bekommen, das es richtig greift. Ich blick da mit dem UL und IL nicht durch. (die 3.Ebene wird richtig formatiert, warum verstehe ich nicht.

[oliverr]

Duch weiteres Ausprobieren, habe ich es doch noch hin bekommen.

Code: Alles auswählen

/* Linke Spalte */

#left {
   width: 200px;
   float: left;
   margin: 0;
   padding: 0;
}

#navigation {
   width: 199px;
   margin: 0;
}

#navigation ul {
   list-style-type: none;
   margin-left: 0;
   padding-left: 0;
}

#navigation ul.navsub li.level2 a {
   display: block;
   text-decoration: none;
   background: #eee;
   color: #999;
   padding: 10px 10px 10px 20px;
   border-bottom: 1px solid #fff;
}

#navigation ul.navsub li.level2.active a {
   background-color: #ccd7dd;
   color: #fff;
   padding: 10px 10px 10px 20px;
}

#navigation ul.navsub li.level2 a:hover {
   background-color: #EA1144;
   color: #fff;
   padding: 10px 10px 10px 20px;
}

#navigation ul.subnav2 li.level3 a {
   display: block;
   text-decoration: none;
   background: #3F4C6B;
   color: #fff;
   padding: 10px 10px 10px 20px;
   border-bottom: 1px solid #fff;
}

#navigation ul.subnav2 li.level3.active a {
   background-color: #f90;
   color: #fff;
   padding: 10px 10px 10px 20px;
}

#navigation ul.subnav2 li.level3 a:hover {
   background-color: #EA1144;
   color: #fff;
   padding: 10px 10px 10px 20px;
}

So jetzt bastel ich weiter, mal sehen wo ich das nächste mal hängen bleibe