Hover dropdown menu kleur

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Fullstack of back-end PHP developer

Functie Ieder onderdeel van de software draait op aparte servers en het bestaat dus echt uit verschillende componenten. Het team bestaat uit 4 developers, een klein team dus met korte lijnen. Alles in intern ontwikkeld en je werkt aan alle facetten. Van uitbreiding van de core tot maatwerk voor de klant. Ook liggen er verschillende uitdagingen op servervlak en databases. Je zult de eerste periode veel samenwerken met de lead developer om vervolgens echt je gang te gaan binnen de software. In het team streven ze naast de hoogst haalbare kwaliteit. Hiervoor werken ze nauw met elkaar samen en levert

Bekijk vacature »

.NET developer

Functie Als ervaren .NET ontwikkelaar start jij een team met 12 programmeurs. Jullie zijn verantwoordelijk voor het huidige platform van deze organisatie. Als team werken jullie in tweewekelijkse sprints en starten jullie iedere dag met een stand-up. Jij werkt samen met jouw team aan het uitbreiden van het huidige platform door middel van nieuwe features. Daarnaast zorg jij er samen met jouw team voor dat het platform veilig is en gebruiken jullie de nieuwste technieken om deze veiligheid te waarborgen. Zo maken jullie gebruik van C# .NET, .NET Core, React, Azure, Kubernetes, ASP.NET, MVC. Jij gaat aan het werk in

Bekijk vacature »

Medior front-end developer gezocht (€3.300 -

Functie Wat ga je doen? Jij als front-end developer gaat werken binnen de teams van/voor onze klant. Je werkt in een team met starters en ervaren ontwikkelaars met allemaal 1 overeenkomst; passie voor het vak. Maak je een fout? Geen probleem, leer ervan en ga dan weer door. Door de variëteit aan werk kun je in verschillende omgevingen een kijkje nemen en jezelf dus snel ontwikkelen. Wat hebben we jou te bieden? • Uitdagende projecten bij mooie klanten (bij jou in de buurt, of binnenkort intern vanuit ons kantoor!) • Een jonge organisatie met talentvolle collega’s • Veel ruimte voor

Bekijk vacature »

Software developer

Werkzaamheden voor jou als software developer Voor een goede relatie in de regio Zwolle (meerdere locaties) zoeken wij een software developer die betrokken is bij de ontwikkelcyclus en verantwoordelijk is voor het testen en keuren van nieuwe en geoptimaliseerde software. In deze functie ben je in de implementatiefase de persoon die risico's beoordeelt en intern oplossingen aanbrengt om risico's te verkleinen. Binnen het ontwikkelteam van de software ben je een belangrijke schakel waar je intensief meewerkt met scrum. Het voorkomen van bugs in de programma's en het bevorderen van gebruiksvriendelijkheid voor eindklanten zijn voor jou een uitdaging en geeft voldoening

Bekijk vacature »

Database Developer

Functieomschrijving Wat ga je doen? Als developer ben jij samen met een gemotiveerd team van 10 collega’s verantwoordelijk voor het creëren van aangemeten software voor klanten. Je bent klantvriendelijk en oplossingsgericht ingesteld, omdat het essentieel is om de klanten zo goed mogelijk te helpen met hun uitdagingen. Het is mogelijk om vanuit huis je werkzaamheden uit te voeren, maar het is ook prettig als je in de omgeving van Tilburg woont om naar het kantoor te kunnen komen. Vind jij het leuk om jouw creatieve vaardigheden te benutten om complexe systemen te ontwikkelen? Lees dan snel verder! Bedrijfsprofiel Voor wie

Bekijk vacature »

Senior Front-End Developer

Als Senior Front-End Developer bij Coolblue verbeter je de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Wat doe je als Senior Front-End Developer bij Coolblue? Als Senior Front-end Developer werk je aan de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Je vindt het leuk om samen te werken met de UX designer om stories op te pakken. Daarnaast ben je trots op je werk en verwelkomt alle feedback. Ook Senior Front-end Developer worden bij Coolblue? Lees hieronder of het bij je past. Dit vind je leuk om te doen Verbeteren van de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Nadenken

Bekijk vacature »

Low Code Ontwikkelaar

In het kort Als Low Code Developer werk je aan projecten bij en voor onze klanten, waarbij je voor het ontwikkelen van de oplossingen een technisch low-code platform gebruikt. Samen met het team streef je naar de beste oplossing en bepalen jullie de juiste aanpak. Je rol is divers en je bent van begin tot eind betrokken bij de ontwikkeling zowel de back-end en de front-end van de applicatie. Naast de ontwikkeling en oplevering, breng je ook advies uit aan de klant waarom bepaalde keuzes worden gemaakt. Je bent dan ook communicatief sterk en kunt je keuzes goed (inhoudelijk) onderbouwen.

Bekijk vacature »

Software Developer

Functie omschrijving Heb jij affiniteit met ICT en een WO diploma in de pocket? Dan ben je hier aan het juiste adres. Voor een opdrachtgever in Amsterdam zijn wij op zoek naar kandidaten die (enige) ervaring hebben met Java, Javascript, C of C++. Je zal door middel van trainingen worden opgeleid tot een volwaardige Software Developer. Er wordt tijdens de training natuurlijk veel aandacht besteedt aan de vaktechnische aspecten, maar er gaat ook veel aandacht uit naar jouw persoonlijke ontwikkeling. Bedrijfsprofiel Bij deze opdrachtgever in de omgeving van Amsterdam zoeken ze meerdere enthousiaste kandidaten die hun carrière willen starten met

Bekijk vacature »

Low Code Developer - Consultant

Functie omschrijving Wil jij fungeren als een spin in het web en samenwerken met klanten? Voor een leuke en interessante opdrachtgever in omgeving Leiden zijn wij op zoek naar een Low Code developer die zich bezig gaat houden met het optimaliseren van bedrijfsprocessen bij klanten en het leiden van projecten. Ben jij toe aan een nieuwe uitdaging en heb jij verstand van datamodellering en NO CODE Platformen? Lees dan snel verder! Bij deze rol horen de volgende werkzaamheden: Je gaat geen code kloppen maar bedenken hoe applicaties eruit moet komen te zien. Je gaat werken met een non code platform,

Bekijk vacature »

C# .NET Developer

Dit ga je doen Je richt je op het doorontwikkelen en herstructureren van het platform; Je werkt in teamverband en zelfstandig aan uitdagende projecten voor verschillende klanten; Softwareontwikkeling middels C# .NET; Je staat in contact met verschillende opdrachtgevers om de klantwensen te bespreken en deze vervolgens te ontwikkelen; Verbeteren van bedrijfsprocessen; Implementaties. Hier ga je werken Als .NET Developer kom je te werken in de regio van Lelystad bij een organisatie die met toonaangevende klanten uit heel Nederland samen werkt. De producten en diensten van de organisatie bereiken miljoenen Nederlanders. Hierbij komt een grote hoeveelheid informatie kijken en deze moet

Bekijk vacature »

Junior Fullstack Developer

Functie omschrijving Heb jij je universitair diploma Informatica afgerond en ben jij op zoek naar een startersfunctie waar jouw ontwikkeling in een hoog vaandel staat? Voor een softwarebedrijf in Amsterdam zijn wij op zoek naar een Junior Fullstack Developer. Je begint met een op maat gemaakte training om de kennis bij te spijkeren die jij nog mist. Uiteraard leer je het meeste tijdens je werk, maar de training geeft je hiervoor alvast de juiste handvatten. Je kunt het volgende verwachten! Jij ontwikkelt in technieken als Java, Javascript en SQL. Je werkt hierbij volgens de Agile/Scrum methode; Na het afronden van

Bekijk vacature »

Anaplan Developer

Dit ga je doen What are you going to do: Picking up Stories: Design planning had, how are we going to build it in Anaplan; Talking to the end user to build a forecasting model; Having contact with the data team about which data is needed; Being able to convert an Excel sheet into a 3, 4 or 5 dimensional modeling environment; Giving knowledge sessions about Anaplan; Solving incidents; Making instructional videos on how teams should read forecasts; Writing blogs about forecasting. Hier ga je werken We are looking for an Anaplan Builder to deliver end-to-end solutions within a big

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 Developer

Functieomschrijving Heb jij kort geleden jouw HBO ICT diploma in ontvangst mogen nemen? Of ben je toe aan een nieuwe uitdaging? Voor een gewaardeerde werkgever in regio Oosterhout zijn wij op zoek naar een back-end developer. Kennis of ervaring met C# & SQL is een must! Je bent verantwoordelijk voor de beheer en ontwikkeling van de software; Je draagt bij aan de implementatie van aanpassingen, verbeteringen en aanvullingen in de C# based applicaties; Je test de software en ontwikkelt deze door; Je houdt je bezig met het ontwikkelen van nieuwe functionaliteiten; Je brengt de aanpassingssuggesties van klanten in kaart, om

Bekijk vacature »

Infrastructure Developer

Vacature details Vakgebied: Software/IT Opleiding: Senior Werklocatie: Eindhoven Vacature ID: 12945 Introductie Our client is one of the most innovative companies within the Netherlands. Currently we are looking for an Infrastructure Platform Engineer. Within this role you will be developing the infrastructure. Functieomschrijving Within this role you are responsible in the development of our distributed data and compute platform infrastructure. You will design, develop and implement new features and fixes. Next to this you will integrate and configurate other packages that supports the development of tuning applications within the organisation. You will support customer sites remotely. Design and implement the

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

29/03/2024 08:59:33
 
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.