Kleur aangeklikt menuitem in spry menu bar veranderen

[MrTeletony]

Hallo allemaal,

In een template maak ik gebruik van een verticale spry menu bar voor navigatie. Nu wil ik graag de kleur van het laatst aangeklikte menu-item laten veranderen, zodat de gebruiker weet op welke pagina hij/zij is.

Toelichting: stel de menu bar bestaat uit de items "Welkom", "pagina1" en "pagina2". Als de gebruiker op het item "pagina2" klikt, moet de kleur van alleen dat item veranderen. Als de gebruiker vervolgens op "Welkom" klikt, moet de kleur voor het item "pagina2" weer terugveranderen aar de defaultkleur en moet het item "Welkom" naar de nieuwe kleur veranderen, etc.

Heeft iemand hier een oplossing voor?

P.s.: het lukt me helaas niet om een afbeelding van de template te uploaden naar de site van Helpmij (krijg een error), wie meer visuele info wil kan ik het plaatje sturen.

Alvast dank!

Ton.

 

[michelscot]

Hallo Ton :thumb:

De aanpassing van je spry-menu kan je aanpassen in je SpryMenuBarHorizontal.css die je terug vindt in de map SpryAssets

Heb een vb-je gemaakt van de Css die aangepast is en deze vindt je na deze informatie in je Css-pagina

/*****************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts

*****************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #0000ff;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #006666;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #000066;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #000066;
color: #FFF;
}


Groetjes michelscot

 

[MrTeletony]

Hey michelscot,

Dank voor je reactie! Ja, ik was daar al bezig geweest. Standaard is er volgens mij geen functionaliteit die mijn "probleem" kan verhelpen. Ik heb geprobeerd handmatig dingen te veranderen, zo heb ik bijvoorbeeld een a:visited toegevoegd, maar daarmee krijgen alle menu items de bezochte kleur, dus dat werkte niet (zie voorbeeld hieronder).

/*Geeft de de bezochte link de kleur magenta en de achtergrond grijzig*/

ul.MenuBarVertical a:visited
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
color:#CC0066;
background-color: #EEEEEE;
}

Ook a:clicked heb ik geprobeerd, zonder resultaat. Maar misschien weet jij nog andere (standaard)eigenschappen die ik kan proberen?

Groeten,

Ton

 

[michelscot]

Hallo Ton :thumb:

ul.MenuBarVertical a:visited zal niet werken omdat deze in het bestand van Java-script niet wordt herkend.

Je moet gewoon in
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
de backgrond-color dezefde waarde geven als in
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
groetjes Michelscot

 

[MrTeletony]

Hmm, wat ik ook probeer, het lukt me niet. Ik denk dat ik de spry menu bar maar aan de wilgen hang en een andere navigatie ga proberen. Dank voor het meedenken michelscot!

Groeten,

TOn

 

[csshunter]

Hoi Ton,
Hola! Het ligt niet aan het Spry-menu!

Het probleem is, dat browsers niet zomaar kunnen onthouden op welke link geklikt is (op de vorige pagina), zodat het menu op de nieuwe pagina niet weet welke pagina als "actuele pagina" een speciaal kleurtje moet krijgen.

Maar er is ook een oplossing.
Die werkt als volgt:

Stap 1
Alle links <a> van het menu (of alle <li>'s, dat kan ook; dan moet de css van Stap 3 wat anders worden) geef je een eigen id="..." (als ze die niet al hebben).
Bijvoorbeeld:

<ul>
   <li><a id="home" href="index.html">Home</a></li>
   <li><a id="verder" href="verder.htm">Verder</a></li>
   ...
   <li><a id="contact" href="contact.htm">Contact</a></li>
</ul>

Stap 2
Nu geef je elke pagina zijn eigen naam als class-naam, die je vastmaakt aan de body-tag. Bv. voor de homepage:

...
</head>
<body class="home">
...

Voor de pagina Verder:

...
</head>
<body class="verder">
...

enz.
Hierdoor weet de actuele pagina zelf welke pagina het is. Dat kan vervolgens gebruikt worden om een afwijkende kleur voor die pagina in het menu te bedienen.

Stap 3
Nu komt het slimme van css. Als de actuele pagina in het menu een gele achtergrondkleur moet krijgen, maak je het volgende rijtje in de css:

.home #home,
.verder #verder,
   
   enz. t/m

.contact #contact {
   background: yellow;
   }

Dat betekent: als de link #home van het menu voorafgegaan wordt door ergens in de html een class="home", dan moet die #home-link een gele kleur krijgen.
Dat is alleen het geval als het de homepage zelf is, want dat is de enige pagina die een class="home" in de <body> heeft staan.
De andere links #verder t/m #contact reageren niet op de homepage, die reageren alleen op hun eigen pagina: want daar staat er de class="verder" voor #verder, enz.

Zo kan toch op elke pagina hetzelfde menu gebruikt worden.
Op dezelfde manier kan je i.p.v. een achtergrondkleur ook de positie van een knop laten opschuiven, of een andere achtergrond-afbeelding gebruiken, of een andere kleur randje geven, enz.

• Zie bv. deze testpagina: daar is steeds de knop van de actuele pagina wat anders, volgens hetzelfde principe.

Met vriendelijke groet,
CSShunter

 

[MrTeletony]

Wow, ik ben onder de indruk, dit werkt! Helaas minder onderhoudsvriendelijk dan ik had gehoopt, maar daar kan jij niets aan doen Dank voor je reactie CSShunter en je geweldig duidelijke uitleg, ik ben een gelukkig mens:thumb:

Hartelijk groeten,

Ton

 

[csshunter]

Helaas minder onderhoudsvriendelijk dan ik had gehoopt, maar daar kan jij niets aan doen.

Valt toch wel mee?

• Bij een site waar al een aantal pagina's in het menu (en eventueel: submenu's) zitten, moet deze inderdaad aangepast worden volgens het stappenplan. *)
  Maar dat is éénmalig. Daarna hoef je er nooit meer iets aan te doen!
  
  
• Bij een nieuwe pagina werkt het stappenplan op mini-schaal; dan:
  1. geef je deze in het menu een eigen id,
  2. geef je deze in de body een eigen class,
  3. en voeg je in het stylesheet een regeltje .nieuwepagina #nieuwepagina {...} toe in het al bestaande rijtje.

Klaar!

Met vriendelijke groet,
CSShunter
____________
*) Als je een menu hebt dat er via een php-include in gezet wordt, is het helemaal eenvoudig. Dan hoef je alleen de menu-include en het stylesheet te wijzigen, en elke pagina even z'n class in de de <body> te geven.

Menu via php-include? Ja, dan hoeft niet op elke pagina het menu er opnieuw in te komen, maar wordt dit vervangen door 1 verwijsregeltje. Aanpassen van het menu is zo kinderspel. Supersimpel en superhandig!

• Zie voorbeeld en handleidinkje.

 

[ronhoo]

Menu via php-include? Ja, dan hoeft niet op elke pagina het menu er opnieuw in te komen, maar wordt dit vervangen door 1 verwijsregeltje. 
Aanpassen van het menu is zo kinderspel. Supersimpel en superhandig! •[B]Zie voorbeeld en handleidinkje[/B].

de link werkt niet (meer).
Wat is de juiste link?

 

[csshunter]

Hoi ronhoo,
Ja, dat is tragico...
Deze site is gehackt , en het is de provider nog niet gelukt om alles op orde te krijgen.
De links kloppen in principe wel...

Maar ik heb de mini-tutorial inmiddels op een andere server gezet: de opzet van een php-site

Met vriendelijke groet,
CSShunter

 

[ronhoo]

CSSHUNTER,
bedankt voor je reactie, de uitleg is helder en duidelijk.
Ik ga het proberen.

Maar ik heb nu toch nog een klein probleemje,

Ik heb mijn pagina's gemaakt van een sjabloon.
Ik kan de body-tag alleen een naam gevenals ik de pagina van het sjabloon loskoppel, en dat wil ik eigenlijk niet.
Want ik krijg de pagina daarna niet meer goed gekoppeld aan de sjbloon
Hoe kan ik dit dan oplossen?

 

[csshunter]

Kan je de <body> tag in het sjabloon tot "editable region" maken?
Dan kan het sjabloon verder doen wat het wil, en kan je op elke afzonderlijke pagina weer wel de body-tag aanpassen.

Met vriendelijke groet,
CSShunter

 

[ronhoo]

csshuntere,
jouw voorstel lukt niet, ik pas de bodynaam nu aan in kladblok

nu nog stoeien met jouw oplossing mbt de kleur van de menubalk