Hover dropdown menu kleur

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Junior .NET Developer

Dit ga je doen Als junior .NET Developer lever je met jouw oplossingen direct een bijdrage aan de bedrijfsprocessen van de klanten. Werkzaamheden waar jij je zoal mee bezig houdt zijn; Het ontwikkelen, onderhouden en optimaliseren van de draaiende platforms van de klanten; Softwareontwikkeling middels C#, .NET; Klantcontact om de wensen te bespreken en uit te werken; Optimaliseren van de (huidige) bedrijfsprocessen; De IT-afdeling bestaat uit 30 personen verdeeld over 3 teams. Het team waar je in terecht komt bestaat uit ongeveer tien man. Het is een team wat bestaat uit betrokken collega’s, waar iedereen bereidt is om elkaar te

Bekijk vacature »

Senior Front-end developer

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 »

.Net Front-end Ontwikkelaar

Wij zoeken een .Net Front-end Ontwikkelaar! Omschrijving Kun jij snel schakelen en ben je stressbestendig? Dan zoeken wij jou! Als .Net Front-end Ontwikkelaar help je mee aan de webapplicatie die over de hele wereld door allerlei bedrijven wordt gebruikt. Je werkt daarnaast mee aan nieuwe en verbeterde functionaliteiten en helpt met het oplossen van bugs. Over de opdrachtgever Je komt te werken in een ambitieus team dat zich blijft ontwikkelen. Dit is alle informatie die we nu kunnen delen over de werkplek. Als jij de .Net Front-end Ontwikkelaar bent voor deze job, vertellen we je snel nóg meer. Eisen Heb

Bekijk vacature »

Full Stack Software Developer C#.NET

Functieomschrijving Wij zijn op zoek naar een gepassioneerde Full Stack C#.NET Software Developer. Als Software Developer ben je verantwoordelijk voor het ontwikkelen van webapplicaties, apps en dashboards voor de eigen IOT-oplossingen. Je werkt samen met andere ontwikkelaars en engineers om de sensoren in machines uit te lezen en deze data om te zetten in management informatie voor jullie klanten. Taken en verantwoordelijkheden: Ontwikkelen en onderhouden van webapplicaties, apps en dashboards voor de eigen IOT-oplossingen. Testen en valideren van de ontwikkelde software. Actief deelnemen aan code reviews en bijdragen aan het verbeteren van de kwaliteit van de software. Je gaat aan

Bekijk vacature »

Oracle APEX Ontwikkelaar (3.500-6.000 euro)

Bedrijfsomschrijving Ben jij een getalenteerde Oracle APEX ontwikkelaar met minimaal één jaar ervaring in het ontwikkelen van Oracle APEX-applicaties? Ben je gepassioneerd over het ontwikkelen van bedrijfskritische oplossingen en wil je werken bij een toonaangevend consultancybedrijf? Dan zijn wij op zoek naar jou! Deze organisatie beschikt over zowel inhouse als externe projecten, maar bovenal over een sterk team en netwerk van opdrachten waardoor jij jezelf verder kunt ontwikkelen. Het team bestaat uit een aantal junior en medior developers, maar vooral uit senioren. De business unit managers binnen het team zijn mensen die hun vak verstaan en zelf als Oracle APEX

Bekijk vacature »

Medior/senior PHP ontwikkelaar E-commerce

Functie Het software development team bestaat momenteel 5 scrum teams . Ieder team heeft een eigen SCRUM Master en eigen tester. Zij werken voornamelijk in PHP en met hun eigen geschreven framework wat Symfony based is . Jij bent samen met je collega’s verantwoordelijk voor het interne softwaresysteem en alle projecten die daar omheen lopen. Alles wat jij ontwikkelt, wordt direct toegepast en uitgerold (wereldwijd). Dit maakt jouw werk tastbaar en uitdagend! Een greep uit jouw werkzaamheden: Toevoegen en ontwikkelen van nieuwe functionaliteiten Logistieke software ontwikkelen voor intern gebruik Tientallen gigabytes aan data inzichtelijk maken Altijd op zoek gaan naar

Bekijk vacature »

Back-End Web Developer

Als Back-End Web Developer bij Coolblue zorg je ervoor dat onze webshops elke dag een beetje beter zijn. Wat doe je als Back-End Web Developer bij Coolblue? Als Back-End Web Developer werk je met andere development teams samen om onze webshop zo optimaal mogelijk te laten werken en onze klanten blij te maken. Als backend developer weet je de weg in PHP, kan je in Typescript een microservice op zetten of ben je bereid om dit te leren. Ook Web Backend Developer worden bij Coolblue? Lees hieronder of het bij je past. Dit vind je leuk om te doen PHP

Bekijk vacature »

Dynamische Oracle/APEX Ontwikkelaar in de logistie

Bedrijfsomschrijving De organisatie in de regio Rotterdam is gespecialiseerd in het ontwikkelen van moderne webbased software voor de ERP branche. In totaal is er 20FTE aan specialisten actief binnen de organisatie. De ICT afdeling bestaat momenteel uit 15FTE. Ze groeien ontzettend hard en daarom zoeken zij een Oracle/APEX Developer die het reeds sterke team nog sterker komt maken. Hier werken ze op projectbasis voor verschillende grote organisaties in de logistieke sector. Het is een informele organisatie waarbinnen een fijne werksfeer heerst. Zoals aangegeven willen ze het team nog sterker maken en daarvoor zoeken ze bij voorkeur medior of senior Oracle/APEX

Bekijk vacature »

Medior/senior front end developer React Sportsoftw

Functie Voor deze functie ben ik op zoek naar een enthousiaste front end developer die communicatief vaardig is. Jij wordt onderdeel van een enthousiast jong team dat werkt aan grote websites. Binnen jouw rol ben jij diegene die de vertaling maakt van design naar functionele code en zorg jij voor goede experience op meerdere platformen. Dit doe je natuurlijk door gebruik te maken van onze stack; Javascript, HTML, CSS en React. Daarnaast wordt er gebruik gemaakt van Webcomponents en verschillende authenticatie tools. Doordat er hier gestreefd wordt naar de beste gebruikerservaringen, wordt het product constant doorontwikkeld. Hierdoor blijven ze voor

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 »

.NET Developer Shared Driving

Bedrijfsomschrijving Onze klant richt zich op het toegankelijker maken van steden, een fantastisch mooi streven. Hoe ze dat doen? Met eigen ontwikkelde software, waarmee vervoersmiddelen gedeeld kunnen worden. Deze inspirerende werkgever maakt een maatschappelijke impact en dat doen ze nu al zo'n 25 jaar! Het bedrijf is gevestigd in het centrum van Rotterdam en kent ongeveer zo'n 90 medewerkers. Het personeel is lekker gewoon gebleven! Iedereen kleedt zich zoals hij of zij dat zou willen en de sfeer is er erg fijn. Een leuke werkgever om voor te werken, en bovendien zijn er voor jou als Software Developer veel mooie

Bekijk vacature »

Junior Software Developer C# Verhuursector Verhuur

Samengevat: Wij ontwikkelen en leveren softwaresystemen voor de logistieke sector en de verhuursector. Ben jij geschikt als Junior Software Developer? Heb je ervaring met Delphi? Vaste baan: C# Software Developer Logistiek HBO €2.500 - €3.900 Deze werkgever is een software ontwikkelaar, gericht op software voor de logistieke sector. Deze werkgever heeft eigen producten ontwikkelen en leveren ook maatwerk. Ons bedrijf kent een boeiende en inspirerende werkomgeving met een open cultuur en mogelijkheden voor je verdere ontwikkeling. Bij bij hun werk je aan onze eigen bedrijfsapplicaties. Je ontwikkelt met ons de meest nieuwe software. Wij blinken uit als het gaat om

Bekijk vacature »

.NET developer

Wat ga je doen als Full stack .NET developer Microsoft 365? Je stelt je op als sparringpartner voor het team en PO over toekomstige functionaliteiten, architectuur en mogelijke nieuwe producten. Je bent mede-verantwoordelijk voor het vertalen en omzetten van een user story in een passend technisch design. Je implementeert functionaliteiten op basis van een technisch design en user story. Je bent mede-verantwoordelijk voor het beheer van Azure DevOps, waaronder het beheer van GIT, Build Pipelines, Release Pipelines en geautomatiseerde testen. Hier herken jij jezelf in Hbo werk- en denkniveau of hoger aangevuld met relevante certificeringen en/of cursussen; Minimaal 3 jaar

Bekijk vacature »

Oracle Developer / PL SQL

Dit ga je doen Software ontwikkeling aan een internationaal gebruikt pakket; Werken met technieken als Oracle 19c, Toad, PL/SQL, Oracle Forms, Reports en Designer; Meedraaien in internationale projecten; Meedenken over technisch en functioneel ontwerp; Samenwerken met collega's als Informatie Analisten, Testers en Release Managers; Soms wensen en eisen afstemmen met de business. Hier ga je werken Onze klant, een internationaal bekend bedrijf dat essentiële producten maakt waar iedereen graag gebruik van maakt, zoekt versterking in het Software Development team. Samen met 3 developers, een release manager, een informatie analist en 3 testers werk jij aan een systeem waarmee complexe producten

Bekijk vacature »

Network Engineer (f/m/d) in Heidelberg

Network Engineer (f/m/d) The IT Services team operates and supports the IT infrastructure and services at EMBL headquarters in Heidelberg and at the laboratory’s sites in Barcelona and Rome. As part of IT Services, the Network team is responsible for managing and developing the network infrastructure in our data centres, on campus, and to our external network providers. As a leading scientific institution with highly data-intensive research, extensive data flows at and between the laboratory’s six sites and to the Internet, EMBL is connected to national and international scientific networks using state-of-the-art technologies from vendors including Cisco, Extreme Networks and

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

04/05/2024 22:40:59
 
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.