Verticaal CSS menu horizontale flyout, geanimeerd door css3

[Verwijderd]

Hallo,

Ik ben al een flink eind op weg met mijn menu voor *snip* maar krijg de subpagina's niet gesloten, en geopend na hover. Het enige wat er gebeurt na mijn pogingen is dat de letters iets meer naar rechts verschuiven. Ik wil puur CSS3 gebruiken dus geen plaatjes en js. Ik heb gezocht op tweakers en google maar dit is veelal gebaseerd op statische pagina's waar je zelf nieuwe pagina's aan het menu moet toevoegen.

Verder lijkt het me handig om zoals in dit menu http://www.cssplay.co.uk/menus/latest-flyout.html een '>' teken rechts van mijn tekst te hebben bij de items waar submenu's voor zijn.

Mijn huidige code:

code:

#sb-container{position:absolute; left:20px; top:350px; list-style: none; }

#sb-container ul { zoom: 1;

 background-image:      -o-linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
     background-image:              -moz-linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
         background-image:            -webkit-linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
             background-image:        -ms-linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
                 background-image:      linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
                    
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF47AAFF,EndColorStr=#FFFFFFFF);


-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF47AAFF,EndColorStr=#FFFFFFFF)"   
 }

#sb-container ul li {list-style: none; margin: 0; padding: 0; border: none; zoom: 1;

background-image:      -o-linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
     background-image:              -moz-linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
         background-image:            -webkit-linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
             background-image:        -ms-linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
                 background-image:      linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
                     
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF47AAFF,EndColorStr=#FFFFFFFF);

-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF47AAFF,EndColorStr=#FFFFFFFF)" }

#sb-container ul a {padding: 10px 10px 10px 15px; zoom: 1;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF47AAFF,EndColorStr=#FFFFFFFF);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF47AAFF,EndColorStr=#FFFFFFFF)";
       -o-transition:  color .55s linear;
       -moz-transition:  color .55s linear;
       -webkit-transition:  color .55s linear;
        -ms-transition:  color .55s linear;
       transition:  color .55s linear;
font-weight : bold; display: block; color: #5070af;
 border-bottom: 1px solid #7Da9e5; border-top: 1px solid #4695d3; font-family: Verdana, Helvetica , sans-serif ;list-style: none;}


#sb-container ul a:hover {padding: 10px 10px 10px 15px; color: #ccccff;

-o-transition-property:color, background-image, background, background-color;  
 -o-transition-duration: .55s, .1s;  
 -o-transition-timing-function: linear, ease-out;
       -moz-transition: color .55s linear;
       -webkit-transition: color .55s linear;
        -ms-transition: color .55s linear;
       transition: color .55s linear;
   background-image:      -o-linear-gradient(left, #2F272f, #3a334f, #4a70cb,  #1a82f7);
        background-image:      -moz-linear-gradient(left, #2F2727, #1a82f7);
         background-image:      -webkit-linear-gradient(left, #2F2727, #1a82f7);
           background-image:      -ms-linear-gradient(left, #2F2727, #1a82f7);
            background-image:      linear-gradient(left, #2F2727, #1a82f7);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF2F272F,EndColorStr=#FF1A82F7);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF2F272F,EndColorStr=#FF1A82F7)";
        
      
}/*
#sb-container ul ul li a {padding: 10px 10px 10px 15px; display:none }
#sb-container ul ul li a:hover {padding: 10px 10px 10px 15px; display:block; position:relative; left:200px }
#sb-container ul ul ul li a {padding: 10px 10px 10px 15px; display: none;}
#sb-container ul ul ul li a:hover {padding: 10px 10px 10px 15px; display:block; position:relative; left:200px }
*/
</ul>

Aan t eind kun je mijn pogingen om het werkend te krijgen zien in de uitgeschakelde code. Ik heb tot 4 niveaus diep pagina's dus er moet nog een #sb-container met 4 ul's bij maar dit was voor de test.
Het leek mij tof om met behulp van 'animation' een snel naar rechts schuivend submenu te krijgen bij hover.

Oplettende lezers kunnen zien dat ik heb geprobeerd om vloeiende achtergrondsovergangen te krijgen als mensen over menu items hoveren. dit gebeurt helaas niet, iemand enig idee waarom? ik heb in de w3 specs gekeken dat de enige voorwaarde is voor een transition te laten werken op een gradient (background-image) dat er evenveel stops moeten zijn in beide gradients. en daar voldoet ie aan.

[ Voor 0% gewijzigd door RobIII op 24-08-2011 00:21 ]

[RobIII]

Een paar puntjes:
1) Als je je probleem wil illustreren, gebruik dan een uitgeklede testcase met enkel relevante(!) HTML/CSS/Whatever om je probleem te reproduceren. Alle andere zaken van de pagina gelieve achterwege te laten. Zodra je linkt naar een volledige site is dat (al dan niet (on)bedoelde/verkapte) spam.
2) Zorg op z'n minst dat je code leesbaar is. Deze puinhoop heeft niemand iets aan.

[Verwijderd]

1. sorry, dacht om het verhaal wat context te geven niet alle inhoud van elke pseudo weg te halen. maar nu je het zegt goed idee om niet al mijn codeerwerk prijs te geven en dacht eveneens dat het handig was om een beeld te geven van hoe het eruit ziet wat ik bedoel.

2. hmm, elke alfabeet kan dit lezen lijkt me?

[RobIII]

Verwijderd schreef op woensdag 24 augustus 2011 @ 01:13:
maar nu je het zegt goed idee om niet al mijn codeerwerk prijs te geven

Het heeft niets te maken met 't prijsgeven van codeerwerk maar met 't feit dat wij tussen de bomen in 't bos op zoek mogen naar een naald
Daarbij helpt een testcase voor jezelf ook om makkelijk zaken uit te sluiten als mogelijke oorzaken van problemen, je wordt niet afgeleid door allerhande zaken die niet relevant zijn en je kunt er lekker mee stoeien zonder zaken te breken.

Verwijderd schreef op woensdag 24 augustus 2011 @ 01:13:
2. hmm, elke alfabeet kan dit lezen lijkt me?

You're kidding me
Ik lees al ... *reken reken* ... ruim 25 jaar code en ja, na lang staren kom ik er wel uit. Maar waarvoor denk je dat men altijd zo bezig is met 't fatsoenlijk indenten van code?

Cascading Stylesheet:

#sb-container{position:absolute; left:20px; top:350px; list-style: none; }

#sb-container ul { zoom: 1;

 background-image:      -o-linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
     background-image:                 -moz-linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
         background-image:               -webkit-linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
             background-image:           -ms-linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
                 background-image:         linear-gradient(left, #47aaff, #ABCBFF, #C3D3EA, #fff);
                    
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF47AAFF,EndColorStr=#FFFFFFFF);


-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF47AAFF,EndColorStr=#FFFFFFFF)"   
 }

Versus:

Cascading Stylesheet:

#sb-container {
    position: absolute;
    left: 20px;
    top: 350px;
    list-style: none;
}

#sb-container ul {
    zoom: 1px;
    background-image: -o-linear-gradient(left, #47aaff, #abcbff, #c3d3ea, #fff); 
    background-image: -moz-linear-gradient(left, #47aaff, #abcbff, #c3d3ea, #fff); 
    background-image: -webkit-linear-gradient(left, #47aaff, #abcbff, #c3d3ea, #fff); 
    background-image: -ms-linear-gradient(left, #47aaff, #abcbff, #c3d3ea, #fff); 
    background-image: linear-gradient(left, #47aaff, #abcbff, #c3d3ea, #fff);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff47aaff,EndColorStr=#ffffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff47aaff,EndColorStr=#ffffffff)";
}

Wat lees jij liever?

Doe op www.google.com eens een view source en stel jezelf dan nog eens de vraag: "elke alfabeet kan dit lezen lijkt me?". Natuurlijk, de HTML is er, maar die is verre van "human readable". Er zijn goede redenen om dit soort optimalisaties toe te passen (bandbreedte besparen, snelheid, whatever; uiteindelijk gaat er er om dat de zooi machine readable is (en blijft)). Maar voor 't posten van code op een forum waar mensen zich over je probleem moeten buigen kun je op z'n minst een beetje moeite doen de code voor anderen leesbaar te maken en geen complete lettersoep dumpen. En dat is nog maar uit beleefdheid; ik zie niet in waarom je zélf in deze brei zou willen werken, hier kom je zelf toch ook geen wijs uit

[ Voor 107% gewijzigd door RobIII op 24-08-2011 01:46 ]

[OkkE]

Voor een testcase en om het leesbaar te houden kun je het beste even de verschillende vendor-prefix gradients uit je CSS halen. Niet relevant voor het in- en uitklappen van je menu. En ik mis op dit moment je HTML van het menu.

Misschien even in http://jsfiddle.net/ een testcase maken?

Een paar tips:
[list]
• Met position: absolute nemen je sub-menu's geen ruimte in.
• Via li:hover ul spreek je alleen je "actieve" sub-menu aan.
• De ">" zou je eventueel via de a::after kunnen toevoegen.