Hover dropdown menu kleur

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

PHP Back-end Developer

Vacature details Vakgebied: Software/IT Opleiding: Starter Werklocatie: Nijmegen Vacature ID: 13633 Introductie OUr client develop websites, webshops, and digital environments that are used by many visitors daily. They are seeking an experienced PHP-Developer Back-end to join the team. If you're looking for a position where you can tackle challenging, innovative, and multidisciplinary ICT projects and make a difference, this vacancy might be for you! Functieomschrijving As a PHP developer, you'll develop websites and digital environments used by many visitors daily. You'll work as a back-end developer and want to continuously develop in this field. You can work independently and efficiently,

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 »

Front-end Developer (HTML/CSS, Angular/React/Vue,

Functie Je zal aan de slag gaan in een klein, hecht team met front-end development experts die de ambitie delen mooi werk te leveren. Samen met hen zal je werken aan het gebruiksvriendelijk en interactief maken van complexe webapplicaties, websites en mobile apps. Je levert klanten wat ze nodig hebben terwijl je actief aan jezelf blijft werken met de ondersteuning vanuit je werkplek. Talen als Javascript programmeer jij vloeiend en je hebt kennis van frameworks als React en Angular. Je zou je het liefst nog veel meer ontwikkelen in verschillende front-end talen. Deze kennis deel je graag met je collega’s,

Bekijk vacature »

C# developer

Functie Als ervaren Software Engineer wordt jij verantwoordelijk voor het bedenken en ontwikkelen van technische (maatwerk) oplossingen voor onze klanten en dit samen met de klant af te stemmen. Jij wordt o.a. verantwoordelijk voor de doorontwikkeling het software pakket welke voor ons enorm belangrijk is. Dit pakket zorgt er namelijk voor dat wij complete productielijnen kunnen aansturen en monitoren. Daarnaast heb jij actief contact met onze hoofdvestiging om het software achter een van onze systemen te verbeteren en te herschrijven. Momenteel zijn onze C# applicaties geschreven met o.a. Winforms. Echter hebben wij de actieve ambitie om dit te gaan herschrijven

Bekijk vacature »

Senior Front-end developer Consultancy

Functie Als front-end developer ga je aan de slag voor verschillende klanten, waarbij veel rekening wordt gehouden met waar je woont (dit is altijd binnen het uur), en word er gezocht naar een organisatie die past bij jou. Zowel qua persoonlijke ambities als de technische aansluiting. De opdrachten duren gemiddeld 1 à 2 jaar maar dit hangt ook af van je wensen. Je werkt in een teamverband voor een klant en zult nauw samenwerken met zowel eigen collega’s als die bij de klant werkzaam zijn. Ze zijn op zoek naar een technische front-end developer die ruime ervaring heeft in één

Bekijk vacature »

Back-end Programmeur

Functieomschrijving Heb jij kort geleden je HBO ICT in ontvangst mogen nemen? Of ben je toe aan een nieuwe uitdaging? Voor een ambitieuze werkgever in de regio van Breda zijn wij op zoek naar een Back-end programmeur met affiniteit met C#.NET, SQL en MS Access. Samen met team bestaand uit ware ICT professionals ben je verantwoordelijk voor het bouwen van maatwerk software voor hun klanten. Belangrijk is dat je kennis of ervaring hebt van C#.NET en SQL. Je toont een flexibele en sociale houding naar klanten toe. Je denkt in nieuwe mogelijkheden & gaat graag de uitdaging aan. Bedrijfsprofiel De

Bekijk vacature »

Back end developer Digital agency

Functie Heb jij altijd al eens bij een bedrijf willen werken waar jij géén nummertje bent, die alleen maar uitvoerend werk doet? Dan zou je hier perfect passen! Tuurlijk, je werkt aan projecten voor grote of kleine bedrijven… Het enige verschil hier is, jouw mening telt hier écht. Jouw inbreng wordt gewaardeerd, serieus genomen en gebruikt. En vergeet niet, je werkt niet alleen aan deze projecten. Er werken in totaal ruim 20 developers en designers, onderverdeeld over 3 development teams. Voornamelijk bestaande uit Medior en Senior developers, die samen voor een inspirerende en ambitieuze omgeving zorgen. Hun visie is namelijk

Bekijk vacature »

IT Infrastructuur Developer

IT Infrastructuur Developer Ben jij (bijna) klaar met je HBO studie in de richting van IT? Opzoek naar een spannende eerste baan, waar je ontzettend veel kan leren? Dan hebben wij de ultieme job voor jou! Voor een goede klant van ons in de financiële dienstverlening zijn wij opzoek naar een Junior Infrastructure Developer. Deze baan is een mooie kans om een sterke start te geven aan jouw carrière binnen de IT! De job Je werkt nauw samen met het Devops team, en zal je voornamelijk bezighouden met het automatiseren van infrastructure componenten. De componenten worden opgevraagd door het DevOps

Bekijk vacature »

Java developer

Als Java Developer bij Sogeti ben je onderdeel van onze toonaangevende community die bestaat uit ruim 100 gepassioneerde professionals. In teamverband lever je mooie prestaties. Daarmee draag je aan bij de meerwaarde die wij leveren aan onze klanten. Geen werkdag is hetzelfde, je bent voortdurend bezig met het oplossen van allerlei complexe vraagstukken binnen bedrijfskritische systemen. Een voorbeeld hiervan is een cliënt-volgsysteem bij Reclassering Nederland. Andere klanten waar wij onder andere voor werken: KPN, Philips, Nationale-Nederlanden, Kamer van Koophandel, ABN AMRO, Bovemij, Arval en de Politie. Werken bij Sogeti Nieuwe ontwikkelingen volgen we op de voet en delen we binnen de

Bekijk vacature »

Senior Product Developer

Functieomschrijving Als senior Product Developer ben je verantwoordelijk voor bestaande mobiliteitsproducten en de ontwikkeling van nieuwe mobiliteitsconcepten. Met behulp van diverse klantonderzoeken, klantsessies en salesmeetings zorg je ervoor dat je de veranderende mobiliteitsbehoeften in de markt kent. Hier speel je op in door innovatieve, flexibele, efficiënte en duurzame vervoersoplossingen te bedenken, te ontwikkelen, te implementeren en uiteindelijk samen met Sales en Marketing collega’s in de markt te zetten. Je initieert en neemt deel aan (internationale en afdeling overschrijdende) projecten, vaak in de rol van projectleider. In die rol bewaak je de voortgang, coördineer je de activiteiten en zorg je voor

Bekijk vacature »

Front-end developer

Functie Jij komt te werken in een team van 5 developers. het product is continue in beweging. Nieuwe en bestaande klanten vragen om vaak nieuwe features. Hierin ben jij zeer belangrijk om te zorgen dat de functionaliteiten goed opgezet worden op technisch vlak. Designs krijg je aangeleverd van een externe partij zodat jij je primair kan focussen op de techniek! Je hebt daarbij alle vrijheid om je eigen creativiteit toe te passen en mee te denken over de gebruikte technieken. Het gezamenlijke doel is een product dat functioneel zeer gebruiksvriendelijk is en het bedrijfsproces van de gebruikers versneld en kwalitatief

Bekijk vacature »

PHP Developer

Dit ga je doen Je werkt nauw samen met het websitebureau aan de ontwikkeling en optimalisering van het internationale platform; Je ziet nieuwe webshops op en voert optimalisaties door; Je bouwt aan technische, functioneel en commercial resultaat; Je vindt het leuk om zelfstandig binnen een internationale organisatie te werken, maar krijgt ook energie om samen met collega's te werken. Hier ga je werken Voor een bedrijf in de regio Rotterdam zijn wij opzoek naar een PHP Developer. Je wordt onderdeel van het communicatieteam en gaat je bezighouden met het optimaliseren van de website van dit internationale bedrijf. Je schakelt veel

Bekijk vacature »

SAP ABAP Developer

Dit ga je doen Software ontwikkeling met behulp van o.a. ABAP, Sapscript en Smartforms Maatwerk development op SAP ECC 6.0, in de toekomst S/4 HANA Samenwerken met Business Analisten die functioneel en technisch ontwerpen aanleveren Testen van opgeleverde software Bugfixing Ondersteuning van eindgebruikers Hier ga je werken Onze klant, een internationaal gevestigd productiebedrijf dat mensen blij maakt, is ter versterking op zoek naar een ABAP Developer voor hun SAP team. Het team van 4 mensen verzorgt de ontwikkeling van maatwerk voor de SAP omgeving waar wordt gewerkt met modules SD, FI/CO, PM en MM. Momenteel draait het bedrijf op SAP

Bekijk vacature »

Front-end developer E-Commere

Functie E-commerce is een ‘’snelle’’ wereld. Om hierin continu voorop te blijven omarmen ze in een vroeg stadium nieuwe technieken. Een webshop is nooit af en kan altijd beter, sneller en efficiënter. Tegelijkertijd hebben ze vanaf hun oprichting altijd vastgehouden aan kwaliteit boven snelheid, en dit loont. Als front-end developer heb je een adviserende rol en sta je aan het eindpunt van alles wat met designs te maken heeft. Je overlegt met klanten en collega’s, en zet je in om ideeen om te zetten tot unieke concepten. Je bent het aanspreekpunt voor de klant en bewaakt tevens de planning. Eisen

Bekijk vacature »

IoT Developer

Ben jij innovatief, heb jij passie voor energie en ben je data gedreven? Bouw dan mee aan IoT binnen Bredenoord. Samen met een gedreven team werk jij aan mooie technische en innovatieve oplossingen. Wat houdt de functie van IoT Developer in? Binnen Bredenoord zijn wij momenteel volop in ontwikkeling met ons IoT platform. Als uitbreiding van ons team zijn wij op zoek naar een IoT Developer. Je zal in projectverband meehelpen met het implementeren van IoT vraagstukken binnen Bredenoord. Als IoT Developer op onze R&D-afdeling word je verantwoordelijk voor het verder inrichten en beheren van ons nieuwe IoT platform. Dat

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

16/02/2025 13:03:03
 
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.