webite menuutje

Status
Niet open voor verdere reacties.

JMo

Gebruiker
Lid geworden
22 dec 2012
Berichten
106
De site www.stichting-terp.nl is een eenvoudige site met
een spry menu.
Dit menu werkt op de pc met chrome (Versie 79.0.3945.88 (Officiële build) (64-bits))en ook firefox naar wens onder Windows 10.

Hoe kan het dat bijv. een tablet en een telefoon met android het menu steeds moet wisselen tussen de categoriën van het menu?
M.a.w. dit werkt niet goed op android. Waarom niet?:shocked:
 
Ik denk dat die SpryBar niet echt gemaakt is voor mobieltjes en tablets.
Doordat je haast al je divjes op absolute zet, zonder gebruik van een mooie container-div is je site totaal niet responsive.

Waarom gebruik je niet het Bootstrap Framework? Dan kan je nog meer zorgen opzij zetten en eenvoudig een site bouwen die netjes schaalbaar zijn op elk formaat.

Ook in dat framework zit al een basis voor een mooi menu die responsive is.
 
Laatst bewerkt:
Dan weet ik niet precies welke versie er nodig is, of er een live versie van is en welke files ik nodig heb voor het framework (css en js).
 
Waarom gebruik je gewoon niet de nieuwste? Versie 4.4.1 op moment van schrijven.
En als je verder rondkijkt kijkt hebben ze ook voorbeelden. En hier kan je de werking van het grid in werking zien.
 
Laatst bewerkt:
Kun je deze gratis gebruiken? Zonder link naar een host?
 
Ik ben best tevreden over het menu alleen het aanvinken op een telefoon en tab lukt niet netjes..
 
Kun je deze gratis gebruiken? Zonder link naar een host?

Het is gewoon open source en gebaseerd op javascript en css.
Je kan het zelf uploaden naar je eigen host, maar je kan ook linken naar een externe host (CDN).

Er mankeert nog meer aan je site, want het is niet bepaald gebruiksvriendelijk voor mobieltjes. Dat is de reden waarom ik Bootstrap adviseer. Er zijn nog andere grid-frameworks, maar Bootstrap is wel één van de meest gebruikte daarvan.

Ook Google zal doordat je site niet goed geschikt is lager beoordelen.

Hier werken de knoppen hier trouwens prima. Echter moet je wel precies drukken. Bij de nav-bar in Bootstrap is het aanraakvlak juist groter.
 
Laatst bewerkt:
Voor het menu op je website heb ik een stukje css en javascript gemaakt, ter vervanging van het huidige script/css van het menu. Test eerst het bestandje uit de bijlage even apart uit dan zie je hoe het werkt. Het werkt op smartphone, tablet en desktop. De kleurtjes kan je zelf aanpassen.

Dit stukje heb ik toegevoegd zodat je een 'Menu' knop op smartphone hebt.
Code:
<div class="TogglerMobile">
    <button type="button">Menu</button>
</div>
<div id="ap_topMenubar" class="MobileContainer">

Vergeet deze regel niet voor smartphone.
Code:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

De <script src=".."> regel hoort onderaan, vlak boven </body>
 

Bijlagen

  • Menu.zip
    2,4 KB · Weergaven: 18
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan