Dropdownmenu responsive maken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

.net developer

Hoi! Wij zijn auto.nl en wij verkopen auto's online. je bestelt bij ons een auto net zo makkelijk als een spijkerbroek. En bevalt ie niet? Dan stuur je 'm gewoon weer terug. En dat we dat goed doen bewijst onze hoge klanttevredenheid van een 9,3. Nu maken we de volgende stap bij auto.nl. We starten met fysieke winkels. Online zoeken, offline bekijken. Maar nog altijd, geen gedoe! Gewoon eerlijk, transparant en zonder zorgen een auto kopen.. Maar om dat waar te blijven maken en nóg beter te worden, zoeken we uitbreiding van ons development team. Wat ga je precies doen?

Bekijk vacature »

.NET developer

Functie Als .NET developer werk jij samen in een multidisciplinair ontwikkel team met 1-2 Senior .NET developers, twee front-end developers, Data Scientists en één UX designer. Als team werken jullie aan het ontwikkelen van een Cloud based applicatie en aan het stabieler maken van deze applicatie. Ook unit testing gaat erg belangrijk worden in jouw nieuwe functie. Samen met de Senior .NET ontwikkelaar wordt jij verantwoordelijk voor het ontwikkelen van de API. Jullie werken met veel data en incidenteel komen er ook data vraagstukken en zullen er wat queries gedraaid moeten worden. Dit betekend dat jij veel gaat werken met

Bekijk vacature »

Full stack developer Node.js

Functie Als fullstack JavaScript developer vind jij het uitdagend om op basis van concrete klantvragen nieuwe functionaliteiten te ontwikkelen. Bij voorkeur worden deze functionaliteiten op een bepaalde manier geprogrammeerd, zodat ze door meerdere klanten te gebruiken zijn. Je hebt dus vaak te maken met abstracte vraagstukken. Om dit te kunnen realiseren sta je nauw in contact met de product owner en/of klant. Je bent niet alleen onderdeel van het development team, maar hebt ook vaak contact met de product-owner en/of klanten om daardoor inzichten te verzamelen die leiden tot productverbeteringen. • Inzichten verzamelen bij de klant en/of product owner •

Bekijk vacature »

Senior PHP Developer

Als Senior PHP Developer bij Coolblue zorg je ervoor dat onze webshops elke dag een beetje beter zijn en coach je andere developers op de hard en soft skills. Wat doe je als Senior PHP Developer bij Coolblue? Als PHP Developer werk je met andere development teams samen om onze webshop zo optimaal mogelijk te laten werken en onze klanten blij te maken. Hoewel je een PHP Developer bent, sta je open om C# of Typescript in te zetten of te leren. Ook PHP Developer worden bij Coolblue? Lees hieronder of het bij je past. Dit vind je leuk om

Bekijk vacature »

Junior Software Developer

Functie omschrijving Wij zijn op zoek naar een Junior Software Developer!? Sta jij aan het begin van jouw loopbaan of heb jij misschien al enige ervaring? Vind jij het daarnaast belangrijk om jezelf constant te kunnen ontwikkelen en uitdagen? Lees dan snel verder! Voor een vooraanstaand softwarehuis in Nieuwegein ben ik op zoek naar een Junior Software Developer. De eigenaar van het bedrijf is ervan bewust dat je als junior nog een hoop kan leren, waardoor je de eerste maanden veel begeleiding en diverse trainingen krijgt. Daarna ga je samen met je collega's aan zowel kleine als grote projecten werken.

Bekijk vacature »

Developer Front-end

Functie omschrijving Front-end Developer gezocht! Wij zijn op zoek naar een front-end developer voor een organisatie in de regio Veenendaal die de eindverantwoordelijkheid op zich neemt van alles wat met design te maken heeft. Je hebt in deze functie een adviserende rol hiervoor moet je beschikken over een grote dosis vakinhoudelijke kennis. Je creëert unieke concepten door samen met collega’s en klanten te overleggen over aangeleverde designs. Hiermee draag jij je steentje bij aan de groeiambities van de klant. Jij wordt het vaste aanspreekpunt voor klanten wanneer het gaat over planningen, hierin is het jouw taak om alle betrokkenen goed

Bekijk vacature »

C#.NET Developer

Functieomschrijving We are looking for a dutch native speaker In deze uitdagende functie ga je werken als onderdeel van het development team, in de functie van C#.NET Developer, Je gaat maatwerk software bouwen voor diverse klanten. Ook optimaliseer je bestaande software en bouw je API koppelingen. Je bent vooral met back-end development bezig. Je krijgt veel vrijheid in deze functie en je krijgt de kans om mee te denken in bedrijfsprocessen. Deels thuiswerken is geen enkel probleem! Bedrijfsprofiel Deze organisatie is gevestigd in de regio van Boxtel. Het is van oorsprong een familiebedrijf, die gestart zijn met het bouwen van

Bekijk vacature »

Software Developer

Functie omschrijving Psst hé jij daar! Op zoek naar een nieuwe uitdaging als developer? Wacht niet langer en reageer direct. In deze functie ga je bij een familiebedrijf werken als developer. Je gaat maatwerk software ontwikkelen met de Microsoft stack. Je gebruikt technieken als C#, ASP.NET en MVC. Je werkt in een leuk team van andere developers. Je krijgt veel vrijheid in je werk en kan flexibel werken. Dagje thuiswerken? Geen probleem! Daarnaast is er veel ruimte om écht mee te denken met het bedrijf en met de klanten. Bedrijfsprofiel Deze organisatie is gevestigd in de regio van Boxtel. Vanaf

Bekijk vacature »

Traineeship Java Developer

Functie Wat ga je doen als Java Developer? Jij start via ons bij deze opdrachtgever als Trainee Java ontwikkelaar, tijdens het traineeship ga je in 1 jaar van de basis naar professioneel Java ontwikkelaar. Je start samen met een groep trainees, volgt de aangeboden cursussen en gaat aan de slag bij één van onze opdrachtgevers. Na een aantal maanden volgt de volgende opdracht. Door de groei in jouw rol kom je op steeds complexere opdrachten terecht. Veel afwisseling dus. Collega’s met ervaring helpen je bij deze groei en samen met jouw coach ga je een persoonlijke leerplan opzetten om jou

Bekijk vacature »

Implementatie specialist

Standplaats: Honselersdijk Aantal uren: 32 – 40 uur Opleidingsniveau: HBO werk- en denkniveau Ben jij de implementatie expert die onze klanten helpt bij het integreren van de Greencommerce software? Ben jij daarnaast communicatief sterk, denk jij graag in verbeteringen en heb je ervaring met ICT? Lees dan snel verder! Bedrijfsinformatie Jem-id is een grote speler op het gebied van software ontwikkeling. Zo zijn wij continu bezig met het ontwikkelen van de meest innovatieve software voor de AGF- en sierteeltsector. We creëren oplossingen die er toe doen en verbinden klanten niet alleen op technisch vlak, maar zoeken ook de verbinding in

Bekijk vacature »

Front-end React developer

Functie Het frontend team bestaat momenteel uit 4 dedicated front-enders en is hard aan het groeien! Ook werken er diverse designers waar je veel mee schakelt. Samen leveren jullie een essentiële bijdrage aan de applicaties die ze voor hun klanten realiseren, jij bent hierin de schakel tussen de eindgebruiker en de slimme backend. Je werkt in het frontend team samen met de backend teams en product owners om te zorgen dat onze applicaties een fijne gebruikerservaring opleveren. Ze werken o.a. met: React, Atomic design, Styled components, JavaScript / TypeScript, NPM, Webpack Blade templates, HTML, SCSS, Git flow. Eisen • HBO

Bekijk vacature »

Software Developer

Dit ga je doen Ontwikkelen aan de software dat beschikbaar is op de substations; Ontwikkelen in C++, C, Python en JavaScript. Daarnaast op een Embedded Linux omgeving, opgebouwd met containers en DevOps; Meewerken aan cyber security (OWASP); Uitvoeren/bouwen van geautomatiseerde testen in samenwerking met de Quality Specialist; Vertalen van wensen van de klanten/business naar werkbare/duurzame oplossingen. Hier ga je werken Als Software Ontwikkelaar kom je te werken bij een organisatie gericht op de (internationale) energiemarkt, waar wordt gewerkt voor het verwerven en verwerken van realtime, high quality data. Er wordt gewerkt vanuit het hart van de substations en direct voor

Bekijk vacature »

.NET developer

Functie Als senior .NET ontwikkelaar en aankomend lead developer ben jij in één van de drie development teams verantwoordelijk voor het volgende: • Jij hebt een oogpunt op modernisering en bent verantwoordelijk voor de technische staat en architectuur van de applicatie; • Jij bent verantwoordelijk voor het reviewen van de technische haalbaarheid van verschillende onderwerpen; • Jij bent verantwoordelijk voor een goede aansluiting binnen het multidisciplinaire team en de bijbehorende taken; • Jij bent verantwoordelijk voor het aandragen van verbetervoorstellen en ontwikkelstandaarden in zowel de techniek als architectuur; • Jij bent meewerkend voorman en ondersteunt en coacht jouw team op

Bekijk vacature »

Low Code Ontwikkelaar

In het kort Als Low Code Developer werk je aan projecten bij en voor onze klanten, waarbij je voor het ontwikkelen van de oplossingen een technisch low-code platform gebruikt. Samen met het team streef je naar de beste oplossing en bepalen jullie de juiste aanpak. Je rol is divers en je bent van begin tot eind betrokken bij de ontwikkeling zowel de back-end en de front-end van de applicatie. Naast de ontwikkeling en oplevering, breng je ook advies uit aan de klant waarom bepaalde keuzes worden gemaakt. Je bent dan ook communicatief sterk en kunt je keuzes goed (inhoudelijk) onderbouwen.

Bekijk vacature »

Ontwikkelaar Centrale Monitoring

Ontwikkelaar centrale Monitoring Functieomschrijving Wil jij een bijdrage leveren aan het onderhoud, opzetten en ontwikkelingen van technologieën van SSC-ICT, een van de grootste ICT-dienstverleners van en voor de Rijksoverheid? Je komt als monitorspecialist te werken bij team Operations Management Services. Dit team werkt aan het stabiliseren en waarborgen van een betrouwbare monitoromgeving voor 7 ministeries. Jij begeleidt het implementatieproces van de te monitoren technologieën, onder andere via management packs, connectoren en API's. Je hebt hiervoor veel contact met interne en externe klanten, die hun wensen op het gebied van monitoring aan jou doorgeven. Je beoordeelt deze wensen en komt met

Bekijk vacature »
 - Diov  -

- Diov -

04/10/2014 19:29:19
Quote Anchor link
Beste,

Ik heb een dropdownmenu waar men tot 3 niveau's ver kan gaan.
Deze wil ik nu ook responsive maken, maar weet niet hoe ik er aan moet beginnen.

De bedoeling is niet dat heel het menu weggaat, en dat er dan nog maar 1 symbooltje is.
Maar dat er 2 items weggaan, en vervangt wordt door het onderdeel "Meer".

Ga je met je muis over "Meer", dan zie je die 2 items.

Wordt je scherm nog kleiner, dan herhaald zich dit proces maar wordt er telkens 1 menu item minder getoont, en komt deze terecht onder het item "Meer".

Hoe kan ik dit het beste doen?
Kan dit enkel met CSS? Of ook met jQuery?

Misschien een handige tutorial voor dit?
Alvast bedankt!
Diov
 
PHP hulp

PHP hulp

08/11/2024 14:41:16
 
Phpnuke r

phpnuke r

04/10/2014 22:16:45
Quote Anchor link
Hallo,

Aan je post te zien denk ik dat je media queries nog niet kent. Met deze queries kun je een stukje CSS laten activeren INDIEN er aan een bepaalde voorwaarde word gedaan. Ik denk dat onderstaande stukje voor zichzelf spreekt.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<style>
@media only screen and (max-width: 900px), only screen and (max-device-width: 500px) {
  .background {background:red !important;}
  //zoek op CSS Media Queries voor meer dingen die je ermee kan
}
.background {background:blue;}
</style>


De kleur van alle elementen met de class .background zal worden veranderd op devices met <900px of devices met 'neppe' resoluties al bij 500px (mobieltjes hebben bijvoorbeeld 200 pixels breedte en weergeven de website op 450px. Vandaar dat ik het even nep noem)

De important is om even aan te geven dat het vaak voorkomt dat je in complicaties gaat zitten want al is het een media querie, betekent nog niet dat de media querie meer belangrijk is in css. Soms zul je niet zonder !important kunnen. Je ontdekt gauw genoeg hoe je hiermee kan spelen.


De menu
Persoonlijk maak ik altijd een tweede menu aan voor de mobiele versie. Dit heeft zo zijn redenen. Misschien is dit voor jouw ook handig. Dit hoeft niet meer code te kosten: zelfde elementen indeling, maak er alleen een functie(/static class) van en plaats ze in twee divs: mobile-menu, desktop-menu. Op het moment dat het beeldscherm klein is zal mobile-menu worden weergegeven en anders desktop. Eventueel kun je met mobile-menu nog wel wat spelen dat het in het begin nog aardig op desktop lijkt.

Betreft 'Meer tonen', volgens mij zou je er uit moeten komen als je het nut van de media queries goed kent.

(p.s test max-device-width wel even)

Zoom op mobieltjes uitschakelen
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
Gewijzigd op 04/10/2014 22:19:37 door phpnuke r
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.