Spry menu bar

Status
Niet open voor verdere reacties.
M

me hartje music

Gebruiker
Lid geworden
5 mei 2009
Berichten
29
Halloo,

Naast mijn gewone leven heb ik website bouw als hobby voor in mijn vrije tijd, dit komt helaas niet vaak voor.
Maar als ik er tijd voor heb, probeer ik steeds wat nieuws aan mijn website toe te voegen.
Ik heb al vele maar totaal niet profesionele websites gemaakt, waarin ik spry menu bars heb gebruikt. maar nooit ging dit 100 % goed.
Maar dit keer wil ik alles perfect hebben voordat ik hem publiceer.

Dit is mijn website: http://vangrailfans.awardspace.us/
Daar heb ik een spry menu bar staan.
daar staan zwarte driehoekjes
Als ik er met mijn muis over heen gaat, worden zei wit, maar ik wil dat ze ook wit zijn als ik er niet met mijn muis over heen gaat.
Hoe doe ik dat ?


alvast bedankt.
 
Hoi

Dat zwarte driehoekje is waarschijnlijk een afbeelding (meestal gifje)
In dit geval dus zwart
Deze vervangen door een wit driehoekje.:)

gr leon
 
Hoi me hartje music,
In het stylesheet vangrailfans.awardspace.us/SpryAssets/SpryMenuBarHorizontal.css staat

onder /* ***** SUBMENU INDICATION: styles if there is a submenu under a given menu item ***** */

Code: 
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
    background-image: url("[COLOR="#B22222"][B]SpryMenuBarDown.gif[/B][/COLOR]");
    background-position: 95% 50%;
    background-repeat: no-repeat;
}
en een paar regels lager:
Code: 
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
    background-image: url("[COLOR="#B22222"][B]SpryMenuBarDownHover.gif[/B][/COLOR]");
    background-position: 95% 50%;
    background-repeat: no-repeat;
}
De SpryMenuBarDown.gif is het zwarte driehoekje, de SpryMenuBarDownHover.gif is het witte driehoekje.
Die hoef je alleen maar om te draaien, dat kan via de css:
Code: 
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
    background-image: url("[COLOR="#006400"][B]SpryMenuBarDownHover.gif[/B][/COLOR]");
    background-position: 95% 50%;
    background-repeat: no-repeat;
}
en een paar regels lager:
Code: 
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
    background-image: url("[COLOR="#006400"][B]SpryMenuBarDown.gif[/B][/COLOR]");
    background-position: 95% 50%;
    background-repeat: no-repeat;
}
  • Het kan ook door de images zelf te hernoemen naar de andere naam, dan kan de css hetzelfde blijven.

Met vriendelijke groet,
CSShunter
____________
PS: Ik zou de site-achtergrondkleur zeker een paar tinten donkerder maken, want nu is de tekst erg slecht te lezen.

vangrail-kleuren.png

Zie ook de post Voldoende contrastverschil ! in een ander topic op het forum.
 
csshunter:

Ik wilde hartje music ook zelf laten meedenken ;)

gr leon
 
@taeser:
Hoi Leon,
Sorry, ik had wat pedagogische gemakzucht over me. :o

Ik had natuurlijk moeten zeggen:
  1. Ken je de add-on Firebug voor Firefox al? Hiermee kan je in één oogopslag zien waar wat zit. Je kan Firebug hier downloaden. Heb je Firebug al, resp. is het downloaden gelukt?
  2. (even wachten op antwoord)
  3. Mooi! Open de pagina en klik rechts op zo'n uitrol-driehoekje, bv. van "De Band". In het context-menu'tje staat nu helemaal onderaan "Element inspecteren met Firebug". Klik! Wat zie je nu?
  4. (even wachten op antwoord)
  5. Juist! In het linker Firebug-venster staat nu "De Band" met z'n link blauw geselecteerd. Kan je ook zien hoe het trappetje is van de html-structuur waarmee "De Band" in de pagina-code staat?
  6. (even wachten op antwoord)
  7. Dat is goed! De tekst "De Band" staat:
    in een tabel in de <body>,
    en dan in de tweede <tr> (= de tweede tabel-rij),
    en dan in de eerste en enige <td> (tabel-kolom) van die rij,
    waarin een <ul> (een lijstje) zit met de kenmerken id="MenuBar1" en class="MenuBarHorizontal MenuBarActive".
    In dat rijtje zit "De Band" als tweede <li> (lijst-item),
    binnen een link <a> met het kenmerk class="MenuBarItemSubmenu".

    Dat is de ingewikkelde manier waarop zo'n Spry-menu in elkaar zit... - Als je met de muis op de blauwe regel gaat staan, zie je erboven dat "De Band" met z'n driehoekje lichtblauw is, met een paars randje (dat is de padding, de opvulling die eromheen zit). Maar wat zie je nu in het rechtervenster van Firebug, en wat zou dat betekenen?
  8. (even wachten op antwoord)
  9. Jawel! Daar staat bovenaan
    ul.menuBarHorizontal a.MenubarItemSubmenu { background-image: url(); ... enz.}
    en dat betekent: geef deze achtergrond-afbeelding aan elke link <a> die een class="MenuBarItemSubmenu" heeft, tenminste als die <a> is opgenomen in een <ul> die de class="MenuBarHorizontal" heeft. En we weten al: voor deze <a> van "De Band" zitten deze classes in het trappetje. We zitten dus op de goede plaats. Wat zie je als je met de muis over "SpryMenuBarDown.gif" heen hovert?
  10. (even wachten op antwoord)
  11. Inderdaad: het zwarte driehoekje! Je ziet ook dat het 7 bij 4 pixels groot is. Dat moet dus het witte driehoekje gaan worden. - Nu hover je met de muis over het zwarte driehoekje. Wat zie je allemaal gebeuren?
  12. (even wachten op antwoord)
  13. Krek! Het wordt een wit driehoekje, en in het linkervenster van Firebug wordt de class van de link even geel, en er staat nu iets anders in. De class heet nu: class="MenuBarItemSubmenu MenuBarItemSubmenuHover". Weet je ook hoe dat komt?
  14. (even wachten op antwoord)
  15. Ja, dat wordt veroorzaakt door het javascript waarmee alles in het Sprymenu bediend wordt. Eigenlijk is voor zo'n uitklapmenu helemaal geen javascript nodig, dat maakt de pagina onnodig zwaar en ingewikkeld. Maar zo doet het Sprymenu het nu eenmaal. Zie je ook iets in het rechtervenster van Firebug veranderen?
  16. (even wachten op antwoord)
  17. Klopt! Daar staan nu bovenaan: ul.MenuBarHorizontal a.MenuBarItemSubmenuHover { ... } en daar staat nu als background image: SpryMenuBarDownHover.gif. Dat zal het witte driehoekje zijn! Maar dat kan je niet in het rechtervenster van Firebug controleren, want zodra je uit het menu bovenaan weg-hovert, zet het javascript alles weer in de oude toestand, en floept het hover-image weer uit het rechter Firebug-venster. Wat zal er nu moeten gebeuren?
  18. (even wachten op antwoord)
  19. Helemaal goed! Het witte en het zwarte driehoekje moeten omgedraaid worden. Waar moet dat opgegeven worden?
  20. (even wachten op antwoord)
  21. Correct! Je hovert in het rechter Firebug-venster over de blauwe tekst SpryMe...tral.css (regel 121). Dat is een stylesheet (css-bestand), en in de verschijnende tooltip staat de volledige naam en het pad waar het zit: "http://vangrailfans.awardspace.us/SpryAssets/SpryMenuBarHorizontal.css". Het zwarte driehoekje staat daar dus op regel 121. Nu hover je nog even over "De Band". Wat staat er nu in het blauw van de link in het rechtervenster?
  22. (even wachten op antwoord)
  23. Yep! De witte "SpryMenuBarDownHover.gif" wordt op regel 135 aangeroepen. Wat nu?
  24. (even wachten op antwoord)
  25. Heel goed! Je gaat naar het Dreamweaver-venster van het stylesheet, en je verwisselt de afbeeldingen op regel 121 en regel 135. Klaar! Maar kan het ook op een andere manier?
  26. (even wachten op antwoord)
  27. Daar heb je gelijk in! Je kunt ook in Dreamweaver naar de afbeeldingenmap gaan, en daar SpryMenuBarDown.gif even tijdelijk SpryMenuBarDown-zwart.gif noemen. Dan kan vervolgens de SpryMenuBarDownHover.gif hernoemd worden tot SpryMenuBarDown.gif zonder dat het zwarte driehoekje verwijderd wordt. Tenslotte kan je de SpryMenuBarDown-zwart.gif hernoemen tot SpryMenuBarDownHover.gif. Ook klaar!

  28. Als je wilt weten hoe een prachtig css-uitklapmenu zonder Spry en zonder javascript gemaakt wordt, dan moet je kijken naar het "Suckerfish-menu". Dat heet zo vanwege het voorbeeld met een stamboom-menu van de zuigvissen en verwante soorten. Dit is wel zo ongeveer de oer-moeder van de css-dropdown menu's, met hier de artikelen en voorbeelden: [url]www.htmldog.com/articles/suckerfish/[/URL]. (Sons of Suckerfish) *)

  29. Meer voorbeelden van scriptloze css-uitklappers kan je hier vinden: css.maxdesign.com.au/listamatic2/index.htm (Listamatic).

  30. En wil je vlot een toegankelijke css-dropdowner, dan staat hier een generator die de code voor je uitdenkt: accessify.com/tools-and-wizards/developer-tools/list-o-matic/ (List-O-Matic).

... en zo waren we een klein weekje verder, of iets langer als me hartje music krap in de vrije tijd zit. Maar wel zeer educatief! ;)

Met vriendelijke groet,
CSShunter
___________
*) Het sfHover-javascript kan intussen gemist worden: dat was een extra'tje om het ook in Internet Explorer 6 te laten werken. Maar IE6 is in onbruik geraakt, en met ingang van IE7 gaat het ook zonder dat script goed in Internet Explorer.
 
Laatst bewerkt:
Ik heb echt mijn best gedaan, heb vanmorgen en gister middag er mee zitten stoeien, maar op de 1 of andere manier krijg ik dit menu echt niet hoe ik het wil.
Als ik op het pijltje sta met mijn muis gaat hij weg en mijn menu rolt niet meer uit.
Ik ben er nu wel een beetje klaar mee.
En baal dat het mij niett lukt
 
Hoi me hartje music,
Dat het uitklappen niet werkt, kan kloppen.
Er staat in het stylesheet:
Code: 
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
     right: auto;
}
Dat moet zijn:
Code: 
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
     left: auto;
}
En daar komen ze! :)

=======

Ik zou ook nog even iets als dit doen (of een ander kleurtje dat niet de background-color is):
Code: 
ul.MenuBarHorizontal ul {
    border: 1px solid green;
}
Dan is duidelijker waar het submenu zit.

=======

De SpryMenuBarDownHover.gif is nu het witte driehoekje geworden, maar bij een hover is nu de SpryMenuBarDown.gif van het toneel verdwenen (die kan door de server niet meer gevonden worden). Als dat de bedoeling is, is er niets aan de hand. *)
  • Maar als dat het zwarte driehoekje moet zijn, dan moet dat nog even worden geüpload, denk ik.

Met vriendelijke groet,
CSShunter
________
*) Het beste kan je dan regel 93 e.v. uit het stylesheet verwijderen, waar staat:
Code: 
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
    background-image: url("SpryMenuBarDown.gif");
    background-position: 95% 50%;
    background-repeat: no-repeat;
}
Dan hoeft de server niet tevergeefs te gaan zoeken. ;)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan