Anzeige

Menü mit Slider-effeckt

Menü mit Slider-effeckt | PSD-Tutorials.de

Erstellt von Duststorm, 29.07.2008.

  1. Duststorm

    Duststorm Webdesigner oder so...

    Dabei seit:
    08.01.2008
    Beiträge:
    585
    Geschlecht:
    männlich
    Ort:
    Nähe von Freiburg
    Kameratyp:
    Keine Kamera
    Menü mit Slider-effeckt
    Hallo liebe PSDler,
    Ich möchte auf meiner Homepage ein Menü mit Slider Effeckt machen. So wie hier auf psd-tutorials.de nur soll das Submenü nicht einfach vom inen auf den anderen Moment erscheinen, sondern langsam nach unten gleiten.
    Meine suche im Netz und auch hier mit der SuFu waren bisher erfolglos. Kann man so ein Menü überhaupt mit css php oder javascript lösen? Gibts Tuts, oder downloads? Mein Wissensstand schätze ich auf fotgeschritten ein, zumindest bei html und css, bei php und javascript eher anfänger.

    Wäre sehr dankbar wenn ihr mir helfen könntet.
    Bis dann,
    DustStorm
     
    #1      
  2. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Menü mit Slider-effeckt
    AW: Menü mit Slider-effeckt

    Hallo Duststorm,

    Ich nehme an du meinst so etwas wie ...
    jQuery Slider Menu

    und dazu passend wie es gemacht wird ...

    Sliding Top Menu With jQuery

    Da du mit HTML/CSS zurecht kommst
    sollten Anpassungen kein Problem sein.

    Solltest du ein Menü Wünschen welches
    sich auf beim Mouse Over / Hover öffnet,
    müsstest du entweder die Funktion umschreiben,
    oder versuchen mit folgenden Stichwörtern etwas
    zu finden.


    • Ajax
    • JQuery
    • Mootools
    • Slide
    • Menü
    • dynamic
    MfG

    jAcK
     
    Zuletzt bearbeitet: 29.07.2008
    #2      
  3. Duststorm

    Duststorm Webdesigner oder so...

    Dabei seit:
    08.01.2008
    Beiträge:
    585
    Geschlecht:
    männlich
    Ort:
    Nähe von Freiburg
    Kameratyp:
    Keine Kamera
    Menü mit Slider-effeckt
    AW: Menü mit Slider-effeckt

    Hallo jackprince,
    Danke für die schnelle, ausführliche und sehr hilfreiche Antwort. Ich finde es super wie du deine Antworten aufbaust. Weiter so.

    Eins noch. Sollte schon beim hover ausfahen, was muss ich verändern?
    <script type="text/javascript">
    $(document).ready(function() {
    $(".topMenuAction").click( function() {
    if ($("#openCloseIdentifier").is(":hidden")) {
    $("#slider").animate({
    marginTop: "-141px"
    }, 500 );
    $("#topMenuImage").html(’<img src="open.png"/>’);
    $("#openCloseIdentifier").show();
    } else {
    $("#slider").animate({
    marginTop: "0px"
    }, 500 );
    $("#topMenuImage").html(’<img src="close.png"/>’);
    $("#openCloseIdentifier").hide();
    }
    });
    });
    </script>
    Kann ich das rote einfach zu onmouseover ändern? Oder kannst du mir da weiterhelfen?
     
    #3      
  4. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Menü mit Slider-effeckt
    AW: Menü mit Slider-effeckt

    ich denke nicht, dass man dort in der art einfach vom click event zum mouseover wechseln kann.
    der mouseover ist ja immer gegeben, solange der Mauszeiger im Element steht, den Klick event kann man aber jederzeit gezielt ausführen. (Beim Mouseover wird es Probleme geben) der Code müsste anders gestaltet werden
     
    Zuletzt bearbeitet: 29.07.2008
    #4      
  5. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Menü mit Slider-effeckt
    AW: Menü mit Slider-effeckt

    Hallo nochmal Duststorm,

    ich muss zugeben auch ich habe nicht viel wissen rund um JS
    (ich belese mich individuell wenn ich etwas benötige)

    Über die Google Suche "jquery hover statt click" kam ich jedoch auf folgende Seite.

    Blog Blog Archive jQuery - intelligentes JavaScript

    Dort findest weiter unten den Verweis

    Seite zum gleichnamigen Buch -> jQuery Books

    Dort findest unter "jQuery Reference Guide" und "Chapter 5: Event Methods"
    eine Auflistung aller verfügbaren Events.

    Für dich am passensten wird wohl sein ".mouseover()" es gibt auch andere
    Events die keinen Click benötigen. Auf der Seite kannst du dir wenn auf den entsprechenden Eventname Klickst auch ansehen wie das event genau reagiert.

    Solltest du weitere Fragen zur Anpassung des JS haben würde ich dir empfehlen
    den Teil "http://www.psd-tutorials.de/modules/Forum/45_php-und-andere-scriptsprachen/" des Forums zu nutzen.
    Dort solltest du diesbezüglich Kompetente Ansprechpartner finden.

    MfG

    jAcK
     
    #5      
x
×
×
teststefan