tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
225
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 08.10.11 19:36 #1
    Avatar von technikfreack
    technikfreack technikfreack ist offline Mitglied Bronze
    Registriert seit
    Oct 2011
    Beiträge
    29
    Hi,
    ich bin dabei, eine Website zu erstellen. Momentan noch ziehmlich in den Anfangsphasen. Es klappt irgentwie nicht: ich möchte wenn ich über ein SPAN fahre, dass sich ein Menü mit getrennten DIV ausfährt.
    Mein aktueller Quelltext:

    index.html:
    HTML-Code:
    <!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<title>TTS 3.0 - Home</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>

</head>

<body onload="load()">
<div class="blackscreen"></div>



<div class="gl_nav" id="gl_nav">
<span class="title">Home | <span class="gl_navnews">News</span> | Technic Area | Feedback | Kontakt</span>
<!-- <span class="action">Anmelden | Registrieren</span> -->
<span class="menue_news">
<ul>
<li>Allgemeines</li>
<li>Technisches</li>
<li>Aus aller Welt</li>
</ul>


</span>


</div>
<div class="main" id="main" style="display:none;"><br><br><br><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<br><br><br>
</div>
<tt>
<div class="ttslogo"><img src="ttslogo.png" alt="" ></div>
<div class="top" id="toplink" style="display:none;"><a href="#main">
▲<br>
Nach oben
</a><br><br></div>

</body>
</html>

    css.css:
    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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

    body{
    background-color: black;
    margin: 0;
    padding: 0;
 
    
}
* {
    color: white;
    font-family: Ubuntu;
    cursor: default;
}
 
 
 
 
.ttslogo img{
    width: 160px;
    position: fixed;
    top: 80px;
    left: 2px;
 
    }
 
.gl_nav{
    background-image: url(navi.png);
    height: 60px;
    position: fixed;
    width: 100%;
    z-index: 2;
    
    
}
.main{
 
    height: 100%;
position: absolute;
 
left: 180px;
right: 180px;
 
    
}
 
 
.top, .bottom{
text-align: center;
    position: fixed;
    bottom: 2px;
    right: 5px;
    text-decoration: none;
    width: 100px;
 
    }
    .top a, .bottom a{
        text-decoration: none;
    }
    
    .gl_nav .title{
    position: fixed;
    top: 14px;
    left: 10px; 
    font-size: 20px;    
        
    }
    
.gl_nav .title ul li{
    list-style-type: none;
    float: left;
    padding: 0;
    
}
.gl_nav .title .naviklappe{
 
 
   margin-top: -10px;
    font-size: 15px;    
        
    }
 
.end{
left: 180px;
right: 180px;
 
background-color: red;
 
 
 
    
}
 
.blackscreen{
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    background-color: black;
    opacity: 0.75;
    z-index: 5;
    display: none;
    
}
 
.menue_news ul{
    background-color: red;
    color: green;
    height: 60px;
    position: fixed;
    top: 36px;
    left: 70px;
   padding: 10px !important;
    z-index: 50;
    list-style-type: none;
 
 
}
.menue_news{ display: none;}
.gl_navnews{
    background-color: green;
}

    js.js:
    PHP-Code:
    $(document).ready(function() {
                // Alle internen Links auswählen
                $('a[href*=#]').bind("click", function(event) {
                    // Standard Verhalten unterdrücken
                    event.preventDefault();
                    // Linkziel in Variable schreiben
                    var ziel = $(this).attr("href");
                    //Scrollen der Seite animieren, body benötigt für Safari
                    $('html,body').animate({
                        //Zum Ziel scrollen (Variable)
                        scrollTop: $(ziel).offset().top
                    // Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL
                    }, 1000 , function (){location.hash = ziel;});
           });
        return     false;
        });
        
        function     load(){
    var     toplink = setInterval('hidetoplink()', 200);
    main();
    }

    function     main(){
        $(    ".main").animate({ height: 'show', opacity: 'show' }, 'slow');
        
    }


    function     hidetoplink(){
    var     posi = window.pageYOffset;
    if(    posi >= 20){
    $(    "#toplink").animate({ opacity: 'show' }, 'slow');
    }
    if(    posi < 20){
    $(    "#toplink").animate({ opacity: 'hide' }, 'slow');
      }
    }

    function     blackscreen(){
        $(    ".blackscreen").animate({height: 'show', width: 'show', opacity: 'show' }, 'slow');

    }
    function     noblackscreen(){
        $(    ".blackscreen").animate({height: 'hide', width: 'hide', opacity: 'hide' }, 'slow');

    }











            $(    document).ready(function(){
     $(    ".gl_navnews").hover(function(){

                    $(    ".menue_news").animate({ height: 'show', opacity: 'show' }, 'slow');
     
                }, function(){
             $(    ".menue_news").animate({ height: 'hide', opacity: 'hide' }, 'slow');
                    
                }) 
     });


    /*

            $('.gl_navnews').hover(
                $(".blackscreen").animate({height: 'show', width: 'show', opacity: 'show' }, 'slow');
            
            
            );
    */ 


    Sorry falls euch die Farben irritiern, das waren nur Hilfen für mich . Wisst ihr was ich da falsch mache?
    Danke für Hilfe



    (Im Annhabg sind nochmal alle Dateien)
    Angehängte Dateien Angehängte Dateien
     
    Viele Grüße, technikfreack

    Ich suche noch Babysitter. Meine Compiler heulen immer rum und meckern mich an. Vielen Dank für Unterstützung.
    Zitieren Zitieren
  2. 09.10.11 21:52 #2
    Roflmao Roflmao ist offline Mitglied Silber
    Registriert seit
    Sep 2011
    Beiträge
    54
    Ich bin auch noch blutiger Anfaenger in Javascript und JQuery deswegen gibt es garantiert einen viel schoeneren Weg.

    Aber schau dir einmal onmouseover und slideToggle() an.
     
    Zitieren Zitieren
« jQuery/Ajax Requets: responseXML. TypeError: a is null | Seite 1 aufrufen nach x Sekunden zu Seite 2 springen »

Ähnliche Themen

  1. PHP array stehe auf dem Schlauch
    Von bambid im Forum PHP
    Antworten: 4
    Letzter Beitrag: 24.04.11, 09:53
  2. Stehe auf dem Schlauch!
    Von Snowowl im Forum PHP
    Antworten: 22
    Letzter Beitrag: 28.08.06, 16:17
  3. [c++] 2x *String verketten (stehe auf dem Schlauch)
    Von d-Stench im Forum VisualStudio & MFC
    Antworten: 1
    Letzter Beitrag: 27.04.06, 00:12
  4. Ich glaube, ich stehe auf dem Schlauch!
    Von meilon im Forum PHP
    Antworten: 6
    Letzter Beitrag: 16.05.04, 17:56
  5. Stehe auf dem Schlauch
    Von medicus41 im Forum PHP
    Antworten: 10
    Letzter Beitrag: 14.07.02, 09:45

Stichworte