Hover dropdown menu kleur

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

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 »

.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 »

Junior .NET developer

Functie Wij hebben drie scrumteams. Het eerste team focust zich op het stukje hardware wat wij in huis doen. Zij maken als team o.a. gebruik van C++. De andere twee scrumteams zijn allebei bezig met data verwerking en maken hierbij in de backend gebruik van C# .NET / .NET Core. Het verschil tussen deze teams is dat één team de data verwerking doet voor de mobiele applicatie. Zij werken hierbij dus ook met Xamarin. Het andere team focust zich op de webapplicaties en maakt hierbij ook gebruik van ASP.NET MVC. Op basis van jouw ambities en kwaliteiten kijken wij samen

Bekijk vacature »

C# .NET Developer

Dit ga je doen Ontwikkelen van de Back-end in .NET6 / C# en WebAPI (Focus);) Ontwikkelen van de Front-End in Nodje.js en Angular (secundair); Ontwikkelen in Blazor; Opstellen van een technisch ontwerp; Testen, documenteren en implementeren van de nieuwe applicatie; Verzorgen van de nazorg, na de implementatie. Hier ga je werken Binnen deze organisatie werken duizenden mensen binnen allerlei verschillende disciplines. Tevens hebben zij veel specialiteiten in huis, waaronder ook .Net Developers. Ter uitbreiding van een nieuw team en ter ondersteuning van het project zijn ze opzoek naar een nieuwe collega voor het team. Als C#.NET Developer zal jij je

Bekijk vacature »

Frontend Developer Vue Nuxt HBO Javascript

Samengevat: Deze werkgever levert elke dag betere digitale gebruikerservaringen. Ben jij geschikt als frontend Developer? Heb je ervaring met Vue en Nuxt? Vaste baan: Front-End Developer HBO €3.100 - €4.600 Zij bieden opdrachtgevers een complete dienstverlening op gebied van ontwerpen en ontwikkelen van websites, zoekmachine optimalisatie, online adverteren, content marketing en conversie verbetering. Zij werken met een eigen ontwikkeld CMS. Bij bij hun werk je aan onze eigen bedrijfsapplicaties. Je ontwikkelt met ons de meest nieuwe software. Wij blinken uit als het gaat om de inzet van technologie. Deze werkgever staat open voor elke nieuwe trend. Onze systemen zijn groot

Bekijk vacature »

Backend Developer PHP Laravel SaaS

Dit ga je doen Het ontwikkelen van nieuwe features die bijdragen aan de groei van de klanten van de organisatie; Je denkt mee over nieuwe innovaties, features en verbeteringen in de applicatiearchitectuur; Je draagt bij aan de continue ontwikkeling van jouw team doordat je elke dag streeft naar het verbeteren van jouw eigen prestaties; Je neemt actief deel aan Scrum meetings en de Backend Guild. Hier ga je werken Voor een snel groeiend bedrijf, in de regio Nieuw Vennep, zijn wij opzoek naar een ervaren Backend Developer. De organisatie is actief in de e-commercebranche en ontzorgt haar klanten middels een

Bekijk vacature »

Traineeship Front-end developer (WO, 0 tot 3 jaar

Functie Zoals beschreven ga je vanaf start aan de slag bij een passende opdrachtgever, hierbij kijken ze echt naar jouw wensen, kennis/ervaring maar ook de reisafstand. Momenteel hebben ze meerdere klanten waarbij ze groepen hebben opgezet wat maakt dat er diverse uitdagende kansen liggen. Naast het werken bij de opdrachtgever, en het volgen van de masterclasses, zul je regelmatig met de andere trainees in contact zijn. Niet alleen op professioneel vlak maar juist ook bij de borrels en kwartaaluitjes! Kortom; een jaar lang hard aan jezelf werken in combinatie met gezelligheid en plezier. Spreek dit jou aan? Dan komen we

Bekijk vacature »

Medior/senior Back-end developer wanted!

Functie Because of the growth within the company, we are looking for reinforcement in the devlopmenttean. As a back-end developer you build the company software that helps us with the primary processes. A fun (internal) project in which you continuously develop the software! You will work in a small team, we have daily stand-ups and a scrum session every fortnight, led by our Scrum Master. During these sessions, you get the opportunity to present your ideas and discuss them with your fellow developers and the Product Owner. Within the development teams, we use Trello, Gitlab, Jiira, Confluence and Boockstack. They

Bekijk vacature »

C# Developer

Dit ga je doen Je gaat aan de slag in het websites team of portals team waarin je je bezighoudt met concept & design, implementatie en ook een stukje bugfixing en onderhoud; Je werkt met je team volgens de Scrum werkwijze; Zo adviseer je ook de PO & Scrum Master over de technische architectuur, koppelingen en integratie met externe systemen en API’s; Je blijft op de hoogte van de laatste ontwikkelingen en trends op het gebied van C# / .NET en deelt deze kennis binnen de organisatie. Hier ga je werken Onze klant is een internationale organisatie gevestigd in de

Bekijk vacature »

Technisch Applicatie ontwikkelaar

Functie omschrijving 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! In deze functie werk jij voornamelijk aan: Het onderhouden en ontwikkelen van de IT systemen; Het opzetten van Azure Cloud systemen, denk aan interfaces, hardware op de Cloud, webportalen of BI functies; Werk je aan scripts binnen verschillende software applicaties, denk aan ERP en CAD; Ontwikkel en implementeren je MS PowerApps en Power BI. Bedrijfsprofiel Je komt terecht bij een familiair

Bekijk vacature »

Software Ontwikkelaar

Functieomschrijving In deze uitdagende functie als Software Developer ga je de volgende taken uitvoeren: Maatwerk back-end software programmeren; API koppelingen bouwen; Software optimaliseren voor klanten; Bouwen maatwerk applicaties; Werken met Microsoft stack zoals C#, .NET (Core) en Entity framework; Bedrijfsprofiel Je gaat werken bij een klein softwareontwikkelingsbureau, die maatwerk software bouwt voor klanten door heel Nederland. Dit doen zij al meer dan 20 jaar. Het is van oorsprong een familiebedrijf, opgezet door de eigenaar, die er nog steeds werkt. Het team bestaat vooral uit back-end developers en één systeembeheerder. Je krijgt veel kans om jezelf te ontwikkelen en krijgt tevens

Bekijk vacature »

Medior/senior front end developer

Functie Vanwege de groei binnen het bedrijf zijn ze op zoek naar een Technische front end developer. Momenteel hun front end back end team gescheiden aan het werk. Hier willen ze verandering in krijgen. Omdat ook veel interne applicaties ontwikkeld worden zoeken ze iemand die hen kan helpen om de interne applicaties te voorzien van de juiste Vue.js componenten. Zodoende willen ze de interactie tussen front end en back end versoepelen en de volgende stap binnen het platform gaan zetten. Deze componenten die jij ontwikkeld zullen in elk project gebruikt worden. Het back end team bestaat momenteel uit 8 ontwikkelaars

Bekijk vacature »

C# developer

Functie Als C# ontwikkelaar ben jij de spin in het web bij deze organisatie. Jij begeleidt en traint de field engineers die bij de klanten machines leveren en installeren. Daarnaast ondersteun jij de field engineers als zij bij de klant vastlopen bij het installeren van de machine m.b.t. software matige vragen. Jouw doel is dan ook om de technische kennis van de field engineers door middel van training zoveel mogelijk uit te breiden. Dit om ervoor te zorgen dat zij zelfstandiger software matige problemen kunnen oplossen. Ook ben jij verantwoordelijk voor het bedenken van software oplossingen voor klanten en dit

Bekijk vacature »

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Functioneel applicatiebeheerder - SOP-SYS-SAM

TenneT is hard groeiend om de onze ambities waar te kunnen maken. Zo nemen wij een leidende rol in het aanjagen van de energietransitie. Het werven van nieuw talent speelt daarin een cruciale rol. Wij zijn op zoek naar een gedreven Functioneel Applicatiebeheerder op onze locatie Arnhem die hieraan wil bijdragen en misschien ben jij dat wel? Jouw bijdrage aan TenneT Je gaat samenwerken in een team van circa 15 functioneel applicatiebeheerders en gaat onderdeel uitmaken van een DevOps team. Met dit team ga je applicaties (laten) ontwikkelen en beheren. Hierbij concentreer je je vooral op de functionele aspecten, zodat

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

28/04/2024 23:15:44
 
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.