login  Naam:   Wachtwoord: 
Registreer je!
 Forum

menu achter een plaatje weergeven

Offline avancleef - 17/08/2012 13:25 (laatste wijziging 17/08/2012 13:27)
Avatar van avancleefNieuw lid Beste,

ik heb de volgende css code:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .menu .audio-tab {
  2. 	width:100px;
  3. 	min-height:80px;
  4. 	position:absolute;
  5. 	top:35px;
  6. 	left:-9999px;
  7. 	z-index:1;
  8. 	background:#666666;
  9. }
  10.  
  11. .menu .options ul li.test:hover  {
  12. 	background:#0066FF;	
  13. }


Wat ik nu graag wil bereiken is het volgende.

De onderste code die moet aangepast worden dat zodat wanneer er een hover is op de "li" met de klasse naam 'test' dat de division met de klasse naam audio-tab een left:0px; krijgt.

Echter krijg ik het op geen enkele mogelijkheid voor elkaar. Het zou dus iets moeten worden van:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .menu .options ul li.test:hover THEN .menu .options ul li .audio-tab  {
  2. 	left:0px;	
  3. }


Probleem is dat ik als plaatje een menu heb wat niet vierkant of rechthoekig is en dat de tabs die eruit komen er dus ACHTER moeten komen (vandaar een z-index).

Het plaatje van het menu loopt een beetje bol (rond) af aan de onderkant, en ik wil dus dat de menu's mooi achter het plaatje te voorschijn komen.

Hopelijk kan iemand mij vertellen hoe ik dit (met enkel CSS, geen jQuery dus) voor elkaar kan krijgen.

15 antwoorden

Gesponsorde links
Offline larssy1 - 17/08/2012 13:31
Avatar van larssy1 MySQL beginner
avancleef schreef:
...

De onderste code die moet aangepast worden dat zodat wanneer er een hover is op de "li" met de klasse naam 'test' dat de division met de klasse naam audio-tab een left:0px; krijgt.

...


Dit bedoel je??

css code - Bekijk de code zonder highlighting - Klap code in 
  1. li.test:hover .audio-tab {
  2.    left: 0;
  3. }
Offline avancleef - 17/08/2012 13:39
Avatar van avancleef Nieuw lid Ja precies. Echter werkt dat niet, omdat de division met de naam audio-tab NIET in de li (lijst element) staat omdat dan de z-index niet werkt. Deze staat buiten het lijst element.

Mijn HTML code even ter voorbeeld:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Website</title>
  6.  
  7. <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" media="screen" />
  8. <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
  9.  
  10. <script src="js/jquery-1.8.0.min.js"></script>
  11. <script src="js/jquery-ui-1.8.23.custom.min.js"></script>
  12.  
  13. </head>
  15.  
  16. <div class="wrapper">
  17. 	<div class="menu">
  18.     	<div class="options">
  19.         	<ul>
  20.             	<li><a href="#" title="Home" onclick="return false">Home</a></li>
  21.                 <li class="test"><a href="#" title="Audio" onclick="return false">Audio</a></li>
  22.             </ul>
  23.         </div>
  24.         <div class="tab audio-tab">
  25.  
  26.         </div>
  27.     </div>
  28.     <div class="content">
  29.     	content
  30.     </div>
  31. </div>
  32.  
  33. </body>
  34. </html>
Offline larssy1 - 17/08/2012 13:49
Avatar van larssy1 MySQL beginner jquery?

js code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">

  2. $('.test').hover() {

  3. $('.audio-tab').css("left", "0px");

  4. }

  5. </script>
Offline avancleef - 17/08/2012 13:57
Avatar van avancleef Nieuw lid klopt, zo ver was ik ook haha maar als ik dan met de muis er niet meer op sta dan blijft hij staan.
Als ik dit tegen ga met jQuery, dan komt het menu na een "hover" wel netjes te voorschijn maar zo gauw als ik van de hover af ben, en het menu zou blijven staan met normaal CSS, klapt het menu vervolgens weer weg door de jQuery code.

Enig idee / suggestie hoe ik dat aan zou moeten pakken?

Alvast hartelijk dank voor je snelle en goede reacties!
Offline larssy1 - 17/08/2012 14:31 (laatste wijziging 20/08/2012 11:26)
Avatar van larssy1 MySQL beginner Nou, je zult wel de hover en 'unhover' moeten afhandelen inderdaad..

De left heeft een standaard waarde, en een nieuwe waarde.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. $('.test').hover(function() {
  3.    $('.audio-tab').css("left", "0px"); // nieuwe waarde
  4. },function() {
  5.    $('.audio-tab').css("left", "5px"); // standaard waarde
  6. });
  7. </script>


Als je in je css bestand dezelfde standaard waarde gebruikt, zal er zich geen probleem moeten voor doen.

---

audio-tab punten toegevoegd
Offline GroundZero - 20/08/2012 11:11
Avatar van GroundZero Lid Ik ga het dadelijk meteen eens proberen, dankjewel! ik laat je de uitkomst weten!
Offline larssy1 - 20/08/2012 11:25 (laatste wijziging 20/08/2012 13:16)
Avatar van larssy1 MySQL beginner
GroundZero schreef:
Ik ga het dadelijk meteen eens proberen, dankjewel! ik laat je de uitkomst weten!

zie trouwens dat r bij audio-tab een punt ervoor mis. moet je even kijken of die nodig is toe te voegen.

---

Voor de zekerheid even getest.. In mijn geval met margin-left, dat zul je dus nog even moeten aanpassen.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. $(document).ready( function() {
  3.    $('.test').hover(function() {
  4.       $('.audio-tab').css("margin-left", "0px"); // nieuwe waarde
  5.    },function() {
  6.       $('.audio-tab').css("margin-left", "5px"); // standaard waarde
  7.    });
  8. });
  9. </script>
Offline avancleef - 20/08/2012 15:08 (laatste wijziging 20/08/2012 15:30)
Avatar van avancleef Nieuw lid Hoi larssy1, dankjewel voor je snelle antwoord!

echter werkt het niet bij mij helaas.
Als ik op de knop hover dan komt het menu inderdaad mooi tevoorschijn, en wanneer ik van de knop af ga dan verdwijnt hij ook MAAR...

hoe kan ik nu met mijn muis pijl op het menu komen? want als ik van de knop af ga (geen hover meer) dan verdwijnt het menu 

Groetjes

P.S. onderstaand mijn code, ook heb ik een screenrecording gemaakt van enkele secondes zodat je kan zien wat er gebeurd als ik met de muis hoven en un-hover.

http://www.sendspace.com/file/p428ot

Mijn code:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Website</title>
  6.  
  7. <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" media="screen" />
  8. <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
  9.  
  10. <script src="js/jquery-1.8.0.min.js"></script>
  11. <script src="js/jquery-ui-1.8.23.custom.min.js"></script>
  12.  
  13. <script language="javascript" type="text/javascript">
  14. $(document).ready(function(e) {
  15.     $('#design-button').hover(function(){
  16. 		$('#menu-design').css('left', '30px');
  17. 	}, function(){
  18. 		$('#menu-design').css('left', '9999px');
  19. 	});
  20. });
  22.  
  23. </head>
  25.  
  26. <div class="wrapper">
  27. 	<div class="header">
  28.     	<img src="images/header.png" alt="Studiobizz - header" />
  29.     </div>
  30. 	<div class="menu">
  31.     	<div class="menu-background">
  32.         	<ul>
  33.             	<li><a href="/" title="">Home</a></li>
  34.                 <li><a href="#" title="Design" id="design-button" onclick="return false;">Design</a></li>
  35.                 <li><a href="#" title="Audio &amp; Recording" id="audio-en-recording-button" onclick="return false;">Audio &amp; Recording</a></li>
  36.             </ul>
  37.         </div>
  38.         <div class="menu-design" id="menu-design">
  39.         	<ul>
  40.             	<li><a href="" title="">Optie 1</a></li>
  41.                 <li><a href="" title="">Optie 2</a></li>
  42.                 <li><a href="" title="">Optie 3</a></li>
  43.                 <li><a href="" title="">Optie 4</a></li>
  44.                 <li><a href="" title="">Optie 5</a></li>
  45.             </ul>
  46.         </div>
  47.     </div>
  48.     <div class="content">
  49.  
  50.     </div>
  51. </div>
  52.  
  53. </body>
  54. </html>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. html, body, div, span, applet, object, iframe,
  5. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  6. a, abbr, acronym, address, big, cite, code,
  7. del, dfn, em, img, ins, kbd, q, s, samp,
  8. small, strike, strong, sub, sup, tt, var,
  9. b, u, i, center,
  10. dl, dt, dd, ol, ul, li,
  11. fieldset, form, label, legend,
  12. table, caption, tbody, tfoot, thead, tr, th, td,
  13. article, aside, canvas, details, embed, 
  14. figure, figcaption, footer, header, hgroup, 
  15. menu, nav, output, ruby, section, summary,
  16. time, mark, audio, vide, imgo {
  17. 	margin:0;
  18. 	padding:0;
  19. 	border:none;
  20. 	outline:none;
  21. }
  22.  
  23. body {
  24. 	font-family:Arial, Helvetica, sans-serif;
  25. 	font-size:12px;	
  26. }
  27.  
  28. .wrapper {
  29. 	width:986px;
  30. 	margin:25px auto;
  31. 	overflow:hidden;
  32. }
  33.  
  34. .header {
  35. 	width:986px;
  36. 	height:289px;
  37. 	float:left;	
  38. }
  39.  
  40. .menu {
  41. 	width:986px;
  42. 	height:90px;
  43. 	position:relative;
  44. 	float:left;
  45. }
  46.  
  47. .menu .menu-background {
  48. 	width:986px;
  49. 	height:90px;
  50. 	position:absolute;
  51. 	top:0px;
  52. 	left:0px;
  53. 	z-index:2;
  54. 	background-image:url(../images/menu.png);
  55. 	background-repeat:no-repeat;
  56. }
  57.  
  58. .menu .menu-background ul {
  59. 	list-style:none;
  60. 	margin:24px 0 0 20px;
  61. }
  62.  
  63. .menu .menu-background ul li {
  64. 	display:inline-block;
  65. 	padding:0 12px 0 12px;
  66. 	font-size:16px;
  67. }
  68.  
  69. .menu .menu-background ul li a:link, .menu .menu-background ul li a:visited {
  70. 	color:#FFFFFF;
  71. 	text-decoration:none;	
  72. }
  73.  
  74. .menu .menu-design {
  75. 	min-width:100px;
  76. 	min-height:40px;
  77. 	position:absolute;
  78. 	top:40px;
  79. 	left:-9999px;
  80. 	background:#999999;
  81. 	padding:30px 10px 10px 10px;	
  82. }
  83.  
  84. .menu .menu-design ul li {
  85. 	display:block;
  86. 	font-size:16px;
  87. }
  88.  
  89. .menu .menu-design ul li a:link, .menu .menu-design ul li a:visited {
  90. 	color:#FFFFFF;
  91. 	text-decoration:none;	
  92. }
  93.  
  94. .content {
  95. 	width:986px;
  96. 	min-height:200px;
  97. 	float:left;
  98. 	margin-top:25px;
  99. 	background:#000066;	
  100. }
Offline larssy1 - 20/08/2012 17:51 (laatste wijziging 20/08/2012 17:51)
Avatar van larssy1 MySQL beginner Ik weet misschien wel wat het probleem is, maar zou ik de url van je website mogen zodat de plaatjes normaal werken? is iets makkelijker en meteen goed 

daarnaast mis ik 1 css en 2 js bestanden je kunt deze eventueel naar mijn email adres opsturen.
Offline fluaju - 20/08/2012 17:56
Avatar van fluaju IRC nerd Is er geen CSS only manier? 
Offline larssy1 - 20/08/2012 18:08 (laatste wijziging 20/08/2012 18:46)
Avatar van larssy1 MySQL beginner Niet op zijn manier. Maar de code zal waarschijnlijk aangepast moeten worden waardoor het wel weer mogelijk wordt.

Ben hier op het moment mee bezig 

---

Niet langer jquery nodig 

http://www.unrealxs.com/beta/ bekijk bron voor html en css..

Mocht het niet werken , dan heb ik alsnog de url naar je website nodig, etc.
Offline GroundZero - 21/08/2012 10:19 (laatste wijziging 21/08/2012 10:31)
Avatar van GroundZero Lid hey larssy1 dankjewel, ik ga het meteen eens proberen! laat vanmiddag weten of het lukt. Nogmaals hartelijk dank voor je snelle reactie met oplossing!

P.S. Ik wou dat er een CSS only manier was, maar het probleem zit hem in het volgende:

Normaal is een menu blok (vierkant). Nu is dat dus NIET het geval. Een A element (link) word als een "block" weergegeven en dus vierkant.

Omdat het menu NIET vierkant is, ga je van het A element af voordat je op het menu staat dat dan verschijnt, en dus verdwijnt het menu dus weer.

Ik mail je de link naar de pagina zodat je het kunt zien.
Offline larssy1 - 22/08/2012 02:46
Avatar van larssy1 MySQL beginner ik kan het misschien wel werkend voor je maken, maar dan wordt er geen jquery gebruikt.. en komt het submenu bij het main menu te staan..

dan wordt het dus alsnog CSS based..

Met jquery gaat dit iig niet lukken denk ik.
Offline GroundZero - 22/08/2012 11:53
Avatar van GroundZero Lid CSS only was ook mijn voorkeur geweest om eerlijk te zijn. Als je het werkend zou krijgen dan ben ik je eeuwig dankbaar, ben inmiddels al bijna een week aan het zoeken naar een oplossing haha.

Groetjes
Offline avancleef - 23/08/2012 09:39
Avatar van avancleef Nieuw lid Ik heb het nog enkele keren geprobeerd maar tot op heden geen oplossing... iemand nog met ideeën die ik kan proberen?
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.373s