Menü erstellen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anschauen
aufruf
blocken
button
code
display
durchsuchen
element
form
forum
funktion
header
hilfe
http
index
klasse
pfeil
sagen
treff
url
-
Hi!
Ich hab hier mal eine Seite auf der ich das Menü gesehen habe, das ich gerne nachbauen würde.
http://forum.delphi-treff.de/index.php
Das Menü das ich meine ist das mit Kontrollzentrum, Mitgliederkarte, Hilfe, Community...
Bei Community ist ein kleiner Pfeil. Wenn man auf Community oder auf den Pfeil klickt öffnet sich ein kleines Menü.
Das ist das, das ich gerne nachbauen möchte. So in der Art.
Kann mir da jemand sagen, wie man das machen könnte??
mfg delco -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das ist einfach ein DIV Element das beim Start auf "display: none" steht, Wenn man auf den Pfeil klickt, liest man via element.offsetWidth und offsetHeight aus wie groß das Element ist und merkt sich diese Werte. Nun kann man das Element auf eine Größe von 0 setzen und display: block.
Was nun folgt ist noch ein Aufruf der mittels Timer deine "aufklapp" Funktion immer wieder aufruft und das DIV Element nach und nach größer werden lässt. Entweder per Google ein entsprechendes Tutorial raussuchen oder von Forum direkt die Javascript Funktionen anschauen ;) -
Ich find nur solche die mit display arbeiten und vertikal untereeinander stehen. Nichts das horizontal steht und blöcke nach unten öffnet :(
mfg delco
PS: Wie geht es, dass wenn man display auf true stellt, nicht alles andere auch nach unten verschoben wird, sondern über alles andere gezeichnet wird?? -
du kannst display nur auf block, none oder inline stellen. Und natürlich muss das DIV Element absolut positioniert sein, damit es über den anderen Elementen liegen kann. Ich würde als erstes das HTML entsprechend herrichten und dann erst das Javascript hinzufügen, sonst wird das eh nichts ;)
-
Ich werds mal versuchen. Wenns nicht klappen mag frag ich nochmal. Werd auch die vertikalen Menüs hernehmen. vll. find ich da was halbwegs brauchbares...
mfg delco -
Kleiner Tipp: jeder Browser erlaubt dir den HTML Code anzuschauen. Vielleicht hilft es dir, wenn du:
<!-- nav buttons bar --> <div class="tborder" style="padding:1px; border-top-width:0px"> <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center"> <tr align="center"> <td class="vbmenu_control"><a href="register.php" rel="nofollow">Registrieren</a></td> <td class="vbmenu_control"><a rel="help" href="faq.php" accesskey="5">Hilfe</a></td> <td class="vbmenu_control"><a id="community" href="/index.php?nojs=1#community" rel="nofollow" accesskey="6">Community</a> <script type="text/javascript"> vbmenu_register("community"); </script></td> <!-- <td class="vbmenu_control"><a href="calendar.php">Kalender</a></td>--> <td class="vbmenu_control"><a href="search.php?do=getdaily" accesskey="2">Heutige Beiträge</a></td> <td id="navbar_search" class="vbmenu_control"><a href="search.php" accesskey="4" rel="nofollow">Suchen</a> </td> </tr> </table> </div> <!-- / nav buttons bar --> <br /> <!-- NAVBAR POPUP MENUS --> <!-- community link menu --> <div class="vbmenu_popup" id="community_menu" style="display:none;margin-top:3px" align="left"> <table cellpadding="4" cellspacing="1" border="0"> <tr><td class="thead">Community Links</td></tr> <tr><td class="vbmenu_option"><a href="group.php">Interessengemeinschaften</a></td></tr> <tr><td class="vbmenu_option"><a href="album.php">Bilder & Alben </a></td></tr> <tr><td class="vbmenu_option"><a href="memberlist.php">Benutzerliste</a></td></tr> </table> </div> <!-- / community link menu --> <!-- header quick search form --> <div class="vbmenu_popup" id="navbar_search_menu" style="display:none;margin-top:3px" align="left"> <table cellpadding="4" cellspacing="1" border="0"> <tr> <td class="thead">Foren durchsuchen</td> </tr> <tr> <td class="vbmenu_option" title="nohilite"> <form action="search.php?do=process" method="post"> <input type="hidden" name="do" value="process" /> <input type="hidden" name="quicksearch" value="1" /> <input type="hidden" name="childforums" value="1" /> <input type="hidden" name="exactname" value="1" /> <input type="hidden" name="s" value="" /> <input type="hidden" name="securitytoken" value="guest" /> <div><input type="text" class="bginput" name="query" size="25" tabindex="1001" /><input type="submit" class="button" value="Los" tabindex="1004" /></div> <div style="margin-top:6px"> <label for="rb_nb_sp0"><input type="radio" name="showposts" value="0" id="rb_nb_sp0" tabindex="1002" checked="checked" />Zeige Themen</label> <label for="rb_nb_sp1"><input type="radio" name="showposts" value="1" id="rb_nb_sp1" tabindex="1003" />Zeige Beiträge</label> </div> </form> </td> </tr> <tr> <td class="vbmenu_option"><a href="tags.php" rel="nofollow">Stichwortsuche</a></td> </tr> <tr> <td class="vbmenu_option"><a href="search.php" accesskey="4" rel="nofollow">Erweiterte Suche</a></td> </tr> </table> </div> <!-- / header quick search form -->
durchliest. (Ok, ich denke nicht, dass das noch alles selber geschrieben wurde aber hilfreich ist sowas fast immer...) -
Das man Code anschauen kann weiß ich. Hab ich auch hier gemacht, aber da sind vbulletin-Klassen dabei.
mfg delco
PS: Falls noch wer ne Idee / Link etc. hat: nur immer her damit :)
-
Hallo du,
vielleicht ist es nicht ganz so verkehrt wenn du dir auf deinen Webspace Joomla installierst und mit nem Kostenlosen Template kannste ganz ähnliche Menüs rauskriegen. -
Es ist ja so, dass ich das selber machen will. Das sowas mit Joomla geht dachte ich mir schon.
trotzdem danke für den tip. Vll. hilfts später mal wem wenn er auf diesen Thread hier stößt
mfg delco -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
