Witam mam menu i jak sobie wejdę np w list motywacyjny to chciałem mieć taka tabelkę jak tu tabela niestety nie udaje mi się to sad.gif bo nie wygląda to jak powinno i nie wiem co mam zrobić zęby mi to działało

pod kodem wrzucał wszystkie plik by odpalić i zobaczyć


kod pliku index.html
[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <title>Menu with jQuery</title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5.         <meta name="description" content="Little Boxes Menu or Navigation with jQuery - radnomly animate the menu items to show content, accodion like boxes menu" />
  6.         <meta name="keywords" content="jquery, boxes, menu, navigation, animate"/>
  7.         <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
  8. 		<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  9. 		<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
  10. 		<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
  11. 		<script type="text/javascript" src="js/jquery.betterTooltip.js"></script>
  12. 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  13.         <script type="text/javascript" src="jquery.easing.1.3.js"></script>
  14.        <script type="text/javascript">
  15. 	   $(function() {
  16.                 /* object to save the initial positions of each box */
  17.                 var divinfo = {"initial": []};
  18.                 /* index of the selected / clicked box */
  19.                 var current = -1;
  20.  
  21.                 /* we save the index,top and left of each one of the boxes */
  22.                 $('#littleBoxes > div').each(function(){
  23.                     var $this = $(this);
  24.                     var initial = {
  25.                                 'index' : $this.index(),
  26.                                 'top'     : $this.css('top'),
  27.                                 'left'     : $this.css('left')
  28.                     };
  29.                     divinfo.initial.push(initial);
  30.                 });
  31.  
  32.                 /* clcik event for the anchors inside of the boxes */
  33.                 $('#littleBoxes a').bind('click',function(e){
  34.                         var $this         = $(this);
  35.                         var $currentBox    = $this.parent();
  36.                         /* set a z-index lower than all the other boxes,
  37.                         to see the other boxes animation on the top*/
  38.                         $currentBox.css('z-index','1');
  39.  
  40.                         /* if we are clicking on a expanded box : */
  41.                         if(current == $currentBox.index()){
  42.                             /* put it back (decrease width,height, and set the top and left like it was before).
  43.                             the previous positions are saved in the divinfo obj*/
  44.                             $currentBox.stop().animate({
  45.                                     'top'         : divinfo.initial[$currentBox.index()].top,
  46.                                     'left'        : divinfo.initial[$currentBox.index()].left,
  47.                                     'width'     : '122px',
  48.                                     'height'    : '122px'
  49.                             },800,'easeOutBack').find('.boxcontent').fadeOut();
  50.  
  51.  
  52.                             $('#littleBoxes > div').not($currentBox).each(function(){
  53.                                 var $ele         = $(this);
  54.                                 var elemTop     = divinfo.initial[$ele.index()].top;
  55.                                 var elemLeft     = divinfo.initial[$ele.index()].left;
  56.                                 $ele.stop().show().animate({
  57.                                     'top'         : elemTop,
  58.                                     'left'        : elemLeft,
  59.                                     'opacity'    : 1
  60.                                 },800);
  61.                             });
  62.                             current = -1;
  63.                         }
  64.                         /* if we are clicking on a small box : */
  65.                         else{
  66.                             /* randomly animate all the other boxes.
  67.                             Math.floor(Math.random()*601) - 150 gives a random number between -150 and 450.
  68.                             This range is considering the initial lefts/tops of the elements. It's not the exact right
  69.                             range, since we would have to calculate the range based on each one of the boxes. Anyway, it
  70.                             fits our needs...
  71.                             */
  72.                             $('#littleBoxes > div').not($currentBox).each(function(){
  73.                                 var $ele = $(this);
  74.                                 $ele.stop().animate({
  75.                                     'top' : (Math.floor(Math.random()*601) - 150) +'px',
  76.                                     'left': (Math.floor(Math.random()*601) - 150) +'px',
  77.                                     'opacity':0
  78.                                 },800,function(){
  79.                                     $(this).hide();
  80.                                 });
  81.                             });
  82.  
  83.                             /* expand the clicked one. Also, fadeIn the content (boxcontent)
  84.                             if you want it to fill the space of the littleBoxes container,
  85.                             then these are the right values */
  86.                             var newwidth     = 379;
  87.                             var newheight     = 379;
  88.                             $currentBox.stop().animate({
  89.                                 'top'     : '0px',
  90.                                 'left'    : '0px',
  91.                                 'width' : newwidth +'px',
  92.                                 'height': newheight+'px'
  93.                             },800,'easeOutBack',function(){
  94.                                 current = $currentBox.index();
  95.                                 $(this).find('.boxcontent').fadeIn();
  96.                             });
  97.  
  98.  
  99.                         }
  100.                         e.preventDefault();
  101.                 });
  102. 		$(document).ready(function(){
  103. 		$('.tTip').betterTooltip({speed: 150, delay: 300});
  104.  
  105.  
  106. 		// Tabs
  107. 				$('#tabs').tabs();
  108.  
  109. 				});
  110. 				});
  111.          </script>
  112.     </head>
  113.     <body>
  114. 	<div id="menu">
  115.         <div class="title">
  116.             <h1></h1>
  117.         </div>
  118.         <div id="content">
  119.             <div class="reference">
  120.                 <p></p>
  121.             </div>
  122.  
  123.  
  124.             <div id="littleBoxes" class="littleBoxes">
  125.                 <div class="boxlink bg1" style="top:0px;left:0px;">
  126.  
  127.                     <a href="">CV</a>
  128.  
  129.                     <div class="boxcontent">
  130.                         <p>
  131.  
  132. 						<div class="tTip"  title="jak krok po kroku pisac curiculum vite">CV
  133. 						<!-- Tabs -->
  134. 		<h2 class="demoHeaders">Tabs</h2>
  135. 		<div id="tabs">
  136. 			<ul>
  137. 				<li><a href="#tabs-1">First</a></li>
  138. 				<li><a href="#tabs-2">Second</a></li>
  139. 				<li><a href="#tabs-3">Third</a></li>
  140. 			</ul>
  141. 			<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  142. 			<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
  143. 			<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
  144. 		</div>
  145.  
  146.                         </p>
  147.                     </div>
  148. 				</div>
  149.                 </div>
  150.  
  151.  
  152.  
  153.  
  154.                 <div class="boxlink bg2" style="top:0px;left:380px;">
  155.                     <a href="" >LIST MOTYWACYJNY</a>
  156.                     <div class="boxcontent">
  157.                         <p>
  158.  
  159.  
  160.                         </p>
  161.                     </div>
  162.                 </div>
  163.  
  164.  
  165.  
  166.                 <div style="top:190px;left:190px;">
  167.                     <a href="">PRACA</a>
  168.  
  169.                         <p>
  170.                         </p>
  171.  
  172.                 </div>
  173.  
  174.                 <div class="boxlink bg4" style="top:380px;left:380px;">
  175.                     <a href="">ROZMOWA KWALIFIKACYJNA</a>
  176.                     <div class="boxcontent">
  177.                         <p>
  178.                         </p>
  179.                     </div>
  180.                 </div>
  181.  
  182.  
  183.             </div>
  184.         </div>
  185.  
  186.     </body>
  187. </html>
[HTML] pobierz, plaintext



pliki