Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 6
Seite [1]
maGGiTech


Rock the board





Beiträge: 53
 # Thema - 11.06.2014 um 17:53 Uhr
Hi ich möchter hiermit: mehr... +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
1. / 2. / ... 
     $(function() {
        // set opacity to nill on page load
        $("Selector").css("opacity","0");
        // on mouse over
        $("Selector").hover(function () {
            // animate opacity to full
            $(this).stop().animate({
                opacity: 1
            }, "fast");
        },        
    
        // on mouse out
        function () {
            // animate opacity to nill
            $(this).stop().animate({
                opacity: 0
            }, "fast");
        });
    });

Das background image von meiner Navi ausblenden, und bei mousover soll es sichtbar sein, mouseout dann nicht mehr. Wenn ich den Selector wähle wo auch meine Schrift drin ist wird auch immer die Schrift dazu ausgeblendet. Bei einem Beispiel haben sie das mit Bildern gemacht, also Bild mit der Schrift drüber als Bild.

Jetzt wollte ich mal fragen ob man das auch geschickter machen kann, ohne Bilder dafür zu benutzen.

Also der Aufbau ist:
mehr... +-
 
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.
1. / 2. / ... 
 
      <div id="navi">
        <ul id="menu">
      <li><a href="index.php" class="drop">Infotainment</a>
        <div class="dropdown_columns">
          <div class="col">
            <a href="{url:news_recent}">News</a>
            <a href="{url:news}">Archiv</a>
            <a href="{url:votes}">Umfragen</a>
            <a href="index/rules/listcat/id/6">Regeln</a>
          </div>
        </div>
      </li>
      <li><a href="#" class="drop">iX-Gaming</a>
        <div class="dropdown_columns">
          <div class="col">
            <a href="{url:users}">Users</a>
            <a href="{url:members}">Teams</a>
            <a href="{url:history}">History</a>
            <a href="{url:wars}">Matches</a>
            <a href="{url:ranks}">Ranking</a>
          </div>
        </div>
      </li>
      <li><a href="{url:board}" class="drop">Forum</a></li>
      <li><a href="#" class="drop">Media</a>
        <div class="dropdown_columns">
          <div class="col">
            <a href="{url:streams}">Streams</a>
            <a href="{url:gallery}">Gallery</a>
            <a href="{url:files}">Downloads</a>
          </div>
        </div>
      </li>
      <li><a href="{url:cups}" class="drop">Cups</a></li>
      <li><a href="index/blog/view/id/2" class="drop">Join Us</a></li>
      <li><a href="index/blog/view/id/3" class="drop">Fight Us</a></li>
      </ul>
      </div>
      <div id="header">
        <div id="videoplayer">{videogallery:navlist}</div>
        <div id="usercenter">{users:navlogin_new}</div>
      </div>


ich habs auch schon mit <span></span> vor oder nach dem Link versucht, jedoch ist dann entweder der Link nicht anklickbar oder beim span funktioniert das mousover nicht mehr, je nachdem wie ich z-index angebe. Keine Ahnung wie sowas richtig geht, google spuckt da nur crap raus.


------------------
Mutligaming Community team-pheenix.de
Inaktiv
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
 # Antwort: 1 - 14.06.2014 um 23:05 Uhr
was genau ist gemeint? der hintergrund um dropdown?


Inaktiv
|
maGGiTech
Thread-Ersteller


Rock the board





Beiträge: 53
 # Antwort: 2 - 15.06.2014 um 00:36 Uhr
Das ist nicht so leicht im Forum erklärt, ich war bereits 2 stunden im javascript chat im irc und nochmal 40 minuten in dem von css. Hab fast 30 Minuten gebraucht um mein Gegenüber zu vermitteln was ich eigentlich will und wo das Problem liegt.

Der Versuch das mit Javascript zu machen hab ich nur unternommen, da ich dachte das es nicht möglich ist mit CSS Transition ein Background Image von opacity:0 zu opacity:1 zu bringen, ohne das dabei der Text verschwindet. Das geht mit nem Span z.B. jedoch funktioniert es immer noch nicht so wie ichs will, weil der Text jetzt beim Hover verschwindet.

Irgendwie überlappt der hover die Schrift jetzt, habs mit verschiedenen Display:blabla versucht, kein unterschied und auch z-index kam ich nicht weiter. Total nervig.

Muss dazu sagen ich hab die navi nicht selbst gemacht, die war so in nem Template bereits vorhanden bzw. so ähnlich und wurde nicht sehr gut umgesetzt find ich.

Generell ist der Aufbau so:
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
1. / 2. / ... 
 
<div id="navi">
     <ul id="menu">
          <li ><a class="drop">Oberkategorie</a>
               <div class="dropdown_columns">
                    <div class="col">
                          <a>Unterkategorie 1<span class="mask"></span></a>
                          <a>Unterkategorie 2<span class="mask"></span></a>
                          <a>Unterkategorie 3<span class="mask"></span></a> 
                    </div>
               </div>
          </li>
     </ul>
</div>

Setzt Opacity auf 0 bei Pageload mit der Transition drin:
.mask +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
1. / 2. / ... 
 
.mask {
  background-image:url(../images/navi/subnavi_button.png);
  background-repeat:no-repeat;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=50);
  -webkit-transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -ms-transition: opacity .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;    
}


Setzt Opacity auf 1 bei Hover:
a:hover .mask +-
 
1.
2.
3.
4.
5.
6.
7.
8.
1. / 2. / ... 
 
a:hover .mask {
    opacity: 1;
    zoom: 1;
    background-image:url(../images/navi/subnavi_button.png);
    background-repeat:no-repeat;
    z-index:-100;


Und jetzt weiß ich nicht warum beim Hover der Text wieder überdeckt wird. Ich komm nicht drauf ka

http://cms.team-pheenix.de/


------------------
Mutligaming Community team-pheenix.de

Zuletzt editiert von maGGiTech am 15.06.2014 um 01:21 Uhr (1x Editiert)
Inaktiv
|
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
 # Antwort: 3 - 15.06.2014 um 08:59 Uhr
und warum nicht einfach background: none und beim hover dann halt das bild?


Inaktiv
|
maGGiTech
Thread-Ersteller


Rock the board





Beiträge: 53
 # Antwort: 4 - 15.06.2014 um 10:15 Uhr
Das funktioniert mit ner Transition glaube ich nicht. Wenn ich das richtig gelesen hab funktioniert 'background-img' nicht unter firefox, unter 'all' wird background-img auch nicht angesprochen. Anders sieht es mit 'background-color' aus dort funktioniert das super, bei einem Hintergrundbild geht es glaube ich wirklich nur mit Opacity Transition, also muss der Text in ein anderen Container gemacht werden, damit der Text nicht ebenfalls ausgeblendet wird.


------------------
Mutligaming Community team-pheenix.de

Inaktiv
|
maGGiTech
Thread-Ersteller


Rock the board





Beiträge: 53
 # Antwort: 5 - 17.06.2014 um 00:50 Uhr
http://jsfiddle.net/ULLQk/


------------------
Mutligaming Community team-pheenix.de

Zuletzt editiert von maGGiTech am 17.06.2014 um 00:54 Uhr (1x Editiert)
Inaktiv
|
Dafoxx


King for a day





Beiträge: 244
 # Antwort: 6 - 14.07.2015 um 21:24 Uhr
zum thema background-image (nicht background-img): http://www.css4you.de/background-image.html
Ich würds auch mit ner transistion machen, allerdings ohne opaicty. hoffe mein ansatz passt zu deinem problem
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
1. / 2. / ... 
 #navi .subnavi {
transition: max-height 0.25s ease-out;
max-height:0;
}

#navi:hover .subnavi {
transition: max-height 0.25s ease-in;
max-height:500px;
}


Also in deinem Fall:

 
1.
2.
3.
4.
5.
6.
7.
8.
9.
1. / 2. / ... 
 #drop .dropdown_columns {
transition: max-height 0.25s ease-out;
max-height:0;
}

#drop:hover .dropdown_columns {
transition: max-height 0.25s ease-in;
max-height:500px;
}


Zuletzt editiert von Dafoxx am 14.07.2015 um 21:29 Uhr (1x Editiert)
Inaktiv
|
Antworten: 6
Seite [1]


Sie müssen sich registrieren, um zu antworten.