Hoe een menu-item laten opvallen?
-
bmh - Lid geworden op: 11 okt 2014, 20:54
Hallo coderunner,
Ik heb met dreamweaver CS6 een website gemaakt voor mijn sportvereniging :
Deze bevat het volgende verticale menu:
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;
}
Ik heb met dreamweaver CS6 een website gemaakt voor mijn sportvereniging :
Deze bevat het volgende verticale menu:
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
Beste bmh,
Voor knipperende tekst, voeg je de blauwe code toe in je css
en in de html code
Coderunner
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
mvg,<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>
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
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.
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
Beste bmh,
Probeer eens met de blauwe code toe te voegen en de rode te verwijderen
Coderunner
Probeer eens met de blauwe code toe te voegen en de rode te verwijderen
mvg,.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;
}
}
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.
-
coderunner - Lid geworden op: 27 mar 2006, 04:35
- Locatie: Aubauke - Aentwaerepe
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
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.
-
coderunner - Lid geworden op: 27 mar 2006, 04:35
- Locatie: Aubauke - Aentwaerepe
Beste bhm,
Geen probleem, dat kan gebeuren maar dan beschouw ik dit topic als opgelost
mvg,
Coderunner
@moderator: probleem opgelost.
Geen probleem, dat kan gebeuren maar dan beschouw ik dit topic als opgelost
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.