[JS/JQUERY] Horizontaal slide menu

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

C# .NET Ontwikkelaar

Bedrijfsomschrijving Begin jaren 60' is de organisatie begonnen als gespecialiseerde werkmaatschappij om invulling te geven aan de toenemende vraag naar industriële automatiseringsoplossingen. De organisatie heeft daardoor al ruim 45 jaar ervaring met optimalisatie van processen binnen de industriële sector. De laatste jaren hebben zij zich met name gespecialiseerd in de verticale integratie van de werkvloer met de hoger gelegen management informatie systemen. De organisatie kenmerkt zich als innoverend, meedenkend en informeel. Binnen het team heerst er een positieve teamspirit met een gezonde dosis ondernemerschap en humor. Werk moet immers ook leuk zijn, toch? Functieomschrijving Ben jij een C# Developer die

Bekijk vacature »

Solution Developer Power BI Python

Data Engineer Power BI Python SQL DAX (Azure) Full-time Location: Rotterdam Contract Duration: 6months (temp or freelance) Background The Integrated Operations Benelux team consist of various roles that make Excellent Execution a success. One of these roles is a (contract) role of a Business Solutions Developer. Less time spent on Running the Business to reinvest in Growing the Business whilst Improving Customer and Employee Satisfaction is the vision of Integrated operations. Integrated Operations brings Customer Development, Supply Chain and Sales within Benelux together in realizing excellent execution. The 4 principles driving Integrated Operations are: end 2 end ownership, maximized automation,

Bekijk vacature »

DevOps Engineer Welkomstbonus € 5.000,-

DevOps Engineer senior Welkomstbonus van € 5.000,- Bij T2 zorgen we goed voor elkaar en doen wij leuke dingen met leuke mensen. We zorgen voor uitdagende opdrachten zodat jij jezelf onbeperkt kan blijven ontwikkelen. Ben jij een ervaren systeembeheerder DevOps en wil je het beste uit jezelf halen? Dan ben je van harte welkom bij T2 en ontvang je onze welkomstbonus ter waarde van € 5.000,-. Er werken leuke mensen bij T2, die op een professionele en informele wijze met hun carrière en collega’s omgaan. Dat is de basis voor succes! Het is vanzelfsprekend dat je met de nieuwste technieken

Bekijk vacature »

Software Engineer

Passie voor code, droom jij ’s nachts je bugs weg, is coderen je hobby en je werk. Dan ben jij de perfecte kandidaat voor onze e-ICT afdeling in Doetinchem! Wat ga je doen? Als Software Engineer ben je met jouw scrumteam van A tot Z betrokken bij het (door)ontwikkelen van de software. Je maakt daarbij gebruik van de nieuwste technieken waaronder o.a. Azure, .Net core, Docker en werkt aan mooie producten zoals RFID, microservices, Apps en een integratieplatform gebaseerd op Azure technologieën. Dit alles doe je volgens de Agile-methodiek en bent naast de dagelijkse stand-up betrokken bij de reviews, sprintplanning

Bekijk vacature »

Java developer (medior & senior)

Op zoek naar leuke collega's waarmee je kunt lachen, gave projecten en een ambitieuze werkgever die heel goed voor je zorgt? Aangenaam: Profit4Cloud! Wij zijn nu met 55 collega's en werken sinds 2015 vanuit 5 vestigingen aan mooie projecten met een fijne groep collega's die allemaal maar één ding willen: mooie en slimme software-oplossingen ontwikkelen met de nieuwste technieken. We zijn goed bezig en zijn daarom op zoek naar versterking: Java Software Engineers met ervaring in back-end en front-end software ontwikkeling. Ben jij de Java Software Engineer die enthousiast wordt van mooie projecten waar binnen jij een belangrijke rol speelt?

Bekijk vacature »

Data Engineer

Data Engineer Functiebeschrijving: Wil jij een bijdrage leveren aan het veiliger maken van onze samenleving? Door optimale toepassing van data ondersteunen wij onze klanten in de veiligheidsketen met nieuwe en betere inzichten om hun taken optimaal uit te voeren. Kom je ons team versterken? Wat ga je doen? Als Data Engineer ontwerp en ontwikkel je data verwerkingsprocessen. Grote hoeveelheden data vanuit verschillende bronnen en in verschillende formaten bewerk jij tot een bruikbare dataset voor geavanceerde data analyse en visualisatie. Enerzijds ben je de architect, die nieuwe inrichtingsconcepten voorstelt, specificeert en realiseert, anderzijds ben je de ‘doener’, die dagelijkse issues snel

Bekijk vacature »

Full-stack .NET developer gezocht, Goeree-Overflak

Ben je een .NET software developer en op zoek naar een professionele werkomgeving binnen een wat groter innovatief en ambitieus bedrijf? Waar sprake is van een uitgebreid applicatielandschap met elke dag nieuwe uitdagingen, waar alles mogelijk is, binnen een goede collegiale sfeer? Lees dan verder! Voor een bedrijf in Goeree-Overflakke zijn we momenteel op zoek naar een ervaren software developer. De IT afdeling bestaat uit circa 60 mensen waarvan zo'n 15 developers. Voor de recente architectuur wordt gebruikt gemaakt van de nieuwste technieken waaronder .NET Core, Docker en Angular. Echter bestaat het applicatielandschap uit een groot aantal verschillende applicaties waarbij

Bekijk vacature »

Fullstack ontwikkelaar

Bedrijfsomschrijving Bij het accepteren van dit aanbod kom je terecht binnen een veelzijdige organisatie waar een goede sfeer hangt. Zij zijn gewend dagelijks met elkaar te lunchen en ruimte is voor een potje Mario. Als Fullstack ontwikkelaar ga je je op projectbasis bezighouden met het ontwikkelen van content voor diverse opdrachtgevers. De projecten waar je aan gaat werken zullen verschillende qua omvang. Hierbij kan je rekening houden met een gemiddelde doorlooptijd van een half jaar, waarbij er meerdere projecten naast elkaar kunnen lopen. De nadruk zal liggen op ontwikkeling aan de front-end, maar ook op het gebied van ontwikkeling aan

Bekijk vacature »

Lead Developer

Discipline Information Technology Location Venlo (NL) Hours a week 40 As our Lead Developer You will be responsible to create an architectural blueprint in collaboration with product, owner and development team. You align domain architecture with enterprise architecture and you create, influence and apply domain-specific architecture views & viewpoints. You have overview and you can balance long term and near-term priorities What you will do Design solution architecture to ensure a scalable, performant, highly available secure software product Drive adoption of technology standards within a domain Hands-on development of processes and applications in the ecosystem Guide implementations (data cleanup procedures,

Bekijk vacature »

IT-traineeship junior software ontwikkelaar

Zoek jij een stevige uitdaging en de mogelijkheid om veel nieuwe dingen te leren in een dynamisch vakgebied? Doe mee aan ons IT Professional Program en ontwikkel jezelf tot software engineer! Je begint met een opleidingstraject van ongeveer 4 maanden. Hierin ga je aan de slag met verschillende technieken die je op conceptueel niveau leert te overzien en interpreteren. Onderwerpen die aan bod komen zijn o.a. programmeren (Java/C#/Python), Object Oriëntatie, Databases, Webservices & webtechnologieën, Domain Driven Design en Continuous Integration/Continuous Delivery. Sommige van deze onderdelen sluit je af met een examen en bijbehorende certificering. Het opleidingstraject zelf sluit je af

Bekijk vacature »

C# backend developer, Rotterdam

Voor een grote organisatie in Rotterdam zijn we op zoek naar iemand met ruime ervaring in het ontwikkelen van applicaties in .NET C#. Het gaat hier om een organisatie met een maatschappelijke impact. Hun systemen zijn gericht op een groot aantal klanten waarbij het belangrijk is dat de applicaties helder, toegankelijk en up-to-date zijn. Als .NET C# developer werk je aan uiteenlopende applicaties, APIs en het interne framework. Dit doe je binnen een SCRUM team en meedenkt binnen het hele proces. Het team bestaat uit meerdere C# developers variërend van medior tot senior. Er is dus veel kennis en ervaring

Bekijk vacature »

High Tech Software Developer (C#.NET)

(Senior) High Tech Software Developer (C#.NET) (C#/ .NET. / WPF/Prism. Winform/CAB, WCF) Intro Are you a Software Professional and do you have experience in developing software in an object-oriented way using C#/ .NET? And do you have profound knowledge of full system software development from the embedded platform up-to the operator facing applications. Then I have the perfect position for you! For our client, a fast-dynamic technical company, we are looking for several Senior Software Developers (C#.NET). You will be part of the Software team, You will be end-to-end responsible for realization of software in C# in the software department,

Bekijk vacature »

Senior C# developer

Samen met het development team zorg je ervoor dat alle systemen achter de schermen vlekkeloos werken. Hoe word ik C# Developer bij Coolblue? Als C# developer doe je regelmatig mee aan brainstormsessies over user experience, data en task flow met de UX Designer, Product Owner en Data Scientist in je team. Daarnaast schrijf je op zichzelf staande, consistente en testbare code die goed onderhoudbaar en toekomstbestendig is. Ook C# developer worden bij Coolblue? Jonne legt je uit hoe je dat doet. Dit vind je leuk om te doen Werken met verschillende soorten data-opslag, zoals Oracle of Dynamo/Cosmos. Problemen oplossen met

Bekijk vacature »

Ervaren full-stack C# developer, .NET CORE, Typesc

Voor een ambitieuze en snelgroeiende organisatie de regio Rotterdam zijn we momenteel op zoek naar een .NET C# developer. De organisatie bestaat inmiddels ruim 15 jaar en heeft een systeem ontwikkeld waarmee bedrijven de informatie van grote en complexe projecten beter kunnen managen. Dit systeem is geheel webbased. Om hun globale ambities waar te maken zijn ze recentelijk begonnen het systeem geheel te herbouwen met de nieuwste technieken. Denk hierbij aan technieken als .NET CORE, Typescript, React, Kubernetes en Azure. Niet alleen betekent voldoende nieuwe technische uitdaging maar ook betekent dit dat je voor 80 tot 90% van je tijd

Bekijk vacature »

Mobile App Developer

Ons Mobile ontwikkelteam zoekt een fanatieke Mobile App Developer. Ben jij creatief en heb je passie voor het ontwikkelen van apps? Dan zijn wij op zoek naar jou! Jouw baan ChipSoft heeft al diverse apps uitgebracht en het aantal gebruikers hiervan neemt snel toe. De apps doen het erg goed bij de zorginstellingen. Je kunt hierbij denken aan apps verpleegkundigen, thuiszorgmedewerkers, de logistieke dienst en - natuurlijk - de artsen zelf. Door jouw hands-on mentaliteit, eigenwijsheid en technisch inzicht kun je nauwkeurig herbruikbare software schrijven. Die software sluit naadloos aan op onze ‘back end’ (HiX, onze ICT-totaaloplossing voor de zorg).

Bekijk vacature »
Wouter De Schuyter

Wouter De Schuyter

24/07/2011 00:55:37
Quote Anchor link
Beste PHPHulp leden,

Ik heb niet echt veel kennis van jQuery en heb ook al het een het ander geprobeerd maar raak niet echt vooruit.
Het is beste wat ik kan met jQuery is de tekstkleur van de links rood maken wanneer je erover gaat met de muis en als de muis terug uit het menu gaat alles terug op het origineel kleur zetten..

Daarom heb ik een test layout gemaakt en hoop dat jullie mij hierbij kunnen helpen om een slide menu met jQuery te maken.

Wat ik juist bedoel met een "slice menu" is dat je een bepaalde actieve knop hebt en als je over een andere knop gaat de background van de huidige knop naar de andere slided..

Is er iemand die weet met welke functies en hoe ik hier juist aan begin?

Dit is alvast de broncode van de test pagina, die overigens hier online te bekijken is: http://uploads.wouterds.be/download/9/phphulp.html/

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test JavaScript Project Layout</title>
<style type="text/css">
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #333;
        background: url('http://uploads.wouterds.be/download/5/body_bg.png/') top left repeat;
    }
    div#wrapper {
        margin: 50px auto;
        border: 1px solid #CCC;
        background: #FAFAFA;
        width: 500px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    div#wrapper div#header {
        font-size: 150%;
        padding: 10px 0 20px 15px;
    }
    div#wrapper div#menu {
        background: #EEE;
        padding: 5px 0;
        border: 1px solid #CCC;
        border-left: 0;
        border-right: 0;
    }
    div#wrapper div#menu a {
        color: #151515;
        text-decoration: none;
        padding: 5px 10px;
    }
    div#wrapper div#menu a:hover, div#wrapper div#menu a.active, div#wrapper div#menu:hover a:hover, div#wrapper div#menu:hover a.active:hover {
        background: #DDD;
    }
    div#wrapper div#menu:hover a.active {
        background: none;
    }
    div#wrapper div#content {
        line-height: 20px;
        padding: 5px 20px;
    }
    div#wrapper div#footer {
        text-transform: uppercase;
        font-size: 10px;
        font-style: italic;
        text-align: center;
        color: #555;
        padding: 5px;
        border-top: 1px solid #CCC;
        letter-spacing: 2px;
        word-spacing: 2px;
    }
</style>
<script type="text/javascript" src="http://uploads.wouterds.be/download/6/jquery-1.5.2.js/"></script>
<script type="text/javascript">
$(function(){
    $('#menu').children('a').mouseover(function() {
        $(this).css('color', 'red');
    }); // Kleur tekst rood wanneer muis over knop gaat
    $('#menu').mouseleave(function() {
        $(this).children('a').css('color', 'inherit');
    }); // Zet kleur terug op origineel als muis uit het menu gaat
});
</script>
</head>
<body>
    <div id="wrapper">
        <div id="header">Test JavaScript Project</div>

        <div id="menu">
            <a href="#" class="active">About</a>
            <a href="#">Blog</a>
            <a href="#">Services</a>
            <a href="#">History</a>
            <a href="#">Scripts</a>

            <a href="#">Contact</a>
        </div>
        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget libero et enim ullamcorper condimentum ut et elit. Curabitur interdum arcu mollis velit imperdiet vitae condimentum urna tristique. Etiam faucibus ligula sed est venenatis a fermentum nisi facilisis. Sed libero diam, suscipit a tempus eget, egestas vel est. Aliquam erat volutpat.</p>
            <p>Vestibulum ut aliquam risus. Suspendisse sit amet arcu tortor, eget bibendum orci. Morbi eleifend sagittis hendrerit. Donec in urna eget mi consequat mattis. Etiam bibendum sem non massa lobortis vitae hendrerit ligula iaculis.</p>
            <p>Aliquam elementum felis molestie libero tincidunt ut gravida ante ultricies. Proin feugiat sapien non erat condimentum sollicitudin. Pellentesque eget ipsum quis ipsum lacinia ullamcorper at nec urna. Fusce in massa in elit venenatis lobortis. Aenean condimentum tempor laoreet.</p>
        </div>

        <div id="footer">&copy; 2011 All Rights Reserved To WouterDS</div>
    </div>
</body>
</html>


Dank bij voorbaat,
met vriendelijke groeten,
Paradox
 
PHP hulp

PHP hulp

28/01/2021 07:14:06
 
Vincent Huisman

Vincent Huisman

24/07/2011 08:54:51
Quote Anchor link
ik denk dat je het beste een nieuw divje er voor kunt maken en die dan met animate naar een nieuwe margin-left kunt doen
 
John Acid

John Acid

24/07/2011 09:29:19
Quote Anchor link
De kleuren van je links kun (ik zou haast zeggen; moet) je gewoon met CSS opmaken, hoeft verder geen javascript en jquery aan te pas te komen.
Gewijzigd op 24/07/2011 09:42:15 door John Acid
 
Maarten PHP

Maarten PHP

24/07/2011 11:18:34
Quote Anchor link
Je kan ook het systeempje gebruiken van http://uploads.wouterds.be/uploaded_files/
 
The Force

The Force

24/07/2011 12:17:38
Quote Anchor link
Geen idee waar John en Maarten over aan het praten zijn, maar wat Vincent zegt klopt wel.

Ter aanvulling: als je met de muis over een li gaat dan kan je met http://api.jquery.com/position/ de positie opvragen (van links). Die waarde gebruik je voor de animatie. Als je met de muis weg gaat dan vraag je met position de waarde op van het actieve element en doe je een animate daar naar toe.
 
John Acid

John Acid

24/07/2011 13:28:46
Quote Anchor link
Paradox Nvt op 24/07/2011 00:55:37:
Beste PHPHulp leden,

Ik heb niet echt veel kennis van jQuery en heb ook al het een het ander geprobeerd maar raak niet echt vooruit.
Het is beste wat ik kan met jQuery is de tekstkleur van de links rood maken wanneer je erover gaat met de muis en als de muis terug uit het menu gaat alles terug op het origineel kleur zetten..




@TheForce;
Zoals je kunt lezen heeft Paradox het over de hover op de links,volgens mij via jquery, dit kan/moet gewoon met CSS aangezien alle browsers, ook de IE versies, dat ondersteunen.
Daar had ik het over, dat is toch vrij duidelijk, lijkt mij.
Gewijzigd op 24/07/2011 13:51:20 door John Acid
 
Wouter De Schuyter

Wouter De Schuyter

27/07/2011 21:40:19
Quote Anchor link
@The Force, ze zijn inderdaad niet echt mee met wat ik bedoel..
Bij deze ga ik het nog eens herhalen, die links die rood worden als je erover gaat is het beste wat ik kan met jQuery waarmee ik dus wou aantonen dat ik er niet echt verstand van heb en echt wel veel hulp nodig heb..

Wat ik er tot nu toe dus van afleid is dat ik in de navigatie div (#menu) een extra div steek met een bepaald kleur dat dus eigenlijk de bewegende achtergrond wordt?
Gewijzigd op 29/07/2011 12:13:03 door Wouter De Schuyter
 
Wouter De Schuyter

Wouter De Schuyter

29/07/2011 12:13:15
Quote Anchor link
Bump
 
Wouter De Schuyter

Wouter De Schuyter

30/07/2011 23:35:52
Quote Anchor link
Bump, please help me..
 
Vincent Huisman

Vincent Huisman

31/07/2011 00:21:28
Quote Anchor link
wat probeer je nu exact te doen? heb je een voorbeeldje?
 



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.