Jquery / responsive / CSS, elementen tonen

[NitSuA]

Ik heb een website waarbij ik onder een bepaalde resolutie naar een mobile menuweergave wil.

Hiervoor heb de volgende CSS:

code:

.menu{display: block;}
.menuicon: {display: none;} 

@media screen and (max-width: 450px) {
  .menu {display: none;}
  .menuicon: {display: block;} 
}

en de volgende jquery:

code:

$(".menuicon").click(function(){
    $(".menu").slideToggle("fast");    
});

Wat gaat er niet goed:

Op zicht werkt het allemaal, maar wanneer ik in responsive modus zit, en de jquery uitvoer (uit en weer in), en vervolgens de schermgrootte aanpas naar groot formaat, is mijn menu nog steeds weg.. Op zich logisch omdat hij is verborgen door de jQuery, maar.. hoe los ik dit nu op?

Ik zat te denken aan triggeren op schermgrootte in Jquery en dan het menu weer op visible zetten, maar het voelt een beetje vies ;-)

[NMe]

Kun je die "slideToggle" niet gewoon met CSS-animaties doen? Dan kun je gewoon met classes werken die je onClick toevoegt aan je menu, en die class kun je dan per weergave stylen zoals je wil.

Verder: Waar hoort mijn topic?

PRG>>WEB

[NitSuA]

idem probleem, ook bij css, als ik in responsive view het menu hide, komt hij in normale view niet meer automatisch terug.

[NMe]

Natuurlijk wel.

Cascading Stylesheet:

.menu.hidden { top: auto; }
@media screen and (max-width: 450px) {
  .menu.hidden { top: -1000px; }
}

Vervolgens een transition op die top gooien en je hebt het nog leuk geanimeerd ook. De rest is een kwestie van met javascript de class toevoegen bij de eerste klik (en de class eventueel weer verwijderen na een resize).

[NitSuA]

ok, ben eruit. Voor degene die tegen hetzelfde probleem aanlopen:

http://www.fourfront.us/b...w-width-and-media-queries

dus: trigger je javascript op je media querie, maar dan op een ander element. Dit werkt beter dat de resize in jquery, omdat window width niet precies overeen komt met media query width.

Bedankt voor de hulp toch!!

[Bosmonster]

Dit is nou een van die zeldzame situaties waar !important een uitkomst kan bieden. Waar je met JS sommige waardes (bijvoorbeeld display) zet, kun je die daarmee met je responsive CSS weer overschrijven.

Laat je in ieder geval niet teveel verleiden door bovenstaande "javascript-responsiveness", want dat is zelden een goede uitweg en komt meestal voort uit een gebrek aan responsive CSS-kennis/ervaring.

[ Voor 9% gewijzigd door Bosmonster op 17-03-2014 16:12 ]