[gelöst] HTML - Menü selbst verändern
Eingetragen von mikeschneik (55)am 07.04.2010 - 21:03 Uhr in
Im Handbuch 8858 bin ich auf den Punkt listamatic gestoßen, wie ich mein Menü selbst anpassen kann.
Hierbei hat mir z.B. dieses Menü gut gefallen.
Dort steht der Code zum Einbau:
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>Aber in welcher Datei/Abschnitt soll ich bitte den HTML Code einbauen? Ist damit meine menu.inc gemeint?
Einfach copy & paste (m it richtigen Linkpfaden und Bezeichnungen) brachte leider keinen Erfolg.
Danke
- Anmelden oder Registrieren um Kommentare zu schreiben
Listamatic Menu
am 07.04.2010 - 21:48 Uhr
Hallo Mike,
wenn du dir den Quelltext deiner Homepage ansiehst, solltest du das Menu so ähnlich vorfinden: (Auszug aus dem DC-Primary-Menu:)
<div id="primary"><ul class="links">
<li class="menu-111 first"><a title="Zur Startseite" href="/">» Home</a></li>
<li class="menu-113"><a title="Das deutschspachige Drupal Benutzerhandbuch und die FAQ" href="/handbuch">» Handbuch & FAQ</a></li>
<li class="menu-198"><a title="Showroom Drupal Webseiten" href="/showroom/latest">» Showroom</a></li>
</ul>
</div>
Wie du siehst ist der Quelltext fast identisch mit Listamatic.
d.h. du musst den HTML-Code nirgends einbauen, denn er ist ja schon da ! (unter Strukturierung/Menus hast du ein Menu erstellt oder ?)
du musst jetzt die Listamatic-CSS ein bißchen umschreiben, denn du hast ja keine "#navlist" sondern eine "#primary"
nun kannst das CSS Listing in deine Style.css anfügen.
Sollte funzen. Zum Testen und Fehlersuchen empfehle ich Dir FireFox + FireBug
Klingt schlüssig, aber...
am 08.04.2010 - 20:45 Uhr
Hi Sepp,
das liest sich bei dir schlüssig, aber es funzt dennoch nicht. Ich habe weder einen
<div idTag, noch einen<ul id=Tag in meiner Seite. :-(<table border="0" cellpadding="0" cellspacing="0" id="content">
<tr>
<td id="sidebar-left" class="sidebar">
<table id="block-menu-menu-navi-links" class="clear-block block block-menu">
<tr>
<td class="block-tl"></td>
<td class="block-tc">
<h2>Hauptmenü</h2>
</td>
<td class="block-tr"></td>
</tr>
<tr>
<td class="block-bl"></td>
<td class="block-bc">
<div class="content"><ul class="menu"><li class="leaf first"><a href="/ueber-uns" title="Über uns">Über uns</a></li>
Hab ja schon mit Komibnationen von ="block-menu-menu-navi-links und sidebar-left experimentiert, aber alles vergebens.
Kannst du mir bitte noch mal auf die Sprünge helfen?
Danke
Gruß Mike
Aber sicher ..
am 09.04.2010 - 19:11 Uhr
Hallo Mike,
dieser Code sollte Dir bekannt vorkommen:
<tbody><tr><td class="block-tl"></td>
<td class="block-tc">
<h2>Hauptmenü</h2>
</td>
<td class="block-tr"></td>
</tr>
<tr>
<td class="block-bl"></td>
<td class="block-bc">
<div class="content">
<ul class="menu">
<li class="leaf first"><a title="Über Akku-repair.de" href="/ueber-uns">über Akku-Repair</a></li>
<li class="expanded last"><a title="Unsere Vorteile auf einen Blick" href="/node/7">Vorteile</a>
<ul class="menu">
<li class="leaf first"><a title="Ersparnis gegenüber Neukauf" href="/node/6">Kostenersparnis</a></li>
<li class="leaf"><a title="" href="/node/7">Gewährleistung</a></li>
<li class="leaf last"><a title="Schont nicht nur Ihr Portemonnaie, sondern auch die Umwelt" href="/node/9">Umweltfreundlichkeit</a></li>
</ul>
</li>
</ul></div>
</td>
<td class="block-br"></td>
</tr>
</tbody>
die Listamatic-Austauscher dafür:
statt #navlist nimmst du ul.menu ist ja eine Klasse keine IDstatt #active nimmst du .active-trail
Sollte klappen
Sepp
Geht leider noch nicht
am 09.04.2010 - 20:37 Uhr
Ich habe bei meiner Seite unter /themes/pixture in der style.css
folgenden Code eingetragen (ab exakt Zeile 100)
ul.menu
{
border-bottom: 1px solid #FFCC66;
border-top: 1px solid #FFCC66;
margin: 0px;
margin-bottom: 30px;
padding: 0px;
padding-left: 180px;
background-color: #FF9900;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
padding-bottom: 3px;
padding-top: 3px;
}
ul.menu a, ul.menu a:link, ul.menu a:visited
{
border: 1px solid #FF9900;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #000000;
font-weight: bold;
text-decoration: none;
}
ul.menu a:hover, ul.menu a:active, ul.menu a:focus
{
border: 1px solid #000000;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
text-decoration: none;
}
ul.menu li
{
padding-right: 1px;
display: inline;
font-size: 0.6em;
}
ul.menu ul
{
margin: 0px;
padding: 0px;
}
ul.menu .active-trail a { background-color: #FFCC66; }
Ich schau schon in andere Foren, aber bislang....
Dennoch vielen Dank für die Hilfe :-D
Der Code kommt nicht an ...
am 09.04.2010 - 20:40 Uhr
leere mal bitte den Cache
Sepp
Sooorrryy!!!!
am 10.04.2010 - 16:38 Uhr
Bitte entschuldige,
ich bin noch nicht so konform mit Firebug.
Jetzt hab ich selber gerade erkannt, dass ich die
style.css unter /sites/default/files/color/ und dann im
temporären Verzeichniss meines Themes speichern muss.
(bei mir pixture-2eecb0be)
Sorry, ich bin echt ein Depp, da mir das nicht eingefallen ist.
Jetzt kann ich weiter ausprobieren, aber dir lieber Sepp vielen vielen Dank !!!! :-)
Viele Grüße aus Bielefeld
Jeder hat mal angefangen ...
am 09.04.2010 - 20:45 Uhr
du musst jetzt noch
ul.menu li {display:inline;}auf
ul.menu li {display:block;}ändern, damit das untereinander angezeigt wird.
Stimmt
am 09.04.2010 - 21:01 Uhr
So langsam werde ich nicht nur zum Drupalfan, sondern weiss auch Firebug zu schätzen,
da man wirklich viel damit ausprobieren kann.
Werd mich heute abend noch etwas versuchen, und wie gesagt 1000 DANK
Hallo;D Gilt das ganz auch
am 06.09.2011 - 08:05 Uhr
Hallo;D
Gilt das ganz auch noch für die 7.8 ? Soweit ich weiss, hat sich da einigesd doch geändert oder ?