tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
13
ZUGRIFFE
602
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 14.06.08 00:24 #1
    Avatar von ZipZek
    ZipZek ZipZek ist offline Mitglied Silber
    Registriert seit
    Dec 2001
    Beiträge
    99
    Hi Community,
    da ich immernoch versuche eine Navigation ähnlich wie bei mobilant.de zu erstellen und meine Versuche in Flash (http://www.tutorials.de/forum/flash/...bilant-de.html)
    kläglich gescheitert sind habe ich es mal mit HTML/CSS versucht. So weit bin ich gekommen: http://philvip.ph.ohost.de/navi/navigation.html

    Jetzt fehlt nurnoch der Fade-In/Out Effekt. Ich weiß zwar dass es MooFX/Tools, Prototype, Prototip, Jquery und weiß der Geier alles gibt, aber umgehen damit kann ich nicht, da ich nicht wirklich JavaScript kann.

    Kann mir da Jemand weiterhelfen? Ich wäre Demjenigen sehr verbunden

    Gruß,
    Phil
     
    "Seien wir realistisch, versuchen wir das unmögliche"
    Ernesto "Che" Guevara
    Zitieren Zitieren
  2. 14.06.08 01:28 #2
    Maik Tutorials.de Gastzugang
    Hi,

    http://www.javascript-fx.com/develop...der/demo2.html sieht da ganz vielversprechend aus.
    1. Script downloaden und im Dokumentheader aufrufen:
      Code :
      1

      <script src="JSFX_ElemFader.js" type="text/javascript"></script>
    2. CSS-Regel im Stylesheet aufnehmen und ggfs. die Opacity-Werte tunen:
      Code :
      1
2
3
4
5
6

      .elemFaderGray {
position:relative;
filter:alpha(opacity=40); 
-moz-opacity:0.4;
display: block;
}
    3. Notwendige Ergänzungen im HTML-Quelltext:
      Code :
      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

      <body [b]onload="JSFX.fadeElemAuto()"[/b]>
 
<ul id="nav">
 
        <li id="liProdukt" class="on"><a href="#" [b]class="elemFaderGray"[/b]><span>Produkt</span></a>
        <ul>
                <li><a href="#">Brunelleschi</a></li>
                <li><a href="#">Alberti</a></li>
                <li><a href="#">Palladio</a></li>
                <li><a href="#">Michelangelo</a></li>
 
                <li><a href="#">Bramante</a></li>
        </ul></li>
        <li id="liLeistungen" class="off"><a href="#" [b]class="elemFaderGray"[/b]><span>Leistungen</span></a>
        <ul>
                <li><a href="#">Mackintosh</a></li>
                <li><a href="#">Guimard</a></li>
                <li><a href="#">Horta</a></li>
 
                <li><a href="#">van de Velde</a></li>
        </ul></li>
        <li id="liSupport" class="off"><a href="#" [b]class="elemFaderGray"[/b]><span>Support</span></a>
        <ul>
                <li><a href="#">Sullivan</a></li>
                <li><a href="#">Le Corbusier</a></li>
                <li><a href="#">Mies</a></li>
 
                <li><a href="#">Gropius</a></li>
                <li><a href="#">Yamasaki</a></li>
        </ul></li>
        <li id="liBestellen" class="off"><a href="#" [b]class="elemFaderGray"[/b]><span>Bestellen</span></a>
        <ul>
                <li><a href="#">Venturi</a></li>
                <li><a href="#">Eisenman</a></li>
 
                <li><a href="#">Stern</a></li>
                <li><a href="#">Graves</a></li>
                <li><a href="#">Gehry</a></li>
        </ul></li>
        <li id="liKontakt" class="off"><a href="#" [b]class="elemFaderGray"[/b]><span>Kontakt</span></a>
        <ul>
                <li><a href="#">Xenakis</a></li>
 
                <li><a href="#">Lynn</a></li>
                <li><a href="#">Diller+Scofidio</a></li>
                <li><a href="#">Zellner</a></li>
                <li><a href="#">Hadid</a></li>
        </ul></li>
</ul>
 
</body>
    4. Fertig

    mfg Maik
     
    Zitieren Zitieren
  3. 14.06.08 01:37 #3
    Avatar von ZipZek
    ZipZek ZipZek ist offline Mitglied Silber
    Registriert seit
    Dec 2001
    Beiträge
    99
    mhhh..... und wie bau ich den Spaß ein
    Gruß =)
     
    "Seien wir realistisch, versuchen wir das unmögliche"
    Ernesto "Che" Guevara
    Zitieren Zitieren
  4. 14.06.08 01:38 #4
    Maik Tutorials.de Gastzugang
    Die drei Arbeitsschritte hab ich dir doch eben genannt.

    mfg Maik
     
    Zitieren Zitieren
  5. 14.06.08 01:48 #5
    Maik Tutorials.de Gastzugang
    Siehe Anhang.

    mfg Maik
    Angehängte Dateien Angehängte Dateien
     
    Zitieren Zitieren
  6. 14.06.08 02:21 #6
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6

    Sowas ham wir bei uns doch auch
    http://www.tutorials.de/forum/javasc...ml#post1151359
     
    Zitieren Zitieren
  7. 14.06.08 02:32 #7
    Maik Tutorials.de Gastzugang
    Jetzt, wo du es sagst

    mfg Maik
     
    Zitieren Zitieren
  8. 14.06.08 02:34 #8
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    <spam>Pööööööhser Maik </spam>
     
    Zitieren Zitieren
  9. 14.06.08 02:37 #9
    Maik Tutorials.de Gastzugang
    Kannst mir ja eine disziplinarische Verwarnung auf's Auge drücken (wenn du in einem meiner Beiträge die gelbe/rote Karte entdeckst)

    mfg Maik
     
    Zitieren Zitieren
  10. 14.06.08 02:56 #10
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Ich kann dir auch ne negative Bewertung geben
     
    Zitieren Zitieren
  11. 14.06.08 02:58 #11
    Maik Tutorials.de Gastzugang
    Jo, das kannst du wohl, nur kann ich sie im Admin-CP ganz elegant in die Tonne kloppen

    mfg Maik

    So, und nun wieder die Funkdisziplin einhalten
     
    Zitieren Zitieren
  12. 14.06.08 03:00 #12
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    ich sags doch, pöööööhse

    gn8
     
    Zitieren Zitieren
  13. 14.06.08 10:42 #13
    Avatar von ZipZek
    ZipZek ZipZek ist offline Mitglied Silber
    Registriert seit
    Dec 2001
    Beiträge
    99
    Ups, ich glaub ich hab mich falsch ausgedrückt! Eigentlich meinte ich mit dem Faden, dass das Untermenü ein und ausfadet und nicht die Hauptbuttons....

    Gibt es da auch ne Möglichkeit

    Gruß, Phil =)
     
    "Seien wir realistisch, versuchen wir das unmögliche"
    Ernesto "Che" Guevara
    Zitieren Zitieren
  14. 15.06.08 00:03 #14
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Schau dir vielleicht doch nochmal scriptaculous an, die Benutzung ist nun wirklich einfach, auch ohne tiefe JS-Kenntnisse.
    Gerade dafür bieten sich solche Frameworks ja an...einfache Benutzung ohne tiefgehende Sprachkenntnisse

    Hier nen Beispiel für sowas:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    <table>
    <thead>
      <tr style="cursor:pointer">
        <th onmouseover="$('sub1').appear();" onmouseout="$('sub1').fade();">Main 1</th>
        <th onmouseover="$('sub2').appear();" onmouseout="$('sub2').fade();">Main 2</th>
        <th onmouseover="$('sub3').appear();" onmouseout="$('sub3').fade();">Main 3</th>
      </tr>
    </thead>
    <tbody>
      <td colspan="3" height="15">
        <div id="sub1" style="position:absolute;display:none">Sub1 Sub1 Sub1 </div>
        <div id="sub2" style="position:absolute;display:none">Sub2 Sub2 Sub2 </div>
        <div id="sub3" style="position:absolute;display:none">Sub3 Sub3 Sub3 </div>
      </td>
    </tbody>
  </table>

    appear() blendet ein--->fade() blendet aus...fertig
     
    Zitieren Zitieren
« Ladebalken bzw. -grafik bei Seitenaufbau | Ajax: Bei externer Aufrufung funktioniert js, aber nicht bei interner »

Ähnliche Themen

  1. jQuery FadeIn / FadeOut
    Von LeMarkus im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 10.09.10, 14:49
  2. problem mit .fadein / .fadeout
    Von raybrackho im Forum Flash Plattform
    Antworten: 2
    Letzter Beitrag: 06.08.10, 10:52
  3. DIV Fadein Fadeout im IE - Problem
    Von pauschpage im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 01.09.07, 20:59
  4. fadeIn + fadeOut
    Von ouagadugu im Forum Flash Plattform
    Antworten: 21
    Letzter Beitrag: 10.11.05, 09:47
  5. Yugop - mit FadeIn / FadeOut
    Von coral im Forum Flash Plattform
    Antworten: 1
    Letzter Beitrag: 01.08.05, 20:17