1. #1
    U-Labs Routinier

    Registriert seit
    18.03.2013
    Beiträge
    481
    Thanked 263 Times in 167 Posts

    Standard Sidebar-Login einfliegen lassen

    Huhu

    ich möchte ein Loginfeld, das bei Maushover von rechts eingeflogen kommt. Also ähnlich wie hier der Styleswitcher, nur größer, auf der anderen Seite und andere Farben/Inhalt. Allerdings hab ich keine Lust, mich hier durch den ganzen HTML/CSS-Code zu kämpfen und die benötigten Teile rauszusuchen.

    Wie ich es mir ungefähr vorstelle, ist auf abalo media GmbH zu sehen. Nur will ich nicht erst auf Login klicken lassen, sondern beim Hover soll das Feld schon ausfahren.

    Zum Googlen hab ich wohl die falschen Stichwörter verwendet. Kann mir hier jemand helfen oder einfach sagen, wonach ich googlen kann, um einen Sample-Code zu finden? Umbauen kann ich es ganz alleine.



    [www.piratenpartei.de]
    "Krieg ist Frieden; Freiheit ist Sklaverei; Unwissenheit ist Stärke"

  2. #2
    Projektleitung
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    4.058
    Thanked 8.487 Times in 2.530 Posts
    Blog Entries
    5

    Standard AW: Sidebar-Login einfliegen lassen

    Der Designswitcher wurde mit CSS3 Transitions gemacht.

    Code:
    <div class="switch">
        <div class="color-palette" title="Farbstyl ändern"></div>
        <a href="{vb:raw vboptions.bburl}forum.php?styleid=11"><div class="blue"></div></a>
        <a href="{vb:raw vboptions.bburl}/forum.php?styleid=15"><div class="orange"></div></a>
    </div>

    .switch .blue, .switch .orange, .switch .color-palette {
    background:url(images/uhacks_orange/sprite-main-switch.png) no-repeat;
    }
    .switch .color-palette {
    height: 32px;
    width: 32px;
    background-position: 0 0;
    }
    .switch .blue, .switch .orange {
    height: 15px;
    width: 24px;
    }
    .switch .blue {
    background-position: 0 -32px;
    }
    .switch .orange {
    background-position: -24px -32px;
    }
    .switch {
    position: fixed;
    left: -35px;
    top: 70px;
    width: 24px;
    padding: 10px 10px 10px 15px;
    background-color: #333;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
    border-radius: 5px;
    z-index: 1000;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    }
    .switch img {
    margin-bottom: 0px;
    }
    .switch:hover {
    left:-10px;
    }
    .switch a:hover {
    position: relative;
    left: 2px;
    }


  3. The Following 2 Users Say Thank You to DMW007 For This Useful Post:

    Devon (05.09.2013), xOneDirectionx (03.09.2013)

Ähnliche Themen

  1. Autoschlüssel nachmachen lassen für Golf 4?
    Von Nachto im Forum Fahrzeuge
    Antworten: 6
    Letzter Beitrag: 04.08.2013, 22:07
  2. Trusten lassen
    Von Rshard im Forum Support
    Antworten: 3
    Letzter Beitrag: 17.02.2012, 17:04
  3. Antworten: 3
    Letzter Beitrag: 01.01.2012, 18:35
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.

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 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191