[PunBB][PunBB]Menü / Slide Menü

Hi

Wir wollten mit unserem Forum Umziehen und da wir das Design gerne weiterhin eins zu eins nutzen wollen wollte ich Fragen ob man bei punbb das Index Menü und das Slide Menü welches noch zusetztlich über eine js (tabbedContent) läuft... in ein bunpp Forum einbauen kann?

ales Forum ACHTUNG SERVER AUSFÄLLE -.- Deswegen kann es sein das man die Seite ne paar mal nachladen muss

Die Codes füge ich gleich mal bei vllt. liegt es ja auch daran?

Navi- Menü:

Code:

#topheader {margin: 0 auto;text-align: left; font-family: 'arial';text-transform:uppercase; font-weight: heavy; color: #e0c8ac; padding: 0px 0 0px; }

div#topheader a, div#tophead a:link, div#tophead a:visited{postion:relative;font-family: 'arial'; font-size:10px; font-weight: heavy; text-decoration: none; text-transform:uppercase; color:#e0c8ac;}

ul.linkheader{ font-size:9px;text-transform:uppercase;margin:0;padding:12px 0;letter-spacing:2px; font-family: 'arial'; text-align:center; -webkit-border-radius-top-left:100px;-webkit-border-radius-top-right:100px; }

ul.linkheader li {margin: 0 0 0 -20px; list-style-type: none; padding:11px 25px;display:inline; -moz-border-radius: 0px 0px 0px 0px; border-radius: 30px 30px 0px 0px; -webkit-border-radius: 30px 30px 0px 0px; opacity:.7;}

ul.linkheader li:hover{opacity:1; font-size:9px; color: #ffffff; text-decoration: none; font-weight: normal; font-family: 'arial'; }

div#topheader li {background-color:#55221b; }div#header li:hover{background-color:#55221b; }
div#topheader li + li{background-color: #55221b; }div#header li +  li:hover{background-color: #55221b; }
div#topheader li + li + li{background-color:#55221b; }div#header li + li + li:hover{background-color:#55221b; }
div#topheader li + li + li + li{background-color: #55221b; }div#header li +  li + li + li:hover{background-color: #55221b; }
div#topheader li + li + li + li + li{background-color:#55221b; }div#header li + li + li + li + li:hover{background-color:#55221b; }
div#topheader li + li + li + li + li + li + li{background-color: #55221b; }div#header li +  li + li + li + li + li + li:hover{background-color: #55221b; }

<-- Css Eintrag

Code:

    <tr>
    <td align="center" class="topnavi" valign="bottom" nowrap><div id="topheader">
  <ul class="linkheader">
<li><a href="index.php">Home</a></li>
<li><a href="http://rpg-serienportal.taess.net/board.php?boardid=35&sid=">Wanted</a></li>
<li><a href="#">Sisters</a></li>
<align right>$usercp_or_register
<li><a href="team.php">Staff</a></li>
<li><a href="memberslist.php">Members</a></li>
$header_acp</align></ul></div></td></tr>

<-- die Verlinkungen mussten wir so Eintragen da es sonst nicht Angezeigt wurde

Slide Menü:

Code:

     <tr>
      <td width="66%" valign="top" colspan=2>
<div class='tabbed_content'>
    <div class='tabs'>
        <div class='moving_bg'>
            &nbsp;
        </div>
        <span class='tab_item'>
            <h4><b>PLOTLINE</b></h4>
        </span>
        <span class='tab_item'>
            <h4><b>WANTED</b></h4>
        </span>
        <span class='tab_item'>
          <h4><b>INPLAY</b></h4>
        </span>
        <span class='tab_item'>
            <h4><b>QUICKLINKS</b></h4>
        </span>
    </div>
 
    <div class='slide_content'>
        <div class='tabslider'>
        <ul><center><B>FOOL ME ONCE! ( Betrüge mich einmal!)</B></center>
<hr style="width: 300px; color: #1e1b16;" noshade>
<font face="" size="" class="smallfont"><div style="text-align: justify;">Katherine und Damon waren jetzt schon so viele Jahrhunderte ein Paar, dass niemand von den beiden auch nur daran denken mochte, den anderen zu schaden oder so gar zu verletzen. Selbst Stefan und Lexi verband etwas ganz besonderes. Sie waren zwar nur Freunde doch sie waren die besten die man sich nur vorstellen konnte. Die Vier waren an sich schon ziemlich komisch, denn Stefan und Lexi hatten etwas gutmütiges an sich wobei Katherine und Damon <a href="http://rpg-serienportal.taess.net/board.php?boardid=16&sid=">-weiterlesen-</a></div></font>
</ul>

        <ul><center><B>THE MOST WANTED!</B></center>
<hr style="width: 300px; color: #1e1b16;" noshade>
<font face="" size="" class="smallfont"><b>LADIES:</b><marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Lucy, Mindy, Paige, Gloria, Nandi, Esther, Greta Martin, Bonnie Bennett, Sheila Bennett, Kimberley, Dana, Tiki, Jill, Sarah, Alice, Sofie, Callie, Samara, Keisha, Cherie, April Young, Mrs. Clarke, Mrs. Flowers, Jenna Sommers, Elena Gilbert, Jessica Cohen, Vicki Donovan, Brooke Fenton, Meredith Fell, Aimee Bradley, Amber Bradley, Kelly Donovan, Vanessa Monroe, Carol Lockwood, Grayson Gilbert, Trudie Peterson, Elizabeth Forbes, Abby Bennett Wilson, Miranda Sommers-Gilbert, Rebekah Mikaelson, Tatia, Anna, Rose, Sage, Pearl, Charlotte, Mary Porter, Lexi Branson, Isobel Flamming, Katherine Pierce, Katherine´s Tochter(12 J.-Vampir), Jules, Hayley</marquee>
<br><br>
<b>GENTLEMEN:</b><marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Maddox, Ray Sutton, Luka Martin, Jonas Martin, Chris, Dean, Tony, Daniel Warren, Niklaus Mikaelson, Lee, Chad, Duke, Eddie, Frank, Derek, Jamie, Carter, Andie Star, Coach Lyam, Tobias Fell, Bill Forbes, Deputy Adams, Pastor Young, John Gilbert, Matt Donovan, Rudy Hopkins, Brian Walters, Connor Jordan, Darren Malloy, Atticus Shane, Jeremy Gilbert, William Tanner, Zach Salvatore, Ben McKittrick, Tikis Großvater, Kol Mikaelson, Finn Mikaelson, Elija Mikaelson, Mikael Mikaelson, Lee, Noah, Henry, Billy, Slater, Trevor, Harper, Frederick, Logan Fell, Cody Webber, Stefan Salvatore, Brady, Stevie, Daniel Warren, Niklaus Vater, Mason Lockwood, Tyler Lockwood, Richard Lockwood
</marquee></font></ul>

        <ul><center><B>THE INGAME!</B></center>
<hr style="width: 300px; color: #1e1b16;" noshade>
<font face="" size="" class="smallfont">Wir schreiben Samstag, den <font face="" size="" class="minifont">04.08.2012. </font></font><br><br>
<font face="" size="" class="smallfont">Es ist sonnig bis heiter um die 26°C. Der Morgen startet vielversprechend mit viel Sonne bis hin in die Abendstunden. In der Nacht ziehen vereinzelt Wolken auf die aus nordöstlicher Richtung einen kühlen Wind mit sich bringen.</font><br><br>
<font face="" size="" class="smallfont">1. Inplaytag:<font face="" size="" class="minifont"> <b><u>Morgens</u></b>, Mittags, Abends, Nachts</font></font>
</ul>


        <ul><center><B>QUICKLINKS!</B></center>
<hr style="width: 300px; color: #3b525a;" noshade>
<font face="" size="" class="smallfont"><center><a href="http://rpg-serienportal.taess.net/board.php?boardid=18&sid=">Rules</a> - <a href="http://rpg-serienportal.taess.net/thread.php?threadid=597&sid=">Storyline</a>- <a href="http://rpg-serienportal.taess.net/board.php?boardid=17&sid=">Most Wanted</a> - <a href="http://rpg-serienportal.taess.net/board.php?boardid=16&sid=">Plot</a><br><a href="http://rpg-serienportal.taess.net/thread.php?goto=lastpost&threadid=555&sid=">Relationship Vorlage</a> - <a href="http://rpg-serienportal.taess.net/thread.php?threadid=556&sid=">Steckbrief Vorlage</a> - <a href="http://rpg-serienportal.taess.net/board.php?boardid=235&sid=">Wanna Be? </a><br><a href="http://rpg-serienportal.taess.net/board.php?boardid=13&sid=">Link-US</a> - <a href="http://rpg-serienportal.taess.net/board.php?boardid=275&sid=">Top Sites</a></center></font>
</ul>
        </div>
    </div>
</div></td>
      <td bgcolor="{tableinbordercolor}" id="tableb"><font face="" size="" class="smallfont"><center><br><img src="http://i41.servimg.com/u/f41/16/21/79/40/team17.jpg" border="0"></center><br><div style="text-align: justify;"><a href="http://rpg-serienportal.taess.net/pms.php?action=newpm&userid=2&sid="><b>Damon Salvatore</b></a> und <a href="http://rpg-serienportal.taess.net/pms.php?action=newpm&userid=42&sid="><b>Caroline Forbes</b></a> stehen für eure Fragen immer zur verfügung, egal was es auch ist oder worum es auch geht - scheut euch nicht, uns anzuschreiben!</div></td>
   </tr>

<-- das wurde in die Header.tpl gepackt

Code:

.tabbed_content {
   background-color: #2b2720;
   width: 580px;   
}

.tabs {
   height: 25px;
   position: relative;
}

.tabs .moving_bg {
   padding: 15px;
        background-color: #55221b;
   position: absolute;
   width: 85px;
   z-index: 190;
   left: 0;
   padding-bottom: 20px;
   background-position: bottom left;
   background-repeat: no-repeat;
        border-radius: 80px 80px 80px 80px; opacity:.7;
}

.tabs .tab_item {
   display: block;
   float: left;
   padding: 15px;
   width: 85px;
   color: #e9ece1;
   text-align: center;
   z-index: 190;
   position: relative;
   cursor: pointer;
}

.tabbed_content .slide_content {
   overflow: hidden;
   background-color: #2b2720;
   padding: 20px 0 20px 20px;
   position: relative;
   width: 560px;
}

.tabslider {
   width: 5000px;
}

.tabslider ul {
   float: left;
   width: 520px;
   margin: 0px;
   padding: 0px;
   margin-right: 40px;
}

.tabslider ul a {
   color: #e9ece1;
   text-decoration: none;
}

.tabslider ul a:hover {
   color: #e9ece1;
}

.tabslider ul li {
   padding-bottom: 7px;
}

<-- das ist der Css Code

Code:

//tab effects

var TabbedContent = {
   init: function() {   
      $(".tab_item").mouseover(function() {
      
         var background = $(this).parent().find(".moving_bg");
         
         $(background).stop().animate({
            left: $(this).position()['left']
         }, {
            duration: 300
         });
         
         TabbedContent.slideContent($(this));
         
      });
   },
   
   slideContent: function(obj) {
      
      var margin = $(obj).parent().parent().find(".slide_content").width();
      margin = margin * ($(obj).prevAll().size() - 1);
      margin = margin * -1;
      
      $(obj).parent().parent().find(".tabslider").stop().animate({
         marginLeft: margin + "px"
      }, {
         duration: 300
      });
   }
}

$(document).ready(function() {
   TabbedContent.init();
});

<-- und das ist die js. Datei

Also wenn es irgendiw machbar wäre weil muss ja alles ne bisschen anders gepackt werden -.- wäre ich wirlich zu tiefst Dankbar wenn das einer mit mir in Angriff nehmen könnte?! Lg und schönen 4ten Advent

Hallo,

natürlich kannst du das auch in deinem Forumieren-Forum so umsetzen.

1) Slide-Menü:
Den HTML-Code setzt du z.B. in die Startseitennachricht ein, den CSS-Code in dein CSS-Stylesheet und das Script in die Javascript-Verwaltung.

2) Navi-Menü:
Soweit ich das sehe, soll dieses als Ersatz für die Standard-Navigation dienen. Das bedeutet, dass du einerseits alle Navilinks auch darin aufnehmen musst, die in einem Forumieren-Forum für die Mitglieder wichtig sind. Andererseits musst du aber auch bedenken, dass du bestimmte Funktionen in einer eigenen Navigation nicht reproduzieren kannst (Änderung des Navilinks bei neuen PNs - deshalb muss man sich dabei auf die Popup-Benachrichtigung verlassen). Dazu kommt noch, dass du bestimmte Navilinks nur Gästen bzw. nur eingeloggten Besuchern anzeigen möchtest.
In folgendem Thread habe ich einer Userin mal erklärt, wie man u.a. die vorhandene durch eine eigene Navigation ersetzen kann. Unter Punkt 3 findest du dort alle Verlinkungen der einzelnen Navibuttons und zusätzlich die erwähnten Schalter:
https://hilfe.forumieren.com/t33217-phpbb2-header-einzelnes-bild-soll-sich-andern#216739
Dort nenne ich auch das Template, das du für die Navigation bearbeiten musst.

Liebe Grüße
Günther

Cool Danke dann setzt ich mich gleich mal ran und melde mich wenn i-was nicht so will wie ich xD

Edit Sry musste mein Profil Aktuallisieren -.- emm das sind beides punbb Foren und im Moment bastel ich an dem You´re Undead rum

Joa achso ich hab mal gestöbert wegen der Menü dings also im pun gibt es diese stelle hier --><li>{GENERATED_NAV_BAR}</li>

Da kann ich doch dann die Navilinks reinbasteln oder?

Bitteschön.

Gut, du meldest dich einfach wieder, wenn du ein Ergebnis hast.

So und wir haben schon einmal das erste Problem -.- der Slidet nicht rüber Angezeigt wird es ja so weit nur wie eben gesagt es ist ja ein Slide Menü und der will nicht Sliden xD

Ich habe mir das Script genauer angesehen und muss dir leider sagen, dass es in dieser Form nicht mit der Umgebung kompatibel ist. Deshalb wirst du dich nach einer anderen Tab-Box umsehen müssen.
Eine funktionierende, die bereits viele User erfolgreich eingesetzt haben, findest du z.B. dort:
https://hilfe.forumieren.com/t30208-tab-ansicht-changeonglet-spalten-menus-werden-falsch-angezeigt
Dort findest du das CSS und Script im ersten Beitrag und das korrigierte HTML im zweiten Beitrag.

Dieser Code wäre allerdings ohne ein Hover-Sliden, sondern wechselt die Tabs nur bei einem Klick. Sollte dir das nicht genügen, müsstest du dich nach einem anderen Code über Google umsehen.

Ja ne das hatte ich auch schon gefunden eingebaut ausprobiert mag ich nicht xD na ja dann müssen wa das lassen aber das Menü ist doch umsetzbar läuft ja nur via Css und Tpl.

noch mal Edit: Für den fall das es oben überlesen wurde ^^

Edit Sry musste mein Profil Aktuallisieren -.- emm das sind beides punbb Foren und im Moment bastel ich an dem You´re Undead rum Smile

Joa achso ich hab mal gestöbert wegen der Menü dings also im pun gibt es diese stelle hier --><li>{GENERATED_NAV_BAR}</li>

Da kann ich doch dann die Navilinks reinbasteln oder?

Für diesen Effekt findest du über Google unzählige frei verfügbare Codes, die du ausprobieren kannst. Dass ein bestimmtes Script mal inkompatibel ist, kommt vor, aber du wirst sicherlich funktionierende Codes finden.

Das Menü kannst du umsetzen, das sollte gut klappen.
Dazu musst du nur das CSS ins Stylesheet eintragen und dann im Template overall_header die entsprechende Stelle suchen, an welcher du die Navigation anzeigen lassen möchtest. Natürlich musst du den Code an die Umgebung anpassen, weil er derzeit als Teil einer unvollständigen Tabelle gestaltet ist. Das musst du noch anpassen.

Ich gebe dir dazu genauere Tipps.

Einsetzen solltest du den HTML-Code, wenn er über dem Inhalt angezeigt werden soll, an folgender Stelle des Templates oberall_header (unbearbeitetes Template: Zeilen 232-234):

<div class="container_IE">
<div class="pun">
Hier einsetzen!
<div id="pun-intro" class="clearfix">

Ich habe dir den Code auch gleich abgeändert, sodass er kompatibel ist:

Code:

<div class="topnavi"><div id="topheader">
<ul class="linkheader">
<li><a href="VERWEIS">NAME</a></li>
<li><a href="VERWEIS">NAME</a></li>
...
</ul></div></div>

Du musst nur mehr die Verweise anpassen, wie ich es im oben verlinkten Thread unter Punkt 3 erklärt habe, und die jeweiligen Namen einsetzen. Außerdem setzt du die Auflistungen, die nur bestimmten Usern (Gast/eingeloggt) angezeigt werden sollen, zwischen die dort genannten Schalter. Das genügt dort soweit.

Die Standard-Navigation kannst du nun entfernen, indem du folgende Stelle aus dem Template löschst (unbearbeitetes Template: Zeilen 245-251):

Code:

<div id="pun-head">
                  <div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
               </div>

Ich habe das in meinem Testforum gleich nochmal in die Tat umgesetzt und kann dir einen bestens funktionierenden Beispielcode geben, den ich so im Template verwende:

Code:

<div class="topnavi"><div id="topheader">
  <ul class="linkheader">
<li><a href="/forum">Home</a></li>
<li><a href="/search">Suchen</a></li>
<li><a href="/memberlist">Mitglieder</a></li>
<!-- BEGIN switch_user_logged_in -->
<li><a href="/profile?mode=editprofile">Profil</a></li>
<li><a href="/privmsg?folder=inbox">Nachrichten</a></li>
<li><a href="/login?logout">Logout</a></li>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<li><a href="/register">Anmelden</a></li>
<li><a href="/login">Login</a></li>
<!-- END switch_user_logged_out -->
</ul></div></div>

Daran kannst du dir mal ein Bild des Grundschemas inkl. der Schaltervariablen machen. Ich habe nur die grundlegenden Navilinks eingesetzt, also ohne FAQ, Galerie etc. Aber du solltest damit gut arbeiten können.

Ahhh wie Geil is das denn xD I love it <3

Jetzt wäre nur noch das Problem wie bekomme ich es ausserhalb der Tabelle? so wie hier --> [url=rpg-serienportal.taess.net/index.php]altes Forum[/url]

Dann setzt du den Code einfach außerhalb des Forenrahmens ein.

<div class="container_IE">
Hier einsetzen!
<div class="pun">
<div id="pun-intro" class="clearfix">

Emm.. Nope der mag das so nicht xD

Edit: Ja man kann sich auch dusselig anstellen xD

Wenn du nur Teile des Codes umplatzierst, ja.

Code:

<div class="container_IE">
<ul class="linkheader">
...
</div>
</div>
<div class="pun">
<div class="topnavi">
<div id="topheader">

Du musst schon den gesamten Code an der gleichen Stelle einsetzen.

Edit:

Madeleine schrieb:Edit: Ja man kann sich auch dusselig anstellen xD

Das kann passieren.
Wie ich in deinem Forum sehe, hat nun alles geklappt, und du hast auch schon das Erledigt-Icon gesetzt.
Schön, dass ich dir helfen konnte.
-done-