Podczas pracy napotkałem 2 dla mnie duże i nie do rozwiązania problemy:

1. Chcę aby, rozwijało się menu, nie po najechaniu, tylko po kliknięciu na dane LI (tak wiem click, zamiast hover, ale albo mi się nie zwijało z powrotem, po kliknięciu na inne LI, albo się rozwijały wszystkie, kombinowałem i jednak się poddałem)

2. Chcę aby po najechaniu na którekolwiek LI, całe menu przesunęło się w lewo. Bo jak widać na początku jest fajnie na środku, ale po najechaniu, już jest szerszej i wychodzi poza obszar, oraz nie jest na środku.


Wersja Podstawowa: http://damonracing.ovh.org/d.html

Wersja z moim nieudolnym Hover: http://damonracing.ovh.org/dh.html (Myślałem, że zwykłe CSS hover załatwi sprawę, ale niestety, efekt zresztą widać)

PS. Oczywiście zamiast wszystkich przykładowych kolorów, będą JPG.


Odpowiedzialne za to JS:

[JAVASCRIPT] pobierz, plaintext 
  1. $(function() {
  2.                 $('.accordion > li').hover(
  3.                     function () {
  4.                         var $this = $(this);
  5.                         $this.stop().animate({'width':'350px'},500);
  6.                         $('.heading',$this).stop(true,true).fadeOut();
  7.                         $('.bgDescription',$this).stop(true,true).slideDown(500);
  8.                         $('.description',$this).stop(true,true).fadeIn();
  9.                     },
  10.                     function () {
  11.                         var $this = $(this);
  12.                         $this.stop().animate({'width':'115px'},500);
  13.                         $('.heading',$this).stop(true,true).fadeIn();
  14.                         $('.description',$this).stop(true,true).fadeOut(500);
  15.                         $('.bgDescription',$this).stop(true,true).slideUp(700);
  16.                     }
  17.                 );
  18.             });
[JAVASCRIPT] pobierz, plaintext


Odpowiedzialne za to CSS:

[CSS] pobierz, plaintext 
  1. #middle {
  2.     background: #0f0 0 0 repeat;
  3.     width: 100%;
  4. }
  5. #contentmiddle {
  6.     margin: 0 auto;
  7.     padding: 0;
  8.     width: 960px;
  9.     background: #fff
  10. }
  11.  
  12. ul.accordion {
  13.     margin: 0 160px;
  14.     padding: 0px;
  15.     border: 0px;  
  16.     list-style:none;   
  17.     line-height: 0em;
  18.     height:350px;
  19.     width: 960px
  20. }
  21.  
  22.  
  23. ul.accordion li{
  24.     margin: 10px 15px 0 0;
  25.     float:left;
  26.     width:115px;
  27.     height:350px;
  28.     display:block;
  29.     background-position: center;
  30.     position:relative;
  31.     overflow:hidden;
  32.     cursor:pointer;
  33.     -moz-box-shadow:1px 3px 15px #555;
  34.     -webkit-box-shadow:1px 3px 15px #555;
  35.     box-shadow:1px 3px 15px #555;
  36. }
  37. ul.accordion li.bg1{
  38.     background: #f00;
  39. }
  40. ul.accordion li.bg2{
  41.     background: #ff0;
  42. }
  43. ul.accordion li.bg3{
  44.     background: #f0f;
  45. }
  46. ul.accordion li.bg4{
  47.     background: #00f;
  48. }
  49. ul.accordion li.bg5{
  50.     background: #000;
  51. }
  52. ul.accordion li .heading{
  53.     background-color:#c9d6de;
  54.     padding:10px;
  55.     margin-top:60px;
  56.     opacity:0.8;
  57.     font-style:normal;
  58.     font-weight:bold;
  59.     letter-spacing:1px;
  60.     font-size:14px;
  61.     color:#444;
  62.     text-align:center;
  63.     text-shadow:-1px -1px 1px #ccc;
  64. }
  65. ul.accordion li .description{
  66.     position:absolute;
  67.     width:350px;
  68.     height:100px;
  69.     bottom:0px;
  70.     left:0px;
  71.     display:none;
  72.         line-height: 1.6em;
  73. }
  74. ul.accordion li .description h2{
  75.     font-style:normal;
  76.     font-weight:bold;
  77.     letter-spacing:1px;
  78.     font-size:45px;
  79.     color:#444;
  80.     text-align:left;
  81.     margin:0px 0px 15px 20px;
  82.     text-shadow:-1px -1px 1px #ccc;
  83. }
  84. ul.accordion li .description p{
  85.     line-height:14px;
  86.     margin:10px 22px;
  87.     font-size: 12px;
  88.     font-style: italic;
  89.     font-weight: normal;
  90.     text-transform: none;
  91.     letter-spacing: normal;
  92.     line-height: 1.6em;
  93. }
  94. ul.accordion li .description a{
  95.     position:absolute;
  96.     bottom:5px;
  97.     left:20px;
  98.     font-style:normal;
  99.     font-size:11px;
  100.     text-decoration:none;
  101.     color:#888;
  102. }
  103. ul.accordion li .description a:hover{ 
  104.     color:#333;
  105.     text-decoration:underline;
  106. }
  107.  
  108. ul.accordion li .bgDescription{  
  109.     background:transparent url(bgDescription.png) repeat-x top left;
  110.     height:340px;
  111.     position:absolute;
  112.     bottom:0px;
  113.     left:0px;
  114.     width:100%;
  115.     display:none;
  116. }
[CSS] pobierz, plaintext


Odpowiedzialny za to HTML:

[HTML] pobierz, plaintext 
  1. <div id="middle">
  2.    <div id="contentmiddle">
  3.    	<ul class="accordion">
  4.                 <li class="bg1">
  5.                     <div class="heading">Guler</div>
  6.                     <div class="bgDescription"></div>
  7.                     <div class="description">
  8.                         <p>dolor sit amet, consectetur adipisicing elit,
  9.                             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  10.                             </p>
  11.                         <a href="#">more ?</a>
  12.                     </div>
  13.                 </li>
  14.                 <li class="bg2">
  15.                     <div class="heading">Phillips</div>
  16.                     <div class="bgDescription"></div>
  17.                     <div class="description">
  18.                         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
  19.                             accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
  20.                             </p>
  21.                         <a href="#">more ?</a>
  22.                     </div>
  23.  
  24.                 </li>
  25.                 <li class="bg3">
  26.                     <div class="heading">Diamanti</div>
  27.                     <div class="bgDescription"></div>
  28.                     <div class="description">
  29.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  30.                             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  31.                             </p>
  32.                         <a href="#">more ?</a>
  33.                     </div>
  34.  
  35.                 </li>
  36.                  <li class="bg4">
  37.                     <div class="heading">Diamanti</div>
  38.                     <div class="bgDescription"></div>
  39.                     <div class="description">
  40.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  41.                             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  42.                            </p>
  43.                         <a href="#">more ?</a>
  44.                     </div>
  45.  
  46.                 </li>
  47.                 <li class="bg5">
  48.                     <div class="heading">Meiklejohn</div>
  49.                     <div class="bgDescription"></div>
  50.                     <div class="description">
  51.                         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
  52.                             accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
  53.                            </p>
  54.                         <a href="#">more ?</a>
  55.                     </div>
  56.  
  57.                 </li>
  58.             </ul>
  59.             iste natus error sit voluptatem accusantium doloremque laudantium, totam
  60.    </div>
  61.    </div>
[HTML] pobierz, plaintext