css tabbed image menu open on click

[damnsharp]

Beste collega's,
Ik heb een css menu met tabs gemaakt met plaatjes. Normaliter doe ik alles in css programmeren maar vanwege dit voor mij complexe menu toch plaatjes gebruikt.
Ik dingen tegen die ik niet weet hoe ik die moet oplossen.
Eerst het menu op mijn testsite zie je hier.
Bij hover zie je diverse groottes van de tabs en dat is vanwege dat er nog submenu items moeten komen te staan.

Mijn vragen:
1. achtergrond witte tabs mainmenubg.png is 800px groot maar wordt weergegeven op 790px, waarom?
2. hoe krijg ik het voor mekaar dat tekst menu item bij hover zichtbaar wordt (geprobeerd met selector bij home maar lukt niet)
3. is het mogelijk i.p.v. hover er op een menuitem geklikt moet worden en dan plaatje blijft staan?
4. als je van home naar rechts met de muis gaat klapt elke item open maar terug niet, ik snap niet waarom.

Alvast hartstikke bedankt!

 

[rv94]

Als eerste er is een mogelijkheid om dit menu voor elkaar te krijgen zonder afbeeldingen. Door gebruik te maken van border-radius.

1. dat heeft er mee te maken dat je in je plaatje aan beide kanten een paar px wit ruimte hebt.
2. http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu hier een voorbeeld hoe je een dropdown menu kan maken.
3. dat het submenu zichtbaar blijft? dat is mogelijk met behulp van jQuery.
4. Dit heeft er mee te maken dat het plaatje van het submenu er overheen zit en als je naar rechts gaat niet omdat dit menu lager in het script staat.

 

[damnsharp]

Hoi rv94,
Dank je wel voor je reactie.
Wbt border-radius, dat dacht ik ook maar kijk eens naar home, products en contact als je daarop klikt en hoe de border links eruit ziet, krijg ik met border-radius niet voor mekaar. Te lang mee bezig geweest en op een gegeven moment gestopt.


1. inderdaad, heb ik aangepast
2. dank je, maar snap bij mijn menu nog niet waarom ik de hover tekst niet bovenaan krijg
3. Ik heb wel wat gevonden met javascript en kan dan met een plaatje het gehele menu openklappen (zie hernieuwd helpmij testsite) maar hoe ik dat aan individuele items koppel weet ik niet.
Gehaald van deze site. Heb je link hoe ik dat met jquery kan doen?
4. is dit te verhelpen en zo ja hoe?

 

[rv94]

hierbij een link met een tutorial hoe het in css mogelijk is
http://css-tricks.com/tabs-with-round-out-borders/

1. Graag gedaan
2. Met z-index:1; kan je een ander element voor aan zetten dit is meteen het antwoord op vraag 4.
3.

<script>
$(document).ready(function(){
  $("#menu li").click(function(){
    $("het submenu").toggle();
  });
});
</script>

 

[damnsharp]

hoi @rv94, fijn dat je meedenkt. Ik ben alweer een stap verder. Er gebeurd wat maar niet nog de bedoeling.
Ik heb de javascript eruit gehaald en jquery erin gestopt. Alle subitems een class submenu gegeven.
Als ik nu klik op bijv. home verdwijnt tekst bij alle menuitems met submenu. Ik zal vast in CSS wat moeten wijzigen maar snap de jquery nog niet goed.

Ook z-index lukt me niet met geselecteerd menu item. Ik heb even met hover geprobeerd maar misschien doe ik niet goed de selectors:

#menu .home a:hover {
color: green;
z-index: 1;
}

Alvast weer bedankt! En ik ga die css-tricks uitproberen.

 

[rv94]

dit kun je met dit script oplossen:

<script>
$(document).ready(function(){
  $("#menu li").click(function(){
    $(this).find( '.submenu' ).toggle();
  });
});
</script>

 

[damnsharp]

Hoi rv94. Ik snap het niet, script vervangen? Erbij zetten? Allebei geprobeerd maar het schiet niet op.
Dank je voor meedenken en vooral ook geduld :thumb:

En wbt z-index, ik weet dat om die te gebruiken de elementen een positie moeten hebben dus bijv. relative. Maar waar zet ik die positie dan op?

 

[damnsharp]

Oh, de z-index is opgelost, op de span waarmee ik de achtergrondplaatjes laat zien heb ik een z-index van -10 gezet en op de #menu a een z-index van 10. Nu nog submenu items maken en vooral het klik probleem.
Overigens als erop geklikt wordt moet het menu open blijven staan totdat op "close" geklikt wordt, deze button ga ik er nog bij maken.

 

[rv94]

Ik zie nu dat je het iets anders hebt gedaan.
de volgende code moet je door de huidige vervangen
Code:
<script>
$(document).ready(function(){
$("#menu li").click(function(){
$(this).find( 'span' ).toggle();
});
});
</script>

zodat span zichtbaar wordt als je op de li klikt die er buiten staat.

 

[damnsharp]

Ha super @rv94! Het schiet nu echt op, had ik maar eerder hulp ingeschakeld want ben er al lang mee bezig. Ik heb bij #menu a:hover span wel de display:block; eruit gehaald en nu met klik gaat menu open! En als ik ergens op de pagina klik blijft menu ook open. Fijn.
Maar wat nog niet goed gaat is als je na home op about hebt geklikt, dan blijft home open staan. Is dat op te lossen? Dus als je op een andere menu item klikt moet ander menu item uit dicht gaan.

 

[rv94]

Dat probleem kan je waarschijnlijk oplossen door boven

$(this).find( 'span' ).toggle();

de code $('span').hide(); te zetten. Als dit niet wil werken bedenken we een andere oplossing.

 

[damnsharp]

Super bedankt voor het meedenken ook in het weekend! :thumb: Volgens mij zijn we er echt bijna want als ik op home klik en dan op about en zo verder naar rechts klappen ze allemaal een voor een open totdat ik bij de laatste ben gekomen en dan weer naar begin.
Alleen er is wel een "maar", als ik terug klik van about naar home opent die niet.... aargh. Dat een "klein" probleem lastig kan zijn. Nou tips weer welkom!

 

[rv94]

Z-index blijft nog het probleem, we kunnen dat verhelpen door elke li een position: relavtive; en z-index: 1; mee te geven.
En dan met jQuery een click functie als je op een menu balk klikt de li z-index 0; krijgt.

de jQuery code is daarvoor:

$(this).find('span').css("z-index","0");

Ik hoop dat dit het probleem verhelpt.

 

[damnsharp]

Dank je rv94. Ik snap het zelf niet helemaal meer dus heb het gewoon opgevolgd deze keer. Maar nog niet heel goed.
css toegevoegd:

#menu li {
	position: relative;
	z-index: 1; 
}

jquery script is nu:

<script>
	$(document).ready(function(){
		$("#menu li").click(function(){
			$(this).find( 'span' ).toggle();
			$(this).find('span').css("z-index","0");
		});
	});
</script>

 

[rv94]

Ik zie een klein foutje de jQuery code moet:

<script>
	$(document).ready(function(){
		$("#menu li").click(function(){
$('span').hide();
			$(this).find('span').toggle();
			$(this).css("z-index","0");
		});
	});
</script>

 

[damnsharp]

Goedemorgen! Dank je weer voor aanvulling.
Wat er nu gebeurd is het volgende:
van home naar contact en terug klikken werkt goed
van support naar contact ook goed
maar van about us naar products en een paar andere combinaties ook niet.
Er zal een logica inzitten maar ik zie hem niet.

Ik heb in html code alvast in commentaar een submenu gezet en css submenu toegevoegd maar dat is na dit testen gebeurd dus geeft lijkt mij er niets mee te maken.

 

[damnsharp]

Oh, nog een aanvulling, ik heb hem in deze wordpress test website van mijzelf gezet en daar gaat het mis dat als ik op een menu item klik door de pagina refresh het menu niet open blijft... aargh. Krijg jij er ook al een punthoofd van?

 

[damnsharp]

Misschien moet de volgende code gebruikt worden, vond iets wat er zeer op lijkt maar de jquery code bij deze website en vraag gaat mij wat te boven.

 

[rv94]

Dat heeft er waarschijnlijk mee te maken, dat je als je op de wordpress site op een link klikt. Hij meteen naar die pagina gaat en daardoor niet het menu kan openen.

 

[damnsharp]

Dat zou erg vervelend zijn Maar nog even terug naar deze site, weet je waarom het daar niet goed gaat?

Overigens deze site heet ook zo'n click menu en die blijft wel open staan maar zo te zien geen WordPress.