Hover dropdown menu kleur

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Outsystems Developer Medior

Dit ga je doen Bouwen aan nieuwe en innovatieve applicaties; Maken van koppelingen tussen Outsystems en het bestaande applicatielandschap; Troubleshooting op bestaande software. Hier ga je werken De organisatie is internationale speler binnen de bouwbranche en richt zich op de infrastructuur, zowel boven als onder de grond. Ze zijn ruim 1100 man groot en maken op IT vlak een mooie groei door. Als ervaren Developer kom je te werken op een IT-afdeling van zo'n 25 man groot. Een aantal jaar geleden hebben ze de keuze gemaakt om zich meer te gaan richten op ontwikkeling en door de groei van de

Bekijk vacature »

Applicatie Ontwikkelaar

Bedrijfsomschrijving DUO verzorgt als uitvoeringsorganisatie, zijnde onderdeel van het Ministerie van Onderwijs, Cultuur en Wetenschap de uitvoering van complexe wet- en regelgeving en heeft een uitgebreid dienstenpakket. DUO financiert en informeert onderwijsdeelnemers en onderwijsinstellingen. Voor verdere informatie zie www.duo.nl Functieomschrijving Wie zoeken we? Jij bent een enthousiaste, flexibele OPS’er die het leuk vindt om het bestaande examenlandschap te vernieuwen. Je bent leergierig en hebt interesse in cloud- en containertechnieken zoals OpenShift, Docker en Helm. Je gaat een uitdaging niet uit de weg en wil je nieuw opgedane kennis graag delen met de collega’s binnen en buiten het team. Doordat de

Bekijk vacature »

Backend Developer Scrummaster .NET

Samengevat: Deze werkgever is een ambitieus internetbedrijf met een passie voor digitale communicatie. Ben jij geschikt als Backend Developer? Heb je ervaring met .NET platform? Vaste baan: Backend Developer / SCRUM Master Scrum HBO WO €3.800 - €6.000 Deze werkgever is een innovatief bedrijf met enthousiaste mensen die jarenlang ervaring hebben met het ontwikkelen internet- en intranetoplossingen. Wij houden van korte lijnen en open en eerlijke communicatie. Wij zetten graag onze jarenlange ervaring in om perfect werkende oplossingen te ontwikkelen. Wij ondersteunen dienstverlenende organisaties bij het ontwikkelen en realiseren van een effectief, adaptief communicatieplatform. Je ontwikkelt met ons de meest

Bekijk vacature »

App Developer

Samen werken aan een gezonder Nederland en toekomstbestendige zorg voor iedereen. Dat is de impact die jij kan hebben als App Developer bij VGZ. Wil jij een bijdrage leveren aan een maatschappij waarin iedereen zich thuis voelt? Bekijk dan de vacature. Uit onderzoek van Computable is VGZ verkozen tot ‘beste niet-ICT werkgever voor ICT’ers van Nederland’ Hoe ook jij het verschil maakt Als App developer werk jij aan het belangrijkste communicatiekanaal van VGZ, namelijk de App! Als App developer bij VGZ maak je onderdeel uit van een van onze App-teams. Met een goede mix van kennis en ervaring zet je

Bekijk vacature »

Fullstack developer

Functie omschrijving Ben jij toe aan een nieuwe uitdaging en zou jij graag bij een platte maar informele organisatie werken? Voor een mooi softwarebedrijf in omgeving Gouda zijn wij op zoek naar versterking op de afdeling Software Development! Als Fullstack react.js developer wordt je bij dit bedrijf onderdeel van de volledige ontwikkeling van requirement tot oplevering! Onderdelen van jouw functie: Jouw focus ligt op de front end en alles wat daarbij komt kijken. Je gaat ontwerpen, ontwikkelen, testen en valideren. Je zult voornamelijk werken met React.js en Typescript. Maar ook Javascript, HTML en CSS komen aanbod. Daarnaast zal je ook

Bekijk vacature »

Java Developer

Vacature details Vakgebied: Software/IT Opleiding: Senior Werklocatie: Eindhoven Vacature ID: 12946 Introductie We are looking for a Java Developer! Our client is one of the most innovation companies located within the Netherlands. We provide high quality software in a high-tech and challenging market. Functieomschrijving The department is specialized in creating and developing high quality software for manufacturing automation in a high tech environment. We strive to provide our clients with high quality software and deliver state of the art solutions in a variety of ways. Creating software infrastructure using Java SE / EE Create applications to fine tune manufacturing processes

Bekijk vacature »

Front end developer

Functie Qua type opdrachten is er echt een verscheidenheid aan afnemers, zo werken ze met grote multinationals, maar ook met startups. Zo kom je te werken in een gevarieerde omgeving en kan je ook schakelen tussen verschillende culturen. De projecten variëren van greenfield projecten tot langdurige ontwikkeltrajecten. Hier wordt alleen maar gewerkt met aan front end projecten. Daarom maakt het onze partner niet uit waar jij kennis van hebt, als je maar gedegen kennis hebt van Javascript frameworks, Unit testing en ook bekend bent met de scrum methodiek. Eisen Minimaal 4 jaar relevante werkervaring Kennen en ervaring van Javascript frameworks

Bekijk vacature »

Front-end PHP Developer

Dit ga je doen Bouwen van de frontend van een nieuwe applicaties; Verbeteren van de user experience; Opstellen van een style guide; Schakelen met collega developers over de te bouwen oplossing; Je speelt een belangrijke rol in het neerzetten van het nieuwe systeem; Werken met o.a. Symfony 6, API Platform, Twig, Javascript, Redis Automatiseren van processen; Koppelen van verschillende functionaliteiten; Unit tests, integration tests, end-to-end tests; In de toekomst ga je nog werken aan andere projecten. Hier ga je werken Voor onze vaste opdrachtgever in de regio Breda zijn wij op zoek naar een Frontend Developer. Het betreft een organisatie

Bekijk vacature »

Junior PHP (Laravel) Developer

Functie omschrijving Wij zijn op zoek naar een PHP Laravel Developer! Sta je aan het begin van je carrière en ben je op zoek naar een leuke baan? Lees dan verder! Voor een softwarebedrijf in omgeving van Schiphol zijn wij op zoek naar een ervaren PHP (Laravel) Developer. Je gaat je bezighouden met het ontwikkelen van innovatieve bedrijfsapplicaties. Samen met het team, bestaande uit designers en developers, maak je mooie oplossingen voor bedrijven in diverse branches. Je zorgt dat de opgeleverde websites perfect werken en de klant meer dan tevreden is. Je kunt rekenen op een afwisselende baan met leuke

Bekijk vacature »

Medior Java developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Java Developer

Java Developers opgelet! Bij Luminis zijn ze opzoek naar jou. Lees de vacature en solliciteer direct. Luminis is een software- en technologiebedrijf met meerdere vestigingen. Vanuit deze vestigingen werken 200 professionals aan technisch hoogwaardige oplossingen voor klanten zoals KLM, Nike en Bol.com. Ook ontwikkelt Luminis eigen oplossingen op het gebied van cloud, Internet of Things, data intelligence, e-sports en e-learning. Luminis onderscheidt zich door aantoonbaar voorop te lopen in technologie en innovatie. Luminis heeft drie kernpunten die verankerd zitten in alles wat we doen: het omarmen van nieuwe technologie, meesterschap en kennis delen. Functiebeschrijving First things first! Het is belangrijk

Bekijk vacature »

Applicatie ontwikkelaar

Functie omschrijving Zelfstandige applicatie ontwikkelaar gezocht voor familiair bedrijf in omgeving Barendrecht! Ben jij op zoek naar een nieuwe uitdaging en zoek jij een informele werkgever waar je zelfstandig kunt werken binnen een leuk IT team, lees dan snel verder want wie weet zijn wij op zoek naar jou! Binnen deze rol houdt jij je met het volgende bezig: Onderhouden en ontwikkelen van de IT systemen; Opzetten van Azure Cloud systemen, denk aan interfaces, hardware op de Cloud, webportalen of BI functies; Werken aan scripts binnen verschillende software applicaties, denk aan ERP en CAD; Ontwikkelen en implementeren van MS PowerApps

Bekijk vacature »

Product Developer (M/F), Fulltime 40 h/week

A global Plantbased revolution – that is our dream. Maximising the protein transition – that is our mission. Producing and developing sustainable and delicious products – that is what we do. Ojah is a fast growing company with a mission and has the ambition to be the world leader in its field. To support this growth we are hiring new colleagues. People that would like to make a difference and dare to dream big. With currently a 150 colleagues proudly working on our exceptional products. Working in a dynamic surrounding that runs full speed ahead. We need you! Product Developer

Bekijk vacature »

Senior .NET Developer I goed salaris en deels thui

Bedrijfsomschrijving Mijn opdrachtgever is al ruim 20 jaar een gevestigde naam in de wereld van software ontwikkeling, met drie kantoren in de Randstad, waaronder Alphen aan den Rijn. Zij richten zich op het bouwen van IT-oplossingen die ervoor zorgen dat de productiviteit van klanten te allen tijden optimaal is. Hiervoor neemt jouw nieuwe werkgever het volledige ontwikkelproces tot haar rekening; van het eerste gesprek om de klantwensen in kaart te brengen, tot aan het uiteindelijke onderhoud van de opgeleverde oplossing. In totaal werken er inmiddels bijna 200 gemotiveerde IT-ers binnen deze organisatie. De gemiddelde leeftijd ligt rond de 35. Het

Bekijk vacature »

Cobol Developer

Dit ga je doen Als Cobol Ontwikkelaar zal je gaan meebouwen aan een onderdeel van het backend systeem waarbij je het functionele ontwerp vertaald naar een technische oplossing die geïntegreerd kan worden in de huidige omgeving. Je zorgt ervoor dat de bedrijfsprocessen op een efficiënte manier worden uitgevoerd en werkt proactief aan het verbeteren hiervan. Samen met jouw collega’s reviewen jullie elkaars code en test je je eigen code. Je werkt nauw samen met andere ontwikkelaars, testers en functioneel ontwerpers. Taken pakket: Beheren en doorontwikkelen van de bestaande omgeving; Vertalen van een functionele vragen naar een technische oplossing; Doorvoeren van

Bekijk vacature »
Kevin J

Kevin J

03/01/2015 09:40:22
Quote Anchor link
Hey,

Ik heb een DropDown menu gevonden op het internet.
Die gebruik ik ook en ik werk ermee.
Nou heb ik gemaakt dat als ik hover over de hoofd menu om zo te zeggen dat hij dan van kleur veranderd.
Maar zodra ik met mijn muis naar de dropdown ga, gaat hij naar wit, is er mogelijkheid dat hij in kleur blijft?
Ook als ik een border om het dropdown gedeelte doe dus wat er naar beneden kom. En ik ga weer weg verdwijnt hij niet 100% maar word hij gedeeltelijk doorzichtig gemaakt. Iemand oplossing voor beide problemen?
Javascript:
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
var menu=function(){
    var t=15,z=50,s=6,a;
    function dd(n){this.n=n; this.h=[]; this.c=[]}
    dd.prototype.init=function(p,c){
        a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
        for(i;i<l;i++){
            var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
            h.onmouseover=new Function(this.n+'.st('+i+',true)');
            h.onmouseout=new Function(this.n+'.st('+i+')');
        }
    }
    dd.prototype.st=function(x,f){
        var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
        clearInterval(c.t); c.style.overflow='hidden';
        if(f){
            p.className+=' '+a;
            if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
            if(c.mh==c.offsetHeight){c.style.overflow='visible'}
            else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
        }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
    }
    function sl(c,f){
        var h=c.offsetHeight;
        if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
            if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
            clearInterval(c.t); return
        }
        var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
        c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
        c.style.height=h+(d*f)+'px'
    }
    return{dd:dd}
}();


CSS:
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
.menu {list-style:none; margin:0; padding:0}
.menu * {margin:0; padding:0}
.menu a {display:block; color:#000; text-decoration:none;}
.menu li {position:relative; float:left; padding-right:0px}
.menu ul {position:absolute; top:26px; left:0; background:white; display:none; opacity:0; list-style-type:none}
.menu ul li {position:relative;  border-top:none; width:230px; margin:0}
.menu ul li a {display:block; padding:0px; background-color:white}
.menu ul li a:hover {background-color:white}
.menu ul ul {left:235px; top:-1px}
.menu .menulink { padding:5px 7px 7px; font-size: 9px; width:92px}
.menu .sub {background:white url(../../images/menu/arrow.gif) 220px 8px no-repeat}

.menu .submenu-block-item {
    float: left;
    position: relative;
    display: inline;
    width: 230px;
    margin: 2px 0px 2px 6px;
    padding-bottom: 2px;
    background: url("../../images/stippellijn-horizontaal.gif") repeat-x bottom;
}
.menu .submenu-block-lastitem {
    background: none;
    margin: 2px 0px 0px 6px;
    padding-bottom: 0px;
}
.menu .submenu-block-item > a {
    padding: 2px 0px 2px 6px;
    line-height: 27px;
}
/* Taal menu */
.menu #taal {
    border: 3px red solid;
    background-color: red;
    color: white;
}
.menu #taal2:first-child:hover {
    background-color: red;
}
.menu #taal2 {
    border: 3px red solid;
}
/* Spraak menu */
.menu #spraak:hover {
    border: 3px #71A0A4 solid;
    background-color: #71A0A4;
    color: white;
}
/* Stem menu */
.menu #stem {
    border: 3px #BFA9A1 solid;
    background-color: #BFA9A1;
    color: white;
}
/* Gehoor menu */
.menu #gehoor {
    border: 3px #9FC2C6 solid;
    background-color: #9FC2C6;
    color: white;
}
/* Slikken menu */
.menu #slikken {
    border: 3px #686D8C solid;
    background-color: #686D8C;
    color: white;
}
/* Appwijzer menu */
.menu #appwijzer {
    border: 3px #92AF5F solid;
    background-color: #92AF5F;
    color: white;
}


Menu:
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<ul class="menu" id="menu">
    <li><a href="javascript:pages('content/home/homepage.php', 'main');" class="menulink">HOME</a></li>

    <li><a href="#" class="menulink" id="taal">TAAL</a>
        <ul >
            <li id="taal2">
                <div class="submenu-block-item "><a href="#">VERTRAAGDE TAALONTWIKKELING</a></div>
                <ul>
                    <div class="submenu-block-item"><li><a href="javascript:pages('content/pages/main.php?pageid=1', 'main');">FONOLOGIE</a></li></div>
                    <div class="submenu-block-item"><li><a href="javascript:pages('content/pages/main.php?pageid=2', 'main');">MORFOLOGIE</a></li></div>
                    <div class="submenu-block-item"><li><a href="javascript:pages('content/pages/main.php?pageid=3', 'main');">SYNTAXIS</a></li></div>
                    <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=4', 'main');">SEMANTIEK</a></li></div>
                    <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=5', 'main');">PRAGMATIEK</a></li></div>
                </ul>
            </li>
            <div class="submenu-block-item "><a href="javascript:pages('content/pages/main.php?pageid=6', 'main');">DYSLEXIE</a></div>
            <div class="submenu-block-item"><a href="javascript:pages('content/pages/main.php?pageid=7', 'main');">AFASIE</a></div>
            <li>
                <div class="submenu-block-item submenu-block-lastitem"><a href="#">LEESVOORWAARDEN</a></div>
                <ul>
                    <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=27', 'main');">FONOLOGISCH BEWUSTZIJN</a></li></div>
                    <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=28', 'main');">FONEMISCH BEWUSTZIJN</a></li></div>
                    <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=29', 'main');">LETTERKENNIS</a></li></div>
                    <li>
                        <div class="submenu-block-item submenu-block-lastitem"><a href="#">AUDITIEVE VAARDIGHEDEN</a></div>
                        <ul>
                            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=30', 'main');">AUDITIEVE CONCENTRATIE</a></li></div>
                            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=31', 'main');">AUDITIEVE WERKGEHEUGEN</a></li></div>
                            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=32', 'main');">AUDITIEVE DISCRIMINATIE</a></li></div>
                            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=33', 'main');">AUDITIEVE ANALYSE</a></li></div>
                            <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=34', 'main');">AUDITIEVE SYNTHESE</a></li></div>
                        </ul>
                    </li>
                </ul>
            </li>


        </ul>
    </li>


    <li><a href="#" class="menulink" id="spraak">SPRAAK</a>
        <ul>
            <li>
                <div class="submenu-block-item "><a href="#">VERTRAAGDE SPRAAKONTWIKKELING</a></div>
                <ul>
                    <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=9', 'main');">FONETIEK</a></li></div>
                    <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=10', 'main');">FONOLOGIE</a></li></div>
                </ul>
            </li>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=11', 'main');">VERBALE ONTWIKKELINGSDYSPRAXIE</a></li></div>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=12', 'main');">SLISSEN EN LISPELEN</a></li></div>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=13', 'main');">AFWIJKENDE MONDGEWOONTEN</a></li></div>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=14', 'main');">NASALITEITSSTOORNIS</a></li></div>
            <li>
                <div class="submenu-block-item "><a href="#">VLOEIENDHEIDSSTOORNISSEN</a></div>
                <ul>
                    <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=15', 'main');">STOTTEREN</a></li></div>
                    <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=16', 'main');">BRODDELEN</a></li></div>
                </ul>
            </li>            
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=17', 'main');">DYSARTRIE</a></li></div>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=18', 'main');">VERBALE APRAXIE</a></li></div>
            <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=19', 'main');">AANGEZICHTSVERLAMMING</a></li></div>
        </ul>
    </li>



    <li><a href="#" class="menulink" id="stem">STEM</a>
        <ul>
            <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=20', 'main');">STEMSTOORNISSEN</a></li></div>
        </ul>
    </li>



    <li><a href="#" class="menulink" id="gehoor">GEHOOR</a>
        <ul>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=21', 'main');">AUDITIEVE VERWERKINGSPROBLEMEN</a></li></div>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=22', 'main');">GEHOORREVALIDATIE</a></li></div>
            <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=23', 'main');">SLECHTHORENDHEID</a></li></div>
        </ul>
    </li>


    <li><a href="#" class="menulink" id="slikken">SLIKKEN</a>
        <ul>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=24', 'main');">EET- EN DRINKSTOORNISSEN BIJ KINDEREN</a></li></div>
            <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=25', 'main');">DYSFAGIE</a></li></div>
        </ul>
    </li>


    <li><a href="javascript:pages('content/apps/apps.php', 'main');" class="menulink" id="appwijzer">APPWIJZER</a></li>
<?php
if(isset($_SESSION['login'])){
?>
    <li><a href="javascript:pages('content/mijn/logowall.php', 'main');" class="menulink">MIJN LOGOWALL</a></li>
<?php
}
?>
    <li><a href="javascript:pages('content/forum/forum.php', 'main');" class="menulink">FORUM</a></li>

</ul>
<script type="text/javascript">
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover");
</script>


Toevoeging op 03/01/2015 20:26:47:

http://i59.tinypic.com/209pswm.png

Is een voorbeeld van wat ik bedoel, zonder border gaat hij helemaal weg.
Gewijzigd op 03/01/2015 20:27:18 door Kevin J
 
PHP hulp

PHP hulp

18/05/2024 13:17:34
 
Frank Conijn

Frank Conijn

04/01/2015 20:30:40
Quote Anchor link
Wat ik van je vraag begrijp is dat je een gewoon drop-downmenu wilt, dus zonder speciale effecten. Waarbij het moederitem in de hooverkleur blijft, ook als je met je muis naar het kinditem gaat.

Dat is heel eenvoudig, zelfs helemaal zonder Javascript. Zie dit voorbeeld indien het kinditem net zo breed moet zijn als het moederitem, en dit voorbeeld als het breder moet zijn.

De voorbeelden bevatten al een toelichting, maar er is ook een volledige tutorial die erbij hoort.

Op alle pagina's vind je weliswaar nog een klein Javascriptje, maar dat was voor IE6, die nu zo goed als helemaal niet meer gebruikt wordt in Nederland. Ik moet de pagina's nog aanpassen daaraan, maar daar ben ik nog niet aan toegekomen.
 
Kevin J

Kevin J

05/01/2015 07:19:02
Quote Anchor link
Bedankt voor je hulp maar zo bedoel ik eigenlijk totaal niet.
Ik moet zo iets hebben: Afbeelding
Dit is btw voorbeeld in word
Maar op mijn website heb ik het opzich al maar dan niet die kleurtjes die buggen enorm dat zie je in mijn openings topic ook helemaal onderaan.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

05/01/2015 12:35:56
Quote Anchor link
misschien even een voorbeeld maken in codepen.io ?
 
Kevin J

Kevin J

05/01/2015 12:42:30
Quote Anchor link
Ik heb het even op mijn eigen site gezet anders werkt het niet:
http://kevindev.nl/PHPHulp/MenuProbleem/menu.php
 
Ward van der Put
Moderator

Ward van der Put

05/01/2015 12:45:46
Quote Anchor link
Je hebt dat wit hier bijvoorbeeld ingesteld. Daar zou je dus een kleur van moeten maken:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
.menu ul li a:hover {background-color:white}
 
Kevin J

Kevin J

05/01/2015 12:45:48
Quote Anchor link
De codes zijn beetje aangepast dus hierbij de nieuwe CSS en HTML:

menu.css:
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
.menu {list-style:none; margin:0; padding:0}
.menu * {margin:0; padding:0}
.menu a {display:block; color:#000; text-decoration:none}
.menu li {position:relative; float:left; margin-right:2px}
.menu ul {position:absolute; top:26px; left:0; background:white; display:none; opacity:0; list-style-type:none}
.menu ul li {position:relative;  border-top:none; width:230px; margin:0}
.menu ul li a {display:block; padding:3px 7px 5px; background-color:white}
.menu ul li a:hover {background-color:white}
.menu ul ul {left:235px; top:-1px}
.menu .menulink { padding:5px 7px 7px; font-weight:bold; font-size: 9px; width:92px}
.menu .sub {background:white url(../../images/menu/arrow.gif) 220px 8px no-repeat}

.menu .submenu-block-item {
    float: left;
    position: relative;
    display: inline;
    width: 230px;
    margin: 2px 0px 2px 6px;
    padding-bottom: 2px;
    background: url("../../images/stippellijn-horizontaal.gif") repeat-x bottom;
}
.menu .submenu-block-lastitem {
    background: none;
    margin: 2px 0px 0px 6px;
    padding-bottom: 0px;
}
.menu .submenu-block-item > a {
    padding: 2px 0px 2px 6px;
    line-height: 27px;
}
/* Taal menu */
.menu #taal {
    border: 3px red solid;
}
.menu #taalmenu {
    background-color: red;
}


De nieuwe 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<ul class="menu" id="menu">
    <li><a href="javascript:pages('content/home/homepage.php', 'main');" class="menulink">HOME</a></li>

    <li><a href="#" class="menulink">TAAL</a>
        <ul id="taal">
            <li >
                <div class="submenu-block-item "><a href="#">VERTRAAGDE TAALONTWIKKELING</a></div>
                <ul>
                    <div class="submenu-block-item"><li><a href="javascript:pages('content/pages/main.php?pageid=1', 'main');">FONOLOGIE</a></li></div>
                    <div class="submenu-block-item"><li><a href="javascript:pages('content/pages/main.php?pageid=2', 'main');">MORFOLOGIE</a></li></div>
                    <div class="submenu-block-item"><li><a href="javascript:pages('content/pages/main.php?pageid=3', 'main');">SYNTAXIS</a></li></div>
                    <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=4', 'main');">SEMANTIEK</a></li></div>
                    <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=5', 'main');">PRAGMATIEK</a></li></div>
                </ul>
            </li>
            <div class="submenu-block-item "><a href="javascript:pages('content/pages/main.php?pageid=6', 'main');">DYSLEXIE</a></div>
            <div class="submenu-block-item"><a href="javascript:pages('content/pages/main.php?pageid=7', 'main');">AFASIE</a></div>
            <li>
                <div class="submenu-block-item submenu-block-lastitem"><a href="#">LEESVOORWAARDEN</a></div>
                <ul>
                    <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=27', 'main');">FONOLOGISCH BEWUSTZIJN</a></li></div>
                    <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=28', 'main');">FONEMISCH BEWUSTZIJN</a></li></div>
                    <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=29', 'main');">LETTERKENNIS</a></li></div>
                    <li>
                        <div class="submenu-block-item submenu-block-lastitem"><a href="#">AUDITIEVE VAARDIGHEDEN</a></div>
                        <ul>
                            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=30', 'main');">AUDITIEVE CONCENTRATIE</a></li></div>
                            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=31', 'main');">AUDITIEF WERKGEHEUGEN</a></li></div>
                            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=32', 'main');">AUDITIEVE DISCRIMINATIE</a></li></div>
                            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=33', 'main');">AUDITIEVE ANALYSE</a></li></div>
                            <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=34', 'main');">AUDITIEVE SYNTHESE</a></li></div>
                        </ul>
                    </li>
                </ul>
            </li>


        </ul>
    </li>


    <li><a href="#" class="menulink" id="spraak">SPRAAK</a>
        <ul>
            <li>
                <div class="submenu-block-item "><a href="#">VERTRAAGDE SPRAAKONTWIKKELING</a></div>
                <ul>
                    <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=9', 'main');">FONETIEK</a></li></div>
                    <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=10', 'main');">FONOLOGIE</a></li></div>
                </ul>
            </li>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=11', 'main');">VERBALE ONTWIKKELINGSDYSPRAXIE</a></li></div>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=12', 'main');">SLISSEN EN LISPELEN</a></li></div>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=13', 'main');">AFWIJKENDE MONDGEWOONTEN</a></li></div>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=14', 'main');">NASALITEITSSTOORNIS</a></li></div>
            <li>
                <div class="submenu-block-item "><a href="#">VLOEIENDHEIDSSTOORNISSEN</a></div>
                <ul>
                    <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=15', 'main');">STOTTEREN</a></li></div>
                    <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=16', 'main');">BRODDELEN</a></li></div>
                </ul>
            </li>            
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=17', 'main');">DYSARTRIE</a></li></div>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=18', 'main');">VERBALE APRAXIE</a></li></div>
            <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=19', 'main');">AANGEZICHTSVERLAMMING</a></li></div>
        </ul>
    </li>



    <li><a href="#" class="menulink" id="stem">STEM</a>
        <ul>
            <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=20', 'main');">STEMSTOORNISSEN</a></li></div>
        </ul>
    </li>



    <li><a href="#" class="menulink" id="gehoor">GEHOOR</a>
        <ul>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=21', 'main');">AUDITIEVE VERWERKINGSPROBLEMEN</a></li></div>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=22', 'main');">GEHOORREVALIDATIE</a></li></div>
            <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=23', 'main');">SLECHTHORENDHEID</a></li></div>
        </ul>
    </li>


    <li><a href="#" class="menulink" id="slikken">SLIKKEN</a>
        <ul>
            <div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=24', 'main');">EET- EN DRINKSTOORNISSEN BIJ KINDEREN</a></li></div>
            <div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=25', 'main');">DYSFAGIE</a></li></div>
        </ul>
    </li>


    <li><a href="javascript:pages('content/apps/apps.php', 'main');" class="menulink" id="appwijzer">APPWIJZER</a></li>
<?php
if(isset($_SESSION['login'])){
?>
    <li><a href="javascript:pages('content/mijn/logowall.php', 'main');" class="menulink">MIJN LOGOWALL</a></li>
<?php
}
?>
    <li><a href="javascript:pages('content/forum/forum.php', 'main');" class="menulink">FORUM</a></li>

</ul>
<script type="text/javascript">
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover");
</script>


Toevoeging op 05/01/2015 12:47:51:

Ward van der Put op 05/01/2015 12:45:46:
Je hebt dat wit hier bijvoorbeeld ingesteld. Daar zou je dus een kleur van moeten maken:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
.menu ul li a:hover {background-color:white}


Ja dat klopt maar ik kan ook wel apart aanpassen (en heb ook geprobeerd wanneer dat weg was) maar zodra ik naar beneden ga dus in dat lijstje van dropdown veranderd hij terugn en blijft hij niet die kleur (Bekijk voorbeeld)
 
Frank Nietbelangrijk

Frank Nietbelangrijk

05/01/2015 14:10:01
Quote Anchor link
http://codepen.io/anon/pen/emBKYQ?editors=110

Nog niet af maar meer in de richting. Kijk maar of je hier mee voort kunt
 
Kevin J

Kevin J

05/01/2015 14:45:09
Quote Anchor link
Hallo frank, ik heb even zitten kloten met jouw code, maar mij lukt het niet om ze mooi naast elkaar te krijgen.
De dropdown is al aardig goed wat ik zoek maar het lukt mij niet om ze mooi naast elkaar t krijgen, er is altijd een die te hoog of te laag zit

Toevoeging op 05/01/2015 20:50:40:

Frank? Weet je trouwens misschien een manier om met de huidige code hem toch onzichtbaar te laten krijgen?
 



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.