CSS3 Circular Menu

Ich habe this schöne kreisförmige Menü gefunden und ich habe Mühe, es an meine eigenen Bedürfnisse anzupassen.CSS3 Circular Menu

Ich brauche nur vier Elemente aus diesem Menü und ihre 'Breite' (horizontaler Abstand) sollte erhöht werden.

Ich habe den ursprünglichen Code in diesem fiddle. Die Version mit vier Artikeln ist here.

Wie bereits erwähnt, versuche ich, diesen leeren Raum zwischen zu füllen, indem ich ihre Größe vergrößere, weil ich dort mehr Text einfügen möchte.

Ein Teil der CSS, die ich denke, es relevant sein könnten:

.csstransforms .cn-wrapper li { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    overflow: hidden; 
    margin-top: -1.3em; 
    margin-left: -10em; 
    width: 10em; 
    height: 10em; 
    font-size: 1.5em; 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    transition: all .3s ease; 
    -webkit-transform: rotate(76deg) skew(60deg); 
    -moz-transform: rotate(76deg) skew(60deg); 
    -ms-transform: rotate(76deg) skew(60deg); 
    transform: rotate(76deg) skew(60deg); 
    -webkit-transform-origin: 100% 100%; 
    -moz-transform-origin: 100% 100%; 
    transform-origin: 100% 100%; 
    pointer-events: none; 
}

Quelle

2013-10-11 Zubzob

Sie sind sich bewusst, dass der Link auf der oberen rechten Ecke der Demo-Seite zu einem Artikel führt die Technik im Detail tatsächlich zu erklären, nicht wahr ...? – CBroe

Ich arbeite an einer Lösung, aber ich habe einen Kommentar: Eine gerade Anzahl von Elementen wird nicht so cool aussehen wie eine ungerade Zahl, weil sie nicht in der Mitte herauskommen kann. Könnten Sie 5 oder 3 benutzen? –

Dies wird wahrscheinlich durch kompiliertes CSS mit etwas wie Less oder Compass getan. Wenn Sie dies von Hand ändern möchten, ist das Betrachten der [interaktiven Demo] [1] sehr hilfreich. Grundsätzlich können Sie die Schrägstellung der Li's (die Parallelogramme) anpassen und die Schrägstellung und Drehung der Anker so lange anpassen, bis Sie die gewünschte Form erhalten. Leider würde es viel Versuch und Irrtum erfordern, den richtigen zu finden. Ich würde vorschlagen, eine Art weniger kompiliert, um es zu tun oder eine einmalige Javascript-Methode, um es zu berechnen. [1]: http://tympanus.net/Tutorials/CircularNavigation/interactivedemo/index.html –

Sie müssen nur zu Chaos mit dem transformskew.

transform: rotate(...) skew(40deg);

Siehe diese JSFiddle für die Lösung.

(P. S. Das ist eine Art und Weise kühlen Menü Animation ist!)

Quelle

2013-10-11 22:46:32

ah Mann, ich wusste, dass ich zu schnell aufgegeben habe. Danke für deine Antwort :) – Zubzob

So geht's @SuperScript. Das ist ein Killer CSS – Thomas

CSS3 Circular Menu

Antwort

Verwandte Themen