(gelöst) Menü im Content - Bereich als Reitermenü
Eingetragen von Thorsten1 (126)am 06.12.2012 - 07:51 Uhr in
Hallo liebe Drupalgemeinde,
ich habe nun schon einige Zeit gesucht aber leider keine überzeugende "einfache" Lösung gefunden.
Gibt es wirklich keine Möglichkeit einem Menü, welches im Contentbereich angezeigt werden soll, den Style des Reitermenüs zu verpassen?
Ich möchte ausgesuchte Nodes eines Users über ein Menü miteinander verbinden. Will heissen, dass der Leser auf diese Art auf weitere Inhalte des Users stößt.
Vielen Dank im Voraus schon mal für eure Tipps,
Thorsten
- Anmelden oder Registrieren um Kommentare zu schreiben
Mit CSS
am 06.12.2012 - 12:22 Uhr
ich bin mir nicht sicher, was du mit "einfache" Lösung meinst. Ein Modul vielleicht? Für solche Menü- Styles nutzt man "für gewöhnlich" CSS. Ist also eine Frage des Theming.
Davon abgesehen: Was sollen denn die Menüpunkte sein? Die Node- Titles? Das wäre recht unpraktisch, da diese ja häufig sehr lang sind. Da wäre doch eine Liste der ausgesuchten Nodes viel praktischer. Vielleicht verstehe ich dich aber auch nur einfach falsch....
Du kannst, wie glycid schon
am 06.12.2012 - 15:12 Uhr
Du kannst, wie glycid schon geschrieben hat, jedes neu angelegte Menu per CSS stylen oder du guckst hier.
http://drupal.org/project/quicktabs
Hier sind schon viele verschiedene Styles dabei, die du zusätzlich per CSS anpassen kannst.
oder
http://drupal.org/project/node-collection
Viele Grüße Jenna
Hallo,mit "einfach" meinte
am 06.12.2012 - 19:47 Uhr
Hallo,
mit "einfach" meinte ich entweder ein Modul oder andere Erweiterung. Wäre doch zum Beispiel cool, wenn man bei der Erstellung eines Menüs die Darstellung bestimmen kann.
Mit Quicktabs habe ich schon versucht. Jedoch ist die Darstellung des Inhalts unbefriedigend, da ich eine Seite eingeben muss (Node) auf der das Menü angezeigt wird, und der Inhalt dieser Seit wird nach unten geschoben, sobald ein Menüpunkt ausgewählt wird. Dann werden also 2 Inhalte untereinander dargestellt.
Dass das mit css geht ist mir bewusst. Momentan ist meine Lösung sehr unbefriedigend, da das Menü in jedem einzelnen Node eingearbeitet ist. Der Aufruf ist durch ein entsprechendes Node--tpl gestaltet und ruft über diesen Weg den Style (tabs) auf. Wenn also ein weiterer Menüpunkt hinzukommt, muss ich alle entsprechenden Nodes bearbeiten, das nerft langsam, da es immer mehr wird.
Über die Blockfunktionen kann ich ja wunderbar die Seiten bestimmen, wo der Block (Menü) angezeigt werden soll. Ich habe mir auch ein entsprechendes "Menü" erstellt. Jedoch wird natürlich kein aktiver Reiter angezeigt, da eine Verbindung nicht besteht. Das würde sicher über eine if - Funktion gehen. Jedoch habe ich es noch nicht geschafft die Abfrage der nid richtig zu formulieren.
Ich arbeite mit dem Zen-Theme. Im Contentbereich habe ich 2 Bereiche. Den "Hervorgehoben" - hier soll das Menü hin, und den "Inhalt" hier wird der Inhalt angezeigt. Kann im "Hervorgehoben" überhaupt schon die nid des Beitrages abgefragt werden?
Wenn ja, wie lautet diese Abfrage?
Hier mal ein Code-Schnipsel zur Veranschaulichung:
<div class="tabs">
<ul class="tabs primary clearfix">
<?php if ($nid == '2939') {
print '<li class="active"><a class="active" href="/node/2939"><span class="tab">Unternehmen</span></a></li>';
} else {
print '<li><a href="/node/2939"><span class="tab">Unternehmen</span></a></li>';
print render($nid); }?>
usw....
</ul>
</div>
Viele Grüße
Thorsten
Jenna schrieb Du kannst, wie
am 06.12.2012 - 19:53 Uhr
Du kannst, wie glycid schon geschrieben hat, jedes neu angelegte Menu per CSS stylen ...
Wo bzw. wie kann ich das machen? Mit css-Injektor?
Thorsten1 schriebWo bzw. wie
am 06.12.2012 - 21:07 Uhr
Wo bzw. wie kann ich das machen? Mit css-Injektor?
Zum einen kann ich deiner Vorgehensweise offen gestanden nicht wirklich folgen. Zum anderen hab ich das Gefühl, dass dir ein paar grundlegende Basics in PHP, HTML, CSS und Drupal fehlen.
Du müsstest folgendermaßen vorgehen:
<div class="menu"> oder <ul class="menu">Den tatsächlichen Namen der Klasse findest du recht einfach mit der Firefox- Erweiterung "Firebug" raus. Jetzt kannst du in der .css Datei deines Themes die Stylesheet Notationen vornehmen. Also beispielhaft:
.namedeinerklasse { margin: ; padding: .....u.s.w. }Wenn du in CSS nicht fit bist, findest du bestimmt auf Webdesigner- Seiten CSS Code für deinen gewünschten Menü- Style.
Hallo glycid, Danke schon mal
am 06.12.2012 - 22:01 Uhr
Hallo glycid,
Danke schon mal für deine Mühe.
Es ist doch so, wenn ich class menu ändere, werden alle Menüs geändert. Das ist so nicht gewollt. Die anderen Menüs sollen so bleiben wie sie sind.
Ich arbeite bereits mit Firebug und habe schon so einige Sachen mit dessen Hilfe realisieren können.
Bei den Inhaltstypen, kann ich für jeden Typ ein node-tpl-datei anlegen, um die Ansicht zu individualisieren.
Gibt es so etwas für Menüs?
Wenn du ein neues Menu
am 06.12.2012 - 22:33 Uhr
Wenn du ein neues Menu anlegst und in einen Block packst und dann nochmal mit Firebug dabei gehst siehst du das das Menu z.B.
#block-nice_menus-1 heisst, das nächste Menu würde dann #block-nice_menus-2 sein usw.
(Nice-Menu, da ich das Modul installiert habe, der Blockname kann auch anders lauten)
Natürlich kannst du jedes Menu gesondert stylen, indem du die ID# im CSS definierst, glycid hat das Vorgehen doch schon perfekt beschrieben, mach das doch erstmal und guck dir das neue Menu dann mit Firebug an?
Grüße Jenna
So isses
am 06.12.2012 - 22:48 Uhr
Du kannst jedes Menü in Drupal separat stylen.
Du verwendest einmal die ID des Blocks und die Menü Klasse im CSS. Zum Beispiel:
#mein-neuer-block-fuer-das-menu .meinemenuklasse{ hier kommt das stylesheet rein; }
danke schon mal, ich setze
am 07.12.2012 - 20:34 Uhr
danke schon mal, ich setze mich morgen noch mal ran.
Ich komme leider nicht
am 08.12.2012 - 10:20 Uhr
Ich komme leider nicht weiter.
Firebug zeigt mir für das Menü folgenden Code:
<div class="region region-highlighted"><div id="block-menu-menu-mein-erstes-menue" class="block block-menu last even">
<h2 class="block-title">mein-erstes-menue</h2>
<div class="content">
<ul class="menu">
<li class="first leaf active-trail online-shop">
<a class="active-trail active" title="" href="/node/2940">online shop</a>
</li>
<li class="last leaf unternehmen">
<a title="" href="/node/2939">unternehmen</a>
</li>
</ul>
</div>
</div>
</div>
den Style, den ich für das Menü haben möchte, gibt's ja schon in der tabs.css:
div.tabs, div.block-menu{
margin: 0 0 5px 0;
}
ul.primary {
margin: 0;
padding: 0 0 0 10px; /* LTR */
border-width: 0;
list-style: none;
white-space: nowrap;
line-height: normal;
background: url(../images/tab-bar.png) repeat-x left bottom;
}
ul.primary li {
float: left; /* LTR */
margin: 0;
padding: 0;
}
ul.primary li a {
display: block;
height: 24px;
margin: 0;
padding: 0 0 0 5px; /* width of tab-left.png */
border-width: 0;
/*font-weight: bold;*/
text-decoration: none;
color: #777;
background-color: transparent;
background: url(../images/tab-left.png) no-repeat left -38px;
}
ul.primary li a .tab {
display: block;
height: 20px; /* 24px (parent) - 4px (padding) */
margin: 0;
padding: 4px 13px 0 6px;
border-width: 0;
line-height: 20px;
color: #000;
/*font-weight:lighter;*/
background: url(../images/tab-right.png) no-repeat right -38px;
}
ul.primary li a:hover,
ul.primary li a:focus {
color: #000;
/*font-weight:lighter;*/
border-width: 0;
background-color: transparent;
background: url(../images/tab-left.png) no-repeat left -76px;
}
ul.primary li a:hover .tab,
ul.primary li a:focus .tab {
color: #fff;
/*font-weight:lighter;*/
background: url(../images/tab-right.png) no-repeat right -76px;
}
ul.primary li.active a,
ul.primary li.active a:hover,
ul.primary li.active a:focus {
border-width: 0;
color: #000;
background-color: transparent;
background: url(../images/tab-left.png) no-repeat left 0;
}
ul.primary li.active a .tab,
ul.primary li.active a:hover .tab,
ul.primary li.active a:focus .tab {
color: #333;
background: url(../images/tab-right.png) no-repeat right 0;
}
ul.secondary {
margin: 0;
padding: 0 0 0 5px; /* LTR */
border-bottom: 1px solid #c0c0c0;
list-style: none;
white-space: nowrap;
background: url(../images/tab-secondary-bg.png) repeat-x left bottom;
}
ul.secondary li {
float: left; /* LTR */
margin: 0 5px 0 0;
padding: 5px 0;
border-right: none; /* LTR */
}
ul.secondary a {
display: block;
height: 24px;
margin: 0;
padding: 0;
border: 1px solid #c0c0c0;
text-decoration: none;
color: #777;
background: url(../images/tab-secondary.png) repeat-x left -56px;
}
ul.secondary a .tab {
display: block;
height: 18px; /* 24px (parent) - 6px (padding) */
margin: 0;
padding: 3px 8px;
line-height: 18px;
}
ul.secondary a:hover,
ul.secondary a:focus {
background: url(../images/tab-secondary.png) repeat-x left bottom;
}
ul.secondary a.active,
ul.secondary a.active:hover,
ul.secondary a.active:focus {
border: 1px solid #c0c0c0;
color: #000;
background: url(../images/tab-secondary.png) repeat-x left top;
}
Wie kann ich den Style nun für mein Menü nutzen?
In welcher css-Datei leg ich den Style rein, oder sollte es eine eigene css-datei sein?
Wäre wirklich sehr schön eine genauere Anleitung zu bekommen.
Viele Grüße
Thorsten
Lege eine eigene CSS-Datei an
am 08.12.2012 - 11:09 Uhr
Lege eine eigene CSS-Datei an und trage die in der .info-Datei Deines Themes als letzte in der Reihe der CSS-Dateien ein. Des weiteren schreibst Du in den hier aufgeführten CSS-Anweisungen vor jeden Selector die ID Deines Blockes. Damit sieht das so aus (letzte CSS-Anweisung als Beispiel):
#block-menu-menu-mein-erstes-menue ul.secondary a.active,#block-menu-menu-mein-erstes-menue ul.secondary a.active:hover,
#block-menu-menu-mein-erstes-menue ul.secondary a.active:focus {
border: 1px solid #c0c0c0;
color: #000;
background: url(../images/tab-secondary.png) repeat-x left top;
}
Dadurch gelten diese CSS-Anweisungen nur in diesem einen Block.
Beste Grüße
Werner
Hallo Werner, habe nun eine
am 08.12.2012 - 11:57 Uhr
Hallo Werner,
habe nun eine .css Datei (tab-mein-menue.css) im css-Ordner des Themes angelegt und in der .info-datei den Eintrag vorgenommen
...
stylesheets[print][] = css/print.css
stylesheets[all][] = css/tab-mein-menue.css
stylesheets-conditional[lte IE 7][all][] = css/ie7.css
stylesheets-conditional[lte IE 6][all][] = css/ie6.css
...
vor jedem Selektor die ID eingetragen:
#block-menu-menu-mein-erstes-menue div.tabs,
#block-menu-menu-mein-erstes-menue div.block-menu{
margin: 0 0 5px 0;
}
#block-menu-menu-mein-erstes-menue ul.primary {
margin: 0;
padding: 0 0 0 10px; /* LTR */
border-width: 0;
list-style: none;
white-space: nowrap;
line-height: normal;
background: url(../images/tab-bar.png) repeat-x left bottom;
}
#block-menu-menu-mein-erstes-menue ul.primary li {
float: left; /* LTR */
margin: 0;
padding: 0;
}
#block-menu-menu-mein-erstes-menue ul.primary li a {
display: block;
height: 24px;
margin: 0;
padding: 0 0 0 5px; /* width of tab-left.png */
border-width: 0;
/*font-weight: bold;*/
text-decoration: none;
color: #777;
background-color: transparent;
background: url(../images/tab-left.png) no-repeat left -38px;
}
#block-menu-menu-mein-erstes-menue ul.primary li a .tab {
display: block;
height: 20px; /* 24px (parent) - 4px (padding) */
margin: 0;
padding: 4px 13px 0 6px;
border-width: 0;
line-height: 20px;
color: #000;
/*font-weight:lighter;*/
background: url(../images/tab-right.png) no-repeat right -38px;
}
#block-menu-menu-mein-erstes-menue ul.primary li a:hover,
#block-menu-menu-mein-erstes-menue ul.primary li a:focus {
color: #000;
/*font-weight:lighter;*/
border-width: 0;
background-color: transparent;
background: url(../images/tab-left.png) no-repeat left -76px;
}
#block-menu-menu-mein-erstes-menue ul.primary li a:hover .tab,
#block-menu-menu-mein-erstes-menue ul.primary li a:focus .tab {
color: #fff;
/*font-weight:lighter;*/
background: url(../images/tab-right.png) no-repeat right -76px;
}
#block-menu-menu-mein-erstes-menue ul.primary li.active a,
#block-menu-menu-mein-erstes-menue ul.primary li.active a:hover,
#block-menu-menu-mein-erstes-menue ul.primary li.active a:focus {
border-width: 0;
color: #000;
background-color: transparent;
background: url(../images/tab-left.png) no-repeat left 0;
}
#block-menu-menu-mein-erstes-menue ul.primary li.active a .tab,
#block-menu-menu-mein-erstes-menue ul.primary li.active a:hover .tab,
#block-menu-menu-mein-erstes-menue ul.primary li.active a:focus .tab {
color: #333;
background: url(../images/tab-right.png) no-repeat right 0;
}
#block-menu-menu-mein-erstes-menue ul.secondary {
margin: 0;
padding: 0 0 0 5px; /* LTR */
border-bottom: 1px solid #c0c0c0;
list-style: none;
white-space: nowrap;
background: url(../images/tab-secondary-bg.png) repeat-x left bottom;
}
#block-menu-menu-mein-erstes-menue ul.secondary li {
float: left; /* LTR */
margin: 0 5px 0 0;
padding: 5px 0;
border-right: none; /* LTR */
}
#block-menu-menu-mein-erstes-menue ul.secondary a {
display: block;
height: 24px;
margin: 0;
padding: 0;
border: 1px solid #c0c0c0;
text-decoration: none;
color: #777;
background: url(../images/tab-secondary.png) repeat-x left -56px;
}
#block-menu-menu-mein-erstes-menue ul.secondary a .tab {
display: block;
height: 18px; /* 24px (parent) - 6px (padding) */
margin: 0;
padding: 3px 8px;
line-height: 18px;
}
#block-menu-menu-mein-erstes-menue ul.secondary a:hover,
#block-menu-menu-mein-erstes-menue ul.secondary a:focus {
background: url(../images/tab-secondary.png) repeat-x left bottom;
}
#block-menu-menu-mein-erstes-menue ul.secondary a.active,
#block-menu-menu-mein-erstes-menue ul.secondary a.active:hover,
#block-menu-menu-mein-erstes-menue ul.secondary a.active:focus {
border: 1px solid #c0c0c0;
color: #000;
background: url(../images/tab-secondary.png) repeat-x left top;
}
Funktioniert leider noch nicht. Hast du eine Idee warum?
Hast Du alle Caches gelöscht?
am 08.12.2012 - 12:17 Uhr
Hast Du alle Caches gelöscht? Hast Du mit Firefox und Firebug mal nachgesehen, ob die Klassen, die Du bei Deinem CSS eingesetzt hast auch mit der Wirklichkeit übereinstimmen? Ich sehe überall ul.secondary, aber ist das bei Deinem Menü auch der Fall? Das kann ich nicht sehen. Das ist dann Deine Aufgabe, das CSS an die Gegebenheiten anzupassen.
Beste Grüße
Werner
Hallo Werner,vielen Dank,
am 09.12.2012 - 08:41 Uhr
Hallo Werner,
vielen Dank, mit der Umstellung des stylesheets von quicktabs habe ich es geschafft. In der html-reset.css habe ich für den .title noch ein clear:both eingebaut...somit war der Titel des Nodes nicht mehr neben dem Menü.
Hier der fertige Code:
#block-menu-menu-mein-erstes-menue ul.menu{
margin:0 0 8px 0;
padding:0 0 3px;
font-size:1em;
list-style: none;
height:21px;
background:transparent url(../images/tab-bar.png) repeat-x left bottom;
}
#block-menu-menu-mein-erstes-menue ul li.leaf {
list-style: none;
}
#block-menu-menu-mein-erstes-menue *html ul.menu li{
list-style:inside;
margin-bottom:-5px;
}
#block-menu-menu-mein-erstes-menue ul.menu li{
float: left;
margin:0 1px;
padding: 0 0 0 5px;
background:transparent url(../images/tab-left.png) no-repeat left -38px;
color:#333;
}
/* Tabs */
#block-menu-menu-mein-erstes-menue ul.menu li a{
font: 12px/170% Arial;
font-size-adjust:none;
display: block;
margin: 0;
padding:4px 17px 0px 12px;
border-width: 0;
text-decoration:none;
background: transparent url(../images/tab-right.png) no-repeat right -38px;
color:#333;
}
/* Tab hover */
#block-menu-menu-mein-erstes-menue ul.menu li:hover a{
border-width: 0;
background:transparent url(../images/tab-right.png) no-repeat right -76px;
color:#FFFFFF;
}
#block-menu-menu-mein-erstes-menue ul.menu li:hover {
background:transparent url(../images/tab-left.png) no-repeat left -76px;
}
/*aktiver Tab*/
#block-menu-menu-mein-erstes-menue ul.menu li.active-trail a,
#block-menu-menu-mein-erstes-menue ul.menu li.active-trail a:hover{
text-decoration:none;
border-width: 0;
background:transparent url(../images/tab-right.png) no-repeat right 0;
color:#333;
}
#block-menu-menu-mein-erstes-menue ul.menu li.active-trail {
background:transparent url(../images/tab-left.png) no-repeat left 0;
}
und hier der Code von Firebug zur Hilfestellung für die Anpassung:
<div class="region region-highlighted"><div id="block-menu-menu-mein-erstes-menue" class="block block-menu contextual-links-region first last odd">
<div class="contextual-links-wrapper contextual-links-processed">
<div class="content">
<ul class="menu">
<li class="first leaf active-trail unternehmen">
<a class="active-trail active" title="" href="/node/2939">unternehmen</a>
</li>
<li class="leaf nachrichten">
<a title="" href="//node/2955">Nachrichten</a>
</li>
<li class="last leaf duplikator">
<a title="" href="/node/2865">Duplikator</a>
</li>
</ul>
</div>
</div>
</div>>
Besten Dank noch mal
Thorsten