Hallo, Gast! (Registrieren)

Letzte Ankündigung: MyBB 1.8.8 veröffentlicht (17.10.16)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Dropdownmenu im Showthread Template
#1
Hallöchen ihr Lieben!

Ich hab mich etwas inspirieren lassen, und bin drauf und dran das Template showthread zu verändern.

Soweit bin ich schon gediehen:
Code:
...
{$multipage}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both;">
<tr>
<td class="thead" colspan="2">
    <div style="float: right;"><table>
<tr>
<td>        <b>Thema-Optionen</b>: <br /><span class="smalltext">                            <a href="printthread.php?tid={$tid}">{$lang->view_printable}</a><br />
                            <a href="sendthread.php?tid={$tid}">{$lang->send_thread}</a><br />
                            <a href="usercp2.php?action=addsubscription&amp;tid={$tid}">{$lang->subscribe_thread}</a> <br /><a href="usercp2.php?action=addfavorite&amp;tid={$tid}">{$lang->add_favorites}</a></span></td>

<td VALIGN=TOP>        <b>Ansicht</b>: <br /><span class="smalltext"><strong><a href="showthread.php?mode=threaded&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->threaded}</a> <br /><a href="showthread.php?mode=linear&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->linear}</a></strong></span></td>
</tr>
</table>
    </div>
    <div>
        <strong>{$rating} <font size=5>{$thread['subject']}</font></strong>
    </div>
</td>
</tr>
<tr>
<td class="tcat" width="15%"><span class="smalltext"><strong>{$lang->author}</strong></span></td>
<td class="tcat" width="85%"><span class="smalltext"><strong>{$lang->message}</strong></span></td>
</tr>
{$posts}
{$threadpages}
...

Sieht schonmal ganz gut soweit aus.
Und jetzt zu dem Punkt wo ich ein wenig feststecke.
Ich wollte diese beiden Menüpunkte "Ansicht" und "Thema-Optionen" in jeweils ein eigenes Dropdownmenü kleiden, so wie das bei "Moderationsoptionen". Das würde dann, so wie ich mir das vorstelle eine optimale Übersichtlichkeit und Funktionalität gewähren (ohne jedesmal die ganzen Posts nach unten scrollen zu müssen).
Allerdings habe ich keine Ahnung, wie ich da anfangen kann. Ich steh etwas aufm Schlauch.
Und dadurch das die Moderationsoptionen ja nicht für jeden User sind, wird das mit dem abgucken etwas kompliziert.

Kann mir jemand helfen/Tipp geben?

Liebe Grüße, GM!
Wer eine Wahrheit verbergen will, braucht sie nur offen auszusprechen - sie wird einem ja doch nicht geglaubt.
(Charles Talleyrand)
Zitieren
#2
Also ein Dropdownmenü kannst du grundsätzlich immer über zwei Wege machen: JavaScript und CSS. CSS ist einfacher bietet aber nicht so viele Möglichkeiten. Um rauszukriegen, wie sowas geht, kannst du mal googlen:

http://www.google.de/search?hl=de&q=css+...Suche&meta=

Wenn du jetzt die Moderationsoptionen nur für Moderatoren anzeigen lassen möchtest, musst du in einer Datei (showthread.php) eine Variable erstellen, abfragen, ob der Benutzer ein Mod ist und nur dann anzeigen lassen. Versuch aber erstmal ein allgemeines Dropdownmenü, dann können wir uns dem Rest zuwenden.
Vantage-Forum: http://vantage-forum.de/
Zitieren
#3
Hi, Mak!

Also das Dropdownmenü hab ich soweit hinbekommen. Aber es noch nicht ganz optimal. Wenn ich mit der Maus darüberfahre klappt es zwr auf. aber es drückt die gesamte Überschriftsspalte nach unten, und das sieht nicht wirklich schon aus.

Code:
...
<style type="text/css">/* Fürs Beispiel */
@media screen, projection, print {
ul.examp  {margin-left:1em; padding:0; list-style:none;}
ul.examp li {float:left; margin:0; padding:0; list-style:none; border:1px solid #000; background:#fff; width:180px; padding-left:10px; color:#000; font-family:Arial; font-size:16px;}
ul.examp li:hover {background:#B0C4DE;}
ul.examp2 {display:none; margin:0; padding:0; list-style:none;}
ul.examp2 li {margin:0; padding:0; list-style:none; border:0;}
ul.examp2 li:hover {margin:0; padding:0; list-style:none; border:0; background:#B0C4DE}
.examp li:hover ul.examp2 {display:block;}

ul.examp a:link, ul.examp a:visited {color:#000; text-decoration:none; display:block; width:100%;}
ul.examp a:hover, ul.examp a:active, ul.examp a:focus {color:#000; text-decoration:none; display:block;}

/* Für die Liste */
div.dm {height:9em;}
div.dm ul {display:none; margin-bottom:0;}
div.dm:hover ul {display:block;}
}</style>
</head>
<body>
{$header}
{$pollbox}
<div style="float: right; padding-bottom: 4px;">
    {$newreply}{$newthread}
</div>
{$multipage}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both;">
<tr>
<td class="thead" colspan="2">
    <div style="float: right;">
<ul class="examp">
<li><a><b>Thema-Optionen</b></a><ul class="examp2">
    <li><a href="printthread.php?tid={$tid}">{$lang->view_printable}</a></li>
    <li><a href="sendthread.php?tid={$tid}">{$lang->send_thread}</a></li>
    <li><a href="usercp2.php?action=addsubscription&amp;tid={$tid}">{$lang->subscribe_thread}</a></li>
    <li><a href="usercp2.php?action=addfavorite&amp;tid={$tid}">{$lang->add_favorites}</a></li></ul></li>

<li><a><b>Ansicht</b></a><ul class="examp2">
    <li><a href="showthread.php?mode=threaded&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->threaded}</a></li>
    <li><a href="showthread.php?mode=linear&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->linear}</a></li></ul></li>
</ul>
    </div>
    <div>
        <strong>{$rating} <font size=3>{$thread['subject']}</font></strong>
    </div>
</td>
</tr>
<tr>
<td class="tcat" width="15%"><span class="smalltext"><strong>{$lang->author}</strong></span></td>
<td class="tcat" width="85%"><span class="smalltext"><strong>{$lang->message}</strong></span></td>
</tr>
{$posts}
{$threadpages}
<tr>
<td colspan="2" class="tfoot">
<div><strong>&laquo; <a href="showthread.php?tid={$tid}&amp;action=nextoldest">{$lang->next_oldest}</a> | <a href="showthread.php?tid={$tid}&amp;action=nextnewest">{$lang->next_newest}</a> &raquo;</strong></div>
</td>
</tr>
</table>...

Und das hab ich in das Standardtheme eingefügt:
Code:
whatever {
    display: none
    }

whatever:hover {
    display: block
    }

Hast du eine Idee wie ich den Code verändern muss, damit es zwar aufklappt, aber die Tabelle nicht verschiebt?
Wer eine Wahrheit verbergen will, braucht sie nur offen auszusprechen - sie wird einem ja doch nicht geglaubt.
(Charles Talleyrand)
Zitieren
#4
Dazu muss ich mir mal angucken, wie es bisher aussieht. Poste mal einen Link oder einen vorher/nacher Screenshot.
Vantage-Forum: http://vantage-forum.de/
Zitieren
#5
Okay hier die Shots:

Vorher (also nicht aufgeklappt:
   


Nachher (also aufgeklappt):
   
Wer eine Wahrheit verbergen will, braucht sie nur offen auszusprechen - sie wird einem ja doch nicht geglaubt.
(Charles Talleyrand)
Zitieren
#6
Ich kenne den genauen Code nicht, daher versuche es mal bitte mit diesen Alternativen:
Code:
whatever {
display: none;
}

whatever:hover {
display: inline;
}
Code:
whatever {
display: none;
}

whatever:hover {
display: block;
z-index: 10;
}
Code:
whatever {
display: none
}

whatever:hover {
display: inline;
z-index: 10;
}

Gruß,
Michael
[Bild: banner.png]
Support erfolgt NUR im Forum!
Bitte gelöste Themen als "erledigt" markieren.
Beiträge mit mangelhafter Rechtschreibung/Grammatik werden kommentarlos gelöscht.
Zitieren
#7
Hi, Michael!

Hab alle drei Varianten ausprobiert, hat leider nichts geändert.
Den Code hab ich oben gepostet. Zwischen den beiden "style"-Befehlen.
Wer eine Wahrheit verbergen will, braucht sie nur offen auszusprechen - sie wird einem ja doch nicht geglaubt.
(Charles Talleyrand)
Zitieren
#8
Füge mal noch ein position: fixed; oder position: absolute; hinzu.

Gruß,
Michael
[Bild: banner.png]
Support erfolgt NUR im Forum!
Bitte gelöste Themen als "erledigt" markieren.
Beiträge mit mangelhafter Rechtschreibung/Grammatik werden kommentarlos gelöscht.
Zitieren
#9
Wenn ich das richtig verstehe, geht das nicht anders. Bei einem CSS Menü ist es nicht möglich, das, was runterklappt, über den Rest drüberzu machen. Dazu muss das Menü außerhalb der Tabelle stehen, was aber im MyBB nicht wirklich geht. Wirst es entweder mit Java machen oder irgendwo anders hin verschieben müssen.
Vantage-Forum: http://vantage-forum.de/
Zitieren
#10
@ Michael:

Ich hab den Code mal so angepasst:
Code:
<style type="text/css">
@media screen, projection, print {
ul.examp  {margin-left:1em; padding:0; list-style:none;}
ul.examp li {float:left; margin:0; padding:0; list-style:none; border:1px solid #000; background:#fff; width:200px; padding-left:10px; color:#000; font-family: Arial; font-size:12px;}
ul.examp li:hover {background: #B0C4DE; display: block;}
ul.examp2 {display: none; margin:0; padding:0; list-style: none;}
ul.examp2 li {margin:0; padding:0; list-style: none; border:0;}
ul.examp2 li:hover {margin:0; padding:0; list-style: none; border:0; background:#B0C4DE;}
.examp li:hover ul.examp2 {display: block; position: absolute;}
ul.examp a:link, ul.examp a:visited {color:#000; text-decoration:none; display: block; width:100%;}
ul.examp a:hover, ul.examp a:active, ul.examp a:focus {color:#000; text-decoration:none; display: block;}
div.dm {height:9em;}
div.dm ul {display:none; margin-bottom:0;}
div.dm:hover ul {display: block; postition: absolute;}
}</style>

Ich hab es fast geschafft! - Der einzige Wehrmutstropfen ist, dass das 1. Menü nicht direkt untereinander aufgelistet wird. Mom, ich poste einen Screenshot.
   

@ Mak:

Wink Ich glaub ich habs fast hinbekommen!
Wer eine Wahrheit verbergen will, braucht sie nur offen auszusprechen - sie wird einem ja doch nicht geglaubt.
(Charles Talleyrand)
Zitieren


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Showthread bearbeiten KaSo 3 183 26.04.2015, 12:05
Letzter Beitrag: AnyChat
  Showthread zerschossen RedBull 2 279 30.11.2013, 15:54
Letzter Beitrag: RedBull
  Wie Elemente von "newreply" in "showthread" verfügbar machen? fernhafen 2 437 04.07.2013, 21:37
Letzter Beitrag: fernhafen
  Trennlinie / Showthread Corleone 2 521 25.02.2013, 13:37
Letzter Beitrag: Corleone
  Dropdownmenü wird verdeckt Meister Lampe 4 1.856 14.01.2013, 19:16
Letzter Beitrag: MrBrechreiz