WIP - Webshowroom simonpicos

[cebito]

Zitat von simonpicos

(bei der letzten Farbvariante tritt das Problem nicht auf.. )

Das tritt immer nur bei der letzten nicht auf, tausch mal die Reihenfolge der Navis...

Zitat von simonpicos

Da bräucht ich dann auch mal eure Hilfe.

Die brauchst du hier ganz sicher. Du schreibst bedeutend zu viel CSS-Code. Überleg mal, was alle gemeinsam haben, und notier das immer nur einmal, das macht den Code deutlich leser- und übersichtlicher.
Werd mal versuchen dir das zu vereinfachen, kann aber ein Stückl dauern...

[simonpicos]

Zitat von cebito

Du schreibst bedeutend zu viel CSS-Code. Überleg mal, was alle gemeinsam haben, und notier das immer nur einmal, das macht den Code deutlich leser- und übersichtlicher.
Werd mal versuchen dir das zu vereinfachen, kann aber ein Stückl dauern...

Nene, das ist schon bewusst so. Damit die Leute, die das Ding kaufen, nur noch einen Codeblock kopieren müssen, anstatt sich einzelne Schnipsel zusammensuchen zu müssen
Mach dir die Arbeit nicht, wäre rausgeschmissene Zeit

Aber irgendwo da wird das Problem liegen, weil wenn die Navis einzeln sind, funzt alles. Werd mich mal auf die Suche begeben...

[cebito]

Zitat von simonpicos

Mach dir die Arbeit nicht, wäre rausgeschmissene Zeit

Schon passiert...

/************** nav allgemein **************/

.nav{
    width: 546px;
    height: 50px;
    margin:350px auto;
}
.nav ul{
    list-style: none;
}
.nav li>ul{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transition: opacity .6s;
    box-shadow: 0 3px 3px rgba(0,0,0,.6);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.nav li a{
    display: inline-block;
    text-decoration: none;
    font-family: 'Droid Sans', sans-serif;
    font-size: 14px;
    width: 120px;
    padding: 8px 26px;
    color: #fff;
    transition: all .2s;
}

/***************** Level 1 *****************/

.dropdown-level-1{
    border-radius: 6px;
    width: 546px;
    height: 50px;
    box-shadow: 0 2px 3px rgba(0,0,0,.6);
}
.dropdown-level-1>li{
    position: relative;
    display: inline-block;
    float: left;
    overflow: visible;
}
.dropdown-level-1>li:first-of-type>a{
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.dropdown-level-1>li:last-of-type>a{
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.dropdown-level-1>li>a{
    line-height: 50px;
    padding: 0px 26px;
    height: 50px;
    width:auto;
}

/***************** Level 2 *****************/

.dropdown-level-2>li:last-of-type>a{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.dropdown-level-2>li:first-of-type>a{
    box-shadow: 0 6px 3px -4px rgba(0,0,0,.4) inset;
}

/***************** Level 3 *****************/

.dropdown-level-3{
    position: absolute;
    left: 172px;
    margin-top: -32px;
    z-index: -2;
    border-top-right-radius: 6px;
}
.dropdown-level-3>li:last-of-type>a{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.dropdown-level-3>li:first-of-type>a{
    border-top-right-radius: 6px;
}

/****************** Hover ******************/

.nav li:hover>ul{
    opacity: 1;
    visibility: visible;
}

/***************** Farben ******************/

.blue .dropdown-level-1>li>a,.blue .dropdown-level-2>li>a:hover,.blue .dropdown-level-3>li>a:hover{
    background: #2977d1;
}
.blue .dropdown-level-1>li>a:hover,.blue .dropdown-level-2>li>a,.blue .dropdown-level-3>li>a{
    background: #5393dd;
}
/* ****** */
.red .dropdown-level-1>li>a,.red .dropdown-level-2>li>a:hover,.red .dropdown-level-3>li>a:hover{
    background: #d1294b;
}
.red .dropdown-level-1>li>a:hover,.red .dropdown-level-2>li>a,.red .dropdown-level-3>li>a{
    background: #dd536f;
}
/* ***** */
.orange .dropdown-level-1>li>a,.orange .dropdown-level-2>li>a:hover,.orange .dropdown-level-3>li>a:hover{
    background: #e48416;
}
.orange .dropdown-level-1>li>a:hover,.orange .dropdown-level-2>li>a,.orange .dropdown-level-3>li>a{
    background: #ec9a3c;
}
/* ***** */
.violet .dropdown-level-1>li>a,.violet .dropdown-level-2>li>a:hover,.violet .dropdown-level-3>li>a:hover{
    background: #8f53dd;
}
.violet .dropdown-level-1>li>a:hover,.violet .dropdown-level-2>li>a,.violet .dropdown-level-3>li>a{
    background: #7229d1;
}

... und wie man sieht, muss man hier auch nur einen Codeschnipsel kopieren und Farben ändern ist auch gleich viel einfacher

Dein Flackerprob hab ich jetzt noch nicht gemacht, muss ich mir dann mal in Ruhe anschauen.

[simonpicos]

Danke erstmal für deine Mühe... Ist so auf jeden Fall viel schlanker und praktischer für Leute die sich mit CSS auskennen.

[GameTrexofficial]

Doofe Frage, aber sind die Tuts schon fertig, denn der Slider würd mich schon interessieren

[simonpicos]

Zitat von GameTrexofficial

Doofe Frage, aber sind die Tuts schon fertig, denn der Slider würd mich schon interessieren

Jops! Animationen Grundlagentutorial ist geschrieben und auch hier schon veröffentlicht, einfach mal auf meinem Profil schauen. (Teil 2 wartet noch auf Freischaltung)

Außerdem gibts hier eine neue Version vom Slider inkl. Download, Demo und Tutorial:


Schaut euch ruhig mal um