[Schumuckl]

Hallo,

Ich versuche in meinem Templat ein paar Toplinks einzufügen, aber mit dem gewohnten code scheint das nciht zu klappen, desweiteren möchte ich gerne versuchen um die übersichtilichkeit zu wahren, ein paar Toplinks so zu gestallten das dann ein pulldown menue aufgeht, dazu sollte rechts neben dem Toplink ein pfeil nach unten abgebildet sein.
Im header wird wie es scheint nichts geändert, bei dem theme stehen die toplinks im header_welcomeblock_member

Nachfolgend einmamal das template header_welcomeblock_member:

Code:

<table border="0" cellspacing="$theme[borderwidth]" cellpadding="$theme[tablespace]" class="tborder">
<tr>
<td class="trow1" width="60%"><navigation></td>
<td width="40%" class="trow2" style="font-size:11px">
$lang->welcome_back<br />
$lang->welcome_current_time<br />
<a href="private.php">$lang->welcome_pms</a> $lang->welcome_pms_usage</td>
</tr>
</table>
<div class="menu" align="center">
<ul>
<table align="center">
<tr align="center">
<a href="portal.php">$lang->portal</a> $lang->Portal</td>
<td class="topmenu" width="1%"><a href="$settings[bburl]/usercp.php">$lang->welcome_usercp</a></td>
<td class="topmenu" width="1%">$admincplink</td>
<td class="topmenu" width="1%"><a href="$settings[bburl]/misc.php?action=help">$lang->toplinks_help</a></td>
<td class="topmenu" width="1%"><a href="$settings[bburl]/memberlist.php">$lang->toplinks_memberlist</a></td>
<td class="topmenu" width="1%"><a href="$settings[bburl]/calendar.php">$lang->toplinks_calendar</a></td>
<td class="topmenu" width="1%"><a href="search.php?action=getnew">$lang->welcome_newposts</a></td>
<td class="topmenu" width="1%"><a href="$settings[bburl]/search.php">$lang->toplinks_search</a></td>
<td class="topmenu" width="1%"><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;uid={$mybb->user['uid']}">{$lang->welcome_logout}</a></td>
</tr>
</table>
</ul>
</div>

und auch noch der ganz normal header:

Code:

    <a name="top" id="top"></a>
            <div class="logo" align="left"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a></div>
                <div id="container">
        <div id="header">
            <hr class="hidden" />
        </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
                              {$welcomeblock}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            <br class="clear" />

[Sebijk]

Das Popdown-Menü:

Diese fügst du unten in der Stelle von header_welcomeblock_member ein:

Code:

<script type="text/javascript">
document.write('<!-- start user options menu //-->');
document.write('<div id="ucpmenu_popup" class="ddmenu_menu" style="display: none;">');
document.write('<div class="ddmenu_border">    ');
document.write('<table cellpadding="4" cellspacing="1" border="0" width="100%">');
document.write('<tr>');
document.write('<td class="thead" align="left"><strong>Benutzermen&uuml;</strong></td>');
document.write('</tr><tr>');
document.write('<td class="tcat" align="center">');
document.write('<div class="smalltext">N&uuml;tzliche Links</div></td></tr>');
document.write('<tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext">');
document.write('<a href="$settings[bburl]/search.php?action=getnew">$lang->welcome_newposts</a>');
document.write('</div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext">');
document.write('<a href="$settings[bburl]/search.php?action=getdaily">$lang->welcome_todaysposts</a>');
document.write('</div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext">');
document.write('<a href="$settings[bburl]/misc.php?action=markread">Alle Foren als gelesen makieren</a>');
document.write('</div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext">');
document.write('<a href="$settings[bburl]/usercp.php?action=favorites">Favoriten</a>');
document.write('</div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext">');
document.write('<a href="$settings[bburl]/usercp.php?action=subscriptions">Abbonnierte Themen</a></div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext">');
document.write('<a href="$settings[bburl]/usercp.php?action=forumsubscriptions">Forenabbonnierungen</a>');
document.write('</div></td></tr><tr>');
document.write('<td class="tcat" align="center"><div class="smalltext">UCP Quick Edit</div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext">');
document.write('<a href="member.php?action=profile&amp;uid=$mybbuser[uid]">Profil ansehen</a>');
document.write('</div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext">');
document.write('<a href="javascript:void(0);" onclick="popupWin(\'misc.php?action=buddypopup\', \'buddyList\', 170, 300);">$lang->welcome_open_buddy_list</a>');
document.write('</div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext">');
document.write('<a href="$settings[bburl]/usercp.php?action=editlists">Ignorierliste</a>');
document.write('</div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext">');
document.write('<a href="$settings[bburl]/usercp.php?action=options">Optionen &auml;ndern</a>');
document.write('</div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext">');
document.write('<a href="$settings[bburl]/usercp.php?action=profile">Profil bearbeiten</a>');
document.write('</div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext">');
document.write('<a href="$settings[bburl]/usercp.php?action=avatar">Benutzerbild &auml;ndern</a></div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext">');
document.write('<a href="$settings[bburl]/usercp.php?action=editsig">Signatur editieren</a>');
document.write('</div></td></tr><tr>');
document.write('<td class="tcat" align="center"><div class="smalltext">');
document.write('Sonstiges</div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext"><a href="$settings[bburl]/showteam.php">Forum Team</a>');
document.write('</div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext"><a href="$settings[bburl]/stats.php">Forenstatistiken</a>');
document.write('</div></td></tr><tr>');
document.write('<td class="ddmenu_cell" onmouseover="this.className=\'ddmenu_cell_over\';" onmouseout="this.className=\'ddmenu_cell\';">');
document.write('<div class="smalltext"><a href="$settings[contactlink]">Kontakt</a></div>');
document.write('</td></tr></table></div></div>');
document.write('<!-- end user options menu //-->');
new PopupMenu("ucpmenu");
</script>

Suche weiter

Code:

<td class="topmenu" width="1%"><a href="$settings[bburl]/search.php">$lang->toplinks_search</a></td>

füge darunter:

Code:

<td class="topmenu" width="1%"><a href="#" id="ucpmenu">N&uuml;tzliche Links<img src="pfeil.gif" /></a></td>

müsstest du jetzt nur mal anpassen!

Bei Zusätzliches CSS fügst du:

Code:

/*###########  START USER DDMENU STYLES ###########*/
.ddmenu_menu {
    position: absolute;
    width: 220px;
}

.ddmenu_border
{
    background: #738FBF;
}

.ddmenu_cell
{
    background: #BBC7CE;
    border-top: 1px solid #F5F5F5;
    border-left:1px solid #F5F5F5;
    color: #808080;
    font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    font-weight: bold;
    white-space: nowrap;
    cursor: hand;
}

.ddmenu_cell_over
{
    background: #8A949E;
    border-top: 1px solid #F5F5F5;
    border-left:1px solid #F5F5F5;
    color: #808080;
    font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    font-weight: bold;
    white-space: nowrap;
    cursor: hand;
}

.ddmenu_cell a:link,
.ddmenu_cell a:visited,
.ddmenu_cell a:active,
.ddmenu_cell_over a:link,
.ddmenu_cell_over a:visited,
.ddmenu_cell_over a:active,
{
    color: #808080;
    text-decoration: none;
}

.ddmenu_cell a:hover,
.ddmenu_cell_over a:hover,
{
    color: #3587B3;
    text-decoration: none;
}
/*###########  END USER DDMENU STYLES ###########*/

ein. Das findest du unter Themes > Ändern / Entfernen > <derStyle> > Theme-Stil ändern.

[Schumuckl]

Guten morgen Sebijk,

ich habe das exakt nach deiner Anleitung, die sehr gut und verständlich geschrieben ist, eingebaut.
Der zusätzliche Link mit dem Pfeil rechts daneben ist vorhanden, jedoch mußte ich leider feststellen, das der Link nicht die gewünschte Reaktion hervorruft. Woran kann das liegen?

Danke für eure/deine Hilfe Schumuckl

[Jan]

Warum denn mit Javascript?
http://www.xs4all.nl/~peterned/csshover.html
http://www.alistapart.com/articles/dropdowns
http://www.alistapart.com/articles/hybrid

[Sebijk]

Warum denn mit Javascript?

Ganz einfach, weil MyBB diese JS-Menüfunktion bereits enthält

@ Schumuckl

Bei mir hat es funktionert, warum es bei dir nicht geht, das weiß ich auch nicht so ganz, werde aber die Fehlerquelle durchsuchen.

[Jan]

Und wenn der User Java Script deaktiviert hat hat er Pech?
Naja, wenn ihr wollt ok. Wollte nur einen produktiven Gegenvorschlag machen.

[Sebijk]

wenn der User JavaScript deaktiviert hat, so linkt er einfach auf einem Link.

Aber jedem das seine

[Grauer-Magier]

Hi, alle zusammen!

... vielleicht kann man das von mir hier etwas abwandeln, und dafür benutzen?:
http://www.mybbcoder.de/showthread.php?tid=126

LG, GM!

[Schumuckl]

Eins muß ich festellen weiterbringen tut mich nicht, da ich ja ein armer ahungsloser bin [Bild: http://palar.de/shoutbox/images/smilies/...lleyes.gif]

[Grauer-Magier]

@ Schumuckl:

Also ich kann dir ein Dropdownmenü mit Hover-Funktion machen.
Da du aber gerne das mit klick haben möchtest würde ich da zu JavaScript-Funktionen raten. ... leider bin ich mit JavaScript noch nicht so fit, um das einzubetten bzw. zu kombinieren. Vielleicht kann Sebijk helfen?

Hier jedenfalls mal die Anleitung für die Nav-Menüleiste a lá CSS:

In dein Standardtheme fügst du bei "Zusätzliches CSS" folgendes ein:

Code:

whatever {
    display: none;
    }
whatever:hover {
    display: inline;
    position: absolute;
    z-index: 10;
    }
ul#Navigation  {margin-left:1em; padding:0; list-style:none;}
ul#Navigation 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#Navigation li:hover {background: #fff;}
ul#Navigation2 {display: none; margin:0; padding:0; list-style: none;}
ul#Navigation2 li {margin:0; padding:0; list-style: none; border:0;}
ul#Navigation2 li:hover {margin:0; padding:0; list-style: none; border:0; background:#B0C4DE; display: block;}
#Navigation li:hover ul#Navigation2 {display: block; position: absolute;}
ul#Navigation a:link, ul#Navigation a:visited {color:#000; text-decoration:none; display: block; width:100%;}
ul#Navigation a:hover, ul#Navigation a:active, ul#Navigation 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;}
  body, p a {
    behavior: url("csshover2.htc"); /* call hover behaviour file */
    font-size: 100%; /* enable IE to resize em fonts */
  }
  #menu ul li {
    float: left; /* cure IE5.x "whitespace in lists" problem */
    width: 100%;
  }
  #menu ul li a {
    height: 1%; /* make links honour display: block; properly */
  }
  #menu a, #menu h2 {
    font: 12px Trebuchet MS; /* if required use em's for IE as it won't resize pixels */
  }
  div#Rahmen {
    padding: 0;
    border: 0;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }
  ul#Navigation li {
    list-style: none;
    float: left;
    width: 16.6em;
    position: relative;
    margin: 0; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE */
    margin-bottom: -0.4em;
  }
  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    left: -0.4em;
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    left: -0.4em;
  }
  ul#Navigation li ul li {
    float: left;
    display: block;
  }
  ul#Navigation a, ul#Navigation span {
    display: block;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    background-color: #fff;
  }
  * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */
    width: 100%;
    width: 16.4em;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
  }
  /* Erweiterung zur dynamischen Ein-/Ausblendung */
  ul#Navigation li>ul {
    display: none;
  }
  ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
    display: block;
  }

Damit hast du die Definierung per CSS für ein Dropdownmenü.
So, nun zur Umgestaltung deines header_welcomeblock_member-Template:

(da ich nicht weiß, wie genau du es haben möchtest poste ich hier mal die Grobanleitung)

Um eine neues Leistenmenüfragment zu beginnen brauchst du das:

Code:

<div id="Rahmen"><ul id="Navigation">
<li><a><b>HIER DEN NAMEN EINSETZEN</b></a><ul id="Navigation2">

Ein Menü-Element könnte so aussehen:

Code:

<li><a href="$settings[bburl]/search.php?action=getnew" target="_blank"><img src="$theme[imgdir]/toplinks/atb_thread.gif" border="0" /> $lang->welcome_newposts</a></li>

Und um eine Spalte abzuschließen, brauchst du dies:

Code:

</ul></ul></div>

Wenn du mehrere Spalten einstellen willst läßt du den "div"-Befehl erstmal weg, und setzt ihn erst ans Ende, wenn die Menüleiste ganz beendet werden soll.

Das würde dann so aussehen:

Code:

<div id="Rahmen"><ul id="Navigation">
<li><a><b>HIER DEN NAMEN EINSETZEN</b></a><ul id="Navigation2">
<li><a href="$settings[bburl]/search.php?action=getnew" target="_blank"><img src="$theme[imgdir]/toplinks/atb_thread.gif" border="0" /> $lang->welcome_newposts</a></li>
</ul></ul>
<ul id="Navigation">
<li><a><b>HIER DEN NAMEN EINSETZEN</b></a><ul id="Navigation2">
<li><a href="$settings[bburl]/search.php?action=getnew" target="_blank"><img src="$theme[imgdir]/toplinks/atb_thread.gif" border="0" /> $lang->welcome_newposts</a></li>
</ul></ul></div>

Falls es sich jemand mal anschauen will, wie ich das bei mir umgesetzt habe (ich habs in den header eingesetzt, wegen farblicher Abstimmung):

Mein Forum

Liebe Grüße, GM!