Ergebnis 1 bis 3 von 3

Thema: Bewegende span-elemente

  1. #1
    Fortgeschrittene/r
    Registriert seit
    25.06.2016
    Beiträge
    178
    Danke
    6
    Bekam 12 mal "Danke" in 12 Postings

    Standard Bewegende span-elemente

    Morgen zusammen,

    ich habe eine navi erstellt. Und wenn ich die hover dann rotatet sich auch ein pfeil und wenn ich auf die untermenus draufhover ein punkt.

    Nun meine Frage, wenn ich jetzt einfach wieder von diesen untermenus und obermenus weggehe, dann wird sofort aus dem bewegenden span element wieder das alte.

    Wie kann ich es machen, dass diese span-elemente auch beim verlassen langsam zurück rotieren/moven?

    Hier meine Dateien:

    HTML

    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
        <head>
            <meta charset="utf-8">
            <title> Test Webseite von Stef</title>
            
            <link href="index.css" rel="stylesheet" type="text/css">
            <link rel="icon" href="icons/favicon.ico" type="img/x-icon"> <!-- Favicon eingebunden -->
        </head>
        <body>
               <!--Navigation -->
             <div id="navigation">
                <nav>
                    <ul>
                        
                        <li class="top">
                            
                            <a href="#" class="drop">Home 
                                <span class="zusatz">></span>
                            </a>
                            <div class="down">
                               <ul> 
                                   <li class="untermenu"><a href="#">Über uns <span class="zusatz2">°</span></a></li>
                                   <li class="untermenu"> <a href="#">Leistungen <span class="zusatz2">°</span></a></li>
                                   <li class="untermenu"><a href="#">Websprachen <span class="zusatz2">°</span></a>
                                </ul>
                            </div>
                        </li>
                        <li class="top">
                            <a  href="#" class="drop">Slideshow 
                                <span class="zusatz"> ></span>
                            </a>
                            <div class="down">
                               <ul> 
                                   <li class="untermenu"><a href="#">Sommer <span class="zusatz2">°</span></a></li>
                                   <li class="untermenu"><a href="#">Winter <span class="zusatz2">°</span></a></li>
                                   <li class="untermenu"><a href="#">Herbst <span class="zusatz2">°</span></a></li>
                               </ul>
                            </div>
                        </li>
                        <li class="top">
                            <a  href="#" class="drop">Bildergalerie 
                                  <span class="zusatz"> ></span> 
                            </a>
                            <div class="down">
                               <ul> 
                                   <li class="untermenu"><a href="#">Lieblingsbilder <span class="zusatz2">°</span></a></li>
                                   <li class="untermenu"><a href="#">Tierbilder <span class="zusatz2">°</span></a></li>
                                   <li class="untermenu"><a href="#">Schulbilder <span class="zusatz2">°</span></a></li>
                               </ul>
                            </div>
                        </li>
                    </ul>
                </nav>
            </div>
            
            <div id="seitenbereich">
                <div id="search">
                    <form>
                        <input type="search" id="search_things"  placeholder="searching..." />
                        <input type="submit" id="suchfunktion" value="Suchen!" title="Suchen!"/>
                    </form>
                </div>
                <p>Das ist der Seiteninhalt</p>
                
            </div>
            <div id="fußbereich">
                <footer>
                    <p> Dies ist der Fußbereich</p>
                </footer>
            </div>
        </body>
    </html>
    CSS

    Code:
    *
    {
        margin: 0px;
        padding: 0px;
        font-family: Arial, sans-serif;
    }
    /*Navigation*/
    div#navigation
    {
        position:relative;
        width: 100%;
        height: 43px;
        background-color: black ;
        
    }
    
    #navigation ul
    {
        padding: 0px;
        margin: 0px;
        list-style-type: none;
        
    }
    
    
    #navigation li.top
    {
        float: left; 
        
    }
    
    .top a
    {
        float: left;
        width: 150px;
        height: 20px;
        text-align: center;
        padding: 10px 5px;
        color: aqua;
        text-decoration: none;
        display: block;
        border-right: 3px solid cyan;
        border-bottom: 3px solid cyan;
       
    }
    
    
    .untermenu a
    {
        color: cyan;
        text-decoration: none;
        width: 150px;
        padding: 10px 5px;
        margin: 0px;
        
        float:left;
        background-color: rgba(0, 0, 0, 0.7);
        clear:both;
        border-right: 1px solid cyan;
        border-left: 1px solid cyan;
        border-bottom: 1px solid cyan;
    }
    
    
    
    .top ul
    {
        position: absolute;
        top:43px;
        display: none;
    }
    
    
    
    li.top a:hover 
    {
        color: yellow;
        background-color: rgba(5, 255, 218, 0.8);
    }
    
    .top:hover ul 
    {
        display:block;
        
    }
    
    
    li.untermenu a:hover
    {
        background-color: rgba(0, 0, 70, 1);
        color: chartreuse;
        font-weight: 700;
        
    }
    
    .top:hover .drop 
    {
        background-color: blue;
        color: yellow;
        height: 20px;
    }
    /*rotierender Pfeil*/
    span.zusatz
    {
        position: relative;
        display: block;
        top: -15px;
        left: 50px;
        color: white;
        padding-left: 5px;
    }
    
    .top:hover .zusatz 
    {
        transition: all 0.5s ease-in;
        transform: rotate(90deg);
        color: red;
    }
    
    /*bewegende Kreise*/
    
    span.zusatz2
    {
        position: relative;
        top:-15px;
        left: 70px;
        display: block;
        color: white;
    }
    
    .untermenu:hover .zusatz2
    {
        transition: all 1s ease-in;
        transform: translate(-8px);
        color: red;
    }
    
    /*Seitenbereich*/
    
    div#seitenbereich
    {
        
        background-color: gray;
        width: 100%;
        height: 900px;
    }
    
    #seitenbereich p /*Nur zum besseren sehen*/
    {
        padding-top: 40px;
        font-weight: 900;
    }
    
    div#fußbereich
    {
        background-color: brown;
        width: 100%;
        height: 300px;
    }
    
    #fußbereich p /*Nur zum besseren sehen*/
    {
        padding-top: 50px;
        padding-left: 50px;
        font-weight: 900;
    }
    
    /*Search-bar*/
    #search form
    {
        padding-left: 10px;
        padding-top: 30px;
        text-align: right
    }
    
    input#search_things
    {
        background-image: url(icons/Search.png);
        background-repeat: no-repeat;
        
        height: 20px;
        border: none;
        text-indent: 20px; /*Tut den searchtext nach rechts verschieben*/
        
    }
    
    input#suchfunktion
    {
        height: 40px;
        width: 60px;
        padding: 5px 5px 5px 5px;
        background-color:black;
        color: aqua;
        border: none;
        border-radius: 20px;
    }
    
    input#suchfunktion:hover
    {
        cursor: pointer;
    }
    Hoffe ihr könnt mir helfen. Und ein Danke im Voraus.

    Stef
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Bewegende span-elemente

    Hallo

    Wie kann ich es machen, dass diese span-elemente auch beim verlassen langsam zurück rotieren/moven?
    Wenn eine Transition beim Hovern und beim Verlassen aktiv werden soll muss sie im Ausgangszustand stehen.

    Also statt

    Code:
    span.zusatz
    {
        position: relative;
        display: block;
        top: -15px;
        left: 50px;
        color: white;
        padding-left: 5px;
    }
    
    .top:hover .zusatz 
    {
        transition: all 0.5s ease-in;
        transform: rotate(90deg);
        color: red;
    }
    folgendermaßen

    Code:
    span.zusatz
    {
        position: relative;
        display: block;
        top: -15px;
        left: 50px;
        color: white;
        padding-left: 5px;
        transition: all 0.5s ease-in;
    }
    
    .top:hover .zusatz 
    {
        transform: rotate(90deg);
        color: red;
    }
    Gruss

    MrMurphy

  3. #3
    Fortgeschrittene/r
    Themenstarter

    Registriert seit
    25.06.2016
    Beiträge
    178
    Danke
    6
    Bekam 12 mal "Danke" in 12 Postings

    Standard AW: Bewegende span-elemente

    Hey,

    Vielen Dank. Funktioniert alles.

    Stef

Ähnliche Themen

  1. Image Swap mit div / span
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 05.06.2012, 11:20
  2. Problem im IE6 mit span und ein-/ausblenden
    Von eky79 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 28.05.2009, 16:09
  3. Bewegende Worte ;-)
    Von Romi im Forum Das Forum für Spiele, Fun & Jokes
    Antworten: 41
    Letzter Beitrag: 03.11.2007, 13:20
  4. span/div!
    Von Rasantokelo im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 22.04.2007, 19:58
  5. Bewegende Bilder
    Von dragoni im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 28.02.2007, 21:48

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •