login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Uitklap menu en positie andere divs

Offline Jointjeff - 01/11/2011 10:15 (laatste wijziging 01/11/2011 10:25)
Avatar van JointjeffHTML interesse Goedemorgen iedereen,

Ik heb een menu die kan uitklappen, zowel horizontaal als verticaal. Het "probleem", of beter gezegd uitdaging, is op het moment wanneer het menu in de breedte uitklapt dat de andere divs, in dit geval #content wat verplaatst naar rechts.

Zie ook deze screenshots om een een beter beeld te krijgen van de situatie.
- http://vrds.nl/sima/screens/afb1.jpg
- http://vrds.nl/sima/screens/afb2.jpg

CSS:
Plaatscode: 141368

HTML code:
Plaatscode: 141369

Hopende op hulp om dit met CSS dan wel jQuery voor elkaar te krijgen.

10 antwoorden

Gesponsorde links
Offline vinTage - 01/11/2011 10:41
Avatar van vinTage Nieuw lid met jQuery kan je gemakkelijk content wat opzij zetten met css
Je knoopt een hover en click aan je main menu en gaat daarin klooien met die css.
Offline Jointjeff - 01/11/2011 10:48
Avatar van Jointjeff HTML interesse Heb ik ook geprobeerd. Het ging alleen mis op het punt, dat de content dan ook weer terug moet als het menu dichtgeklapt is, en dat de content niet telkens als er geklikt wordt b.v. 200px naar rechts gaat.

jQuery code menu:
Plaatscode: 141370

Bedankt voor je antwoord!
Offline vinTage - 01/11/2011 10:55
Avatar van vinTage Nieuw lid je kan bv met een timertje kijken of het menu dicht mag klappen, (als de muis zich niet in het menu bevind).
Offline Jointjeff - 01/11/2011 10:59 (laatste wijziging 01/11/2011 11:40)
Avatar van Jointjeff HTML interesse Zou je me enigszins op weg kunnen helpen om dat te bewerkstelligen?

Wederom bedankt voor je antwoord.

Was nog even verder gegaan met het eerdere idee. Enig idee waarom dit niet werkt (hover wel, click niet)?
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(function() {
  2.    $('#menu li ul li a').click( function(){
  3. 		$('#content').css('left', '420px');
  4.    },
  5.    function(){
  6.       $('#content').css('left', '210px');
  7.    });
  8. });
Offline vinTage - 01/11/2011 13:47
Avatar van vinTage Nieuw lid waneer wil je dan wanneer je 'sub' weer verdwijnt ?
Offline Jointjeff - 01/11/2011 13:49 (laatste wijziging 01/11/2011 13:50)
Avatar van Jointjeff HTML interesse als er een ander menu-item aangeklikt wordt.
Offline vinTage - 01/11/2011 13:56 (laatste wijziging 01/11/2011 13:56)
Avatar van vinTage Nieuw lid dus niet als je van het menu af gaat ?

Dan blijft het dus altijd openstaan nadat je op het menu hovert/klikt (en tot je op een ander item klikte))?
Offline Jointjeff - 01/11/2011 14:03
Avatar van Jointjeff HTML interesse Daar heb je een goed punt. Wellicht is dat irritant voor gebruikers inderdaad.
Oke, wanneer je van het menu af gaat toch maar.
Offline vinTage - 01/11/2011 14:15
Avatar van vinTage Nieuw lid zo iets:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2. #menu{
  3.   width:100px;
  4.   float:left;
  5.   background:grey
  6. }
  7.  
  8. #content{
  9.   width:500px;
  10.   float:left
  11. }
  13.  
  14. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  16. $(document).ready(function () {
  17.  
  18. 	$('#menu').css('height', $(window).height());//voor het gemak even de hele hoogte van de pagina gebruik
  19.  
  20. 	$('#menu a').click( function(){
  21. 			$('#menu').animate({width: "200px"},  300);
  22. 	});
  23.  
  24. 	$('#menu a').mouseover( function(){
  25. 			$('#menu').animate({width: "200px"}, 300);
  26. 	});
  27.  
  28. 	$('#menu').mouseleave( function(){
  29. 		$('#menu').animate({width: "100px"}, 300);
  30. 	});
  31.  
  32. });
  34.  
  35.  
  36. <div id="menu">
  37.     <a href="#">linkje</a>
  38. </div>
  39.  
  40.  
  41.  
  42. <div id="content">
  43.     <?php echo str_repeat('content div inhoud<br />', 25);?>
  44. </div>
Offline Jointjeff - 04/11/2011 11:41 (laatste wijziging 04/11/2011 14:30)
Avatar van Jointjeff HTML interesse Hallo Vintage,
Bedankt voor je antwoord.

Op een of andere manier reageert hij niet op de click functie (ook niet als ik jou voorbeeld toepas), maar wel op de mouseover.

Dit is mijn accordion script, wellicht heeft het hier mee te maken.
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. jQuery.fn.initMenu = function() {  
  2.     return this.each(function(){
  3.         var theMenu = $(this).get(0);
  4.         $('.sub-menu', this).hide();
  5.         $('li.current-menu-parent > .sub-menu', this).show();
  6.         $('li.current-menu-parent > .sub-menu', this).prev().addClass('active');
  7.         $('li a', this).click(
  8.             function(e) {
  9.                 e.stopImmediatePropagation();
  10.                 var theElement = $(this).next();
  11.                 var parent = this.parentNode.parentNode;
  12.                 if($(parent).hasClass('noaccordion')) {
  13.                     if(theElement[0] === undefined) {
  14.                         window.location.href = this.href;
  15.                     }
  16.                     $(theElement).slideToggle('normal', function() {
  17.                         if ($(this).is(':visible')) {
  18.                             $(this).prev().addClass('active');
  19.                         }
  20.                         else {
  21.                             $(this).prev().removeClass('active');
  22.                         }    
  23.                     });
  24.                     return false;
  25.                 }
  26.                 else {
  27.                     if(theElement.hasClass('sub-menu') && theElement.is(':visible')) {
  28.                         if($(parent).hasClass('collapsible')) {
  29.                             $('.sub-menu:visible', parent).first().slideUp('normal', 
  30.                             function() {
  31.                                 $(this).prev().removeClass('active');
  32.                             }
  33.                         );
  34.                         return false;  
  35.                     }
  36.                     return false;
  37.                 }
  38.  
  39.                 if(theElement.hasClass('sub-menu') && !theElement.is(':visible')) {         
  40.                     $('.sub-menu:visible', parent).first().slideUp('normal', function() {
  41.                         $(this).fadeOut().prev().removeClass('active');
  42.                     });
  43.                     theElement.slideDown('normal', function() {
  44.                         $(this).prev().addClass('active');
  45.  
  46.                     });
  47.                     return false;
  48.                 }
  49.             }
  50.         }
  51.     );
  52. });
  53. };
  54. $(document).ready(function() {$('.main').initMenu();});


EDIT:
Kun je niet instellen dat wanneer "#menu ul li ul li ul" wel zichtbaar is (ipv niet) het menu 420px breed is in plaats van 220px?

EDIT 2:
Deze code lijkt te werken.
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. if ($('#menu ul li ul li ul').is(':visible')) {						$('#menu').css('width','440px');
  2.   } else {							$('#menu').css('width','240px');
  3. }
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.212s