Hoe een menu-item laten opvallen?

Vragen/antwoorden betreffende het maken van je eigen website.

bmh
Lid geworden op: 11 okt 2014, 20:54

04 jan 2015, 11:38

Hallo coderunner,

Ik heb met dreamweaver CS6 een website gemaakt voor mijn sportvereniging :

Deze bevat het volgende verticale menu:
Afbeelding

Onder Actuele mededelingen valt niet zo vaak iets te melden. Het gevolg is dat de leden dat item al eens overslaan. En wil het dan lukken dat er net dan toch een belangrijke mededeling staat.

Daarom zoek ik een oplossing om het menu-item 'Belangrijke mededelingen' bv te doen 'blinken' of in een andere kleur te zetten wanneer er een mededeling is.
Hoe pak ik dat aan? Kunt u mij daarbij helpen?

Ter info plaats ik hier de HTML code van het menu en de CSS ervan:

HTML code van mijn menu:

<div id="menu">
<ul id="dropdown">
<li><a href="index.html">Home</a></li>
<li><a href="Fotogalerij/WOW%20Slider/Fotogalerij.html">Fotogalerij</a></li>
<li><a href="#">Anekdotes</a>
<ul>
<li><a href="Anekdotes/Anekdotes_intern.html">Intern</a></li>
<li><a href="Anekdotes/Anekdotes_citaten.html">citaten</a></li>
</ul>
</li>
<li><a href="Weer/weer.html">Weer</a></li>
<li><a href="Mop%20van%20de%20week/Mop%20van%20de%20week.html">Mop v/d week</a></li>
<li><a href="Nuttige%20links/Nuttige%20links.html">Nuttige links</a></li>
<li><a href="Actuele%20mededelingen/Actuele%20mededelingen.html">Actuele mededelingen</a></li>
</ul>
</div>



CCS van mijn menu:

@charset "utf-8";
#dropdown li{
width: 120px;
list-style-type: none;
margin-bottom: 2px;
}

#dropdown ul{
position: absolute;
width: 100px;
left: -1000px;
margin-top: -22px;
margin-right: 0;
margin-bottom: 0;
margin-left: 95px;
}

#dropdown li li{
width: 60px;
}

#dropdown li:hover ul, #dropdown li.ie_does_hover ul{
left: -10px;
}

#dropdown li:hover ul ul, #dropdown li.ie_does_hover ul ul{
left: -1000px;
}

#dropdown ul li:hover ul, #dropdown ul li.ie_does_hover ul{

}

#dropdown a {
display: block;
text-decoration: none;
margin: 1px;
padding-top: 2px;
padding-right: 4px;
padding-bottom: 3px;
padding-left: 4px;
}

#dropdown a:link, #dropdown a:visited{
color: #003300;
background-color: #BED88F;
}

#dropdown a:hover, #dropdown a:active{
color: #EBF3DD;
background-color: #003300;
}
#dropdown {
padding: 15px;
margin-top: 0px;
}

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

04 jan 2015, 16:14

Beste bmh,

Voor knipperende tekst, voeg je de blauwe code toe in je css
@charset "utf-8";
#dropdown li{
width: 120px;
list-style-type: none;
margin-bottom: 2px;
}

#dropdown ul{
position: absolute;
width: 100px;
left: -1000px;
margin-top: -22px;
margin-right: 0;
margin-bottom: 0;
margin-left: 95px;
}

#dropdown li li{
width: 60px;
}

#dropdown li:hover ul, #dropdown li.ie_does_hover ul{
left: -10px;
}

#dropdown li:hover ul ul, #dropdown li.ie_does_hover ul ul{
left: -1000px;
}

#dropdown ul li:hover ul, #dropdown ul li.ie_does_hover ul{

}

#dropdown a {
display: block;
text-decoration: none;
margin: 1px;
padding-top: 2px;
padding-right: 4px;
padding-bottom: 3px;
padding-left: 4px;
}

#dropdown a:link, #dropdown a:visited{
color: #003300;
background-color: #BED88F;
}

#dropdown a:hover, #dropdown a:active{
color: #EBF3DD;
background-color: #003300;
}
#dropdown {
padding: 15px;
margin-top: 0px;
}


.blink {
animation: blink 1s steps(5, start) infinite;
-webkit-animation: blink 1s steps(5, start) infinite;
color:white;

}
@keyframes blink {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink {
to {
visibility: hidden;
}
}

en in de html code
<div id="menu">
<ul id="dropdown">
<li><a href="index.html">Home</a></li>
<li><a href="Fotogalerij/WOW%20Slider/Fotogalerij.html">Fotogalerij</a></li>
<li><a href="#">Anekdotes</a>
<ul>
<li><a href="Anekdotes/Anekdotes_intern.html">Intern</a></li>
<li><a href="Anekdotes/Anekdotes_citaten.html">citaten</a></li>
</ul>
</li>
<li><a href="Weer/weer.html">Weer</a></li>
<li><a href="Mop%20van%20de%20week/Mop%20van%20de%20week.html">Mop v/d week</a></li>
<li><a href="Nuttige%20links/Nuttige%20links.html">Nuttige links</a></li>
<li><a href="Actuele%20mededelingen/Actuele%20mededelingen.html"><span class="blink">Actuele mededelingen</span></a></li>
</ul>
</div>
mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

bmh
Lid geworden op: 11 okt 2014, 20:54

04 jan 2015, 18:34

Zoals ik van je verwacht had werkt het perfect !
Super bedankt coderunner, je bent een crack.

De basis van mijn website is een sjabloon met één bewerkbaar gebied en dat is de DIV "Inhoud".

Om snel te kunnen switchen tussen een blinkend en niet blinkend menu-item heb ik aan mijn sjabloon jouw codes toegevoegd en dan opgeslagen met een andere naam. Zo heb ik nu de keuze tussen twee sjablonen.

De kleur 'White' heb ik wel naar persoonlijke voorkeur aangepast, namelijk de standaardkleur die in gebruik was. Toch zou het niet misstaan indien het zou blinken van kleur 1 naar een kleur 2. Dus werken met twee kleuren.

Indien je er de tijd voor hebt dan mag je me in die zin een aanpassing doen. Maar dat presseert niet hoor.

Al bij voorbaat bedankt.

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

04 jan 2015, 19:17

Beste bmh,

Probeer eens met de blauwe code toe te voegen en de rode te verwijderen
.blink {
color: black;
animation: blink 1s infinite;
-webkit-animation: blink 1s infinite;

}
@keyframes blink {
to {
visibility: hidden;
color: red;
}
}
@-webkit-keyframes blink {
to {
visibility: hidden;
color: red;
}
}
mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

bmh
Lid geworden op: 11 okt 2014, 20:54

04 jan 2015, 21:27

Ik was enkele uren offline maar zie dat je al een nieuw antwoord geplaatst hebt. dat is snel. Dank u.

Ik ga er morgen mee aan de slag. Ik hou je op de hoogte van het resultaat.

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

06 jan 2015, 18:07

Beste bmh,

Was het dat wat je moest hebben of zoals daarvoor dat het echt knipperend moet zijn met een even onzichtbaar tekstknop ? zoals zichtbaar (kleur 1) - onzichtbaar - zichtbaar(kleur 2) - onzichtbaar- zichtbaar (kleur 1) enz ...

mvg,
Coderunner
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

bmh
Lid geworden op: 11 okt 2014, 20:54

06 jan 2015, 18:19

Oei, ik dacht je al over het resultaat geïnformeerd te hebben. Dat blijkt niet zo te zijn. Sorry hoor coderunner.
Wel ik ben zeer tevreden over het resultaat hoor. Je bent ne crack. Super bedankt. Ik ben blij dat hier zo een kenner actief is.

coderunner
Lid geworden op: 27 mar 2006, 04:35
Locatie: Aubauke - Aentwaerepe

06 jan 2015, 18:37

Beste bhm,

Geen probleem, dat kan gebeuren maar dan beschouw ik dit topic als opgelost :wink:

mvg,
Coderunner




@moderator: probleem opgelost.
Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.