Темное меню Truequery для сайта uCoz

<!---------------------- CONTENT ------------------------>
  <div id="content">
  <!----------------------- LEFT ------------------------>
  <div id="left">
  <div id="menu_pop">
  <ul id="accordion">
  <li><div><span class="style4">jQuery</span><br>
  <span class="button_podtext">Анимация с помощью jQuery</span></div>
  <li><div>Галереи и Слайдеры<br>
  <span class="button_podtext">Галереи и Слайдеры картинок с помощью jQuery</span></div>
  <ul>
  <li><a href="#">3D галерея для сайта</a></li>
  <li><a href="#">3D cлайдер переворачивание страниц</a></li>
  <li><a href="#">3D слайдер для сайта</a></li>
  <li><a href="#">Аккордеон галерея</a></li>
  <li><a href="#">Беспрерывный слайдер</a></li>
  <li><a href="#">Динамичный слайдер для сайта</a></li>
  <li><a href="#">Слайдер с парящими изображениями</a></li>
  <li><a href="#">Полноэкранная (full screen) галерея</a></li>
  <li><a href="#">Галерея анимированных миниатюр</a></li>
  <li><a href="#">Галерея изображений с эффектом параллакса</a></li>
  <li><a href="#">Галерея в виде записной книжки</a></li>
  <li><a href="#">Галерея в виде волны</a></li>
  <li><a href="#">Галерея картинок для сайта</a></li>
  <li><a href="#">Галерея с эффектом вращения изображений</a></li>
  <li><a href="#">Галерея с эффектом разворота бумаги</a></li>
  <li><a href="#">Галерея с фотопанелью для сайта</a></li>
  <li><a href="#">Галерея с эффектом скольжения фото</a></li>
  <li><a href="#">Галерея ввиде обложек компакт-дисков</a></li>
  <li><a href="#">Горизонтальное портфолио</a></li>
  <li><a href="#">Слайдер с подпунктами</a></li>
  <li><a href="#">Подсказки для изображений</a></li>
  <li><a href="#">Липкая галерея фотографий</a></li>
  <li><a href="#">Интерактивная стена изображений</a></li>
  <li><a href="#">Простой слайдер</a></li>
  <li><a href="#">Раскачивающийся слайдер</a></li>
  <li><a href="#">Раздвижной слайдер</a></li>
  <li><a href="#">Полноэкранные скользящие панели</a></li>
  <li><a href="#">Слайдер в виде колоды карт</a></li>
  <li><a href="#">Слайдер изображений с переключателем режима прокрутки</a></li>
  <li><a href="#">Универсальная галерея</a></li>
  <li><a href="#">Слайдер с вертикальным аккордеоном</a></li>
  <li><a href="#">Вертикальный слайдер</a></li>
  <li><a href="#">Стена изображений</a></li>
  <li><a href="#">Эффект зума для изображений</a></li>
  </ul>
  </li>
  <li><div>Меню для сайта<br>
  <span class="button_podtext">Меню для сайта с помощью jQuery</span></div>
  <ul>
  <li><a href="#">Меню в стиле волны </a></li>
  <li><a href="#">меню с увеличивающимися подпунктами</a></li>
  <li><a href="#">Меню со скроллингом в выпадающих пунктах </a></li>
  <li><a href="#">Многоуровневое меню</a></li>
  <li><a href="#">Древовидное горизонтальное меню</a></li>
  <li><a href="#">Меню привязанное к курсору</a></li>
  <li><a href="#">Горизонтальное выпадающее меню</a></li>
  <li><a href="#">Вертикальная навигация с вкладками</a></li>
  <li><a href="#">Меню аккордеон</a></li>
  <li><a href="#">Горизонтальное меню с выпадающими иконками</a></li>
  <li><a href="#">Многоуровневое меню для сайта</a></li>
  <li><a href="#">Раздвижное горизонтальное меню</a></li>
  <li><a href="#">Навигация с круговым движением</a></li>
  <li><a href="#">Вертикальное выдвигающееся меню</a></li>
  <li><a href="#">Вертикальное меню ввиде иконок</a></li>
  <li><a href="#">Вертикальное раздвижное меню</a></li>
  </ul>
  </li>
  <li><div>Анимированный фон для сайта<br>
  <span class="button_podtext">Анимированный фон для сайта с помощью jQuery</span></div>
  <ul>
  <li><a href="#">Анимированный фон в виде летящих пузырьков</a></li>
  <li><a href="#">Анимированный фон для сайта</a></li>
  <li><a href="#">Фон сайта с эффектом параллакса</a></li>
  <li><a href="#">Как создать фон сайта с эффектом параллакса</a></li>
  </ul>
  </li>
  <li><div>РАЗНОЕ<br>
  <span class="button_podtext">Разные эффекты с помощью jQuery</span></div>
  <ul>
  <li><a href="#">Анимированная страница 404</a></li>
  <li><a href="#">Анимированная форма поиска</a></li>
  <li><a href="#">Эффект затухания панели иконок "Поделиться"</a></li>
  <li><a href="#">Эффект лупы для изображений</a></li>
  <li><a href="#">Эффект параллакса с изображением</a></li>
  <li><a href="#">Эффект вращения изображений на 360 градусов</a></li>
  <li><a href="#">Эффект размытия элементов сайта</a></li>
  <li><a href="#">Прокрутка с эффектом параллакса</a></li>
  <li><a href="#">Плавающий блок при прокрутке страницы</a></li>
  <li><a href="#">Постраничная навигация для сайта</a></li>
  <li><a href="#">Выпадающий блок</a></li>
  </ul>
  </li>
  <li><div><span class="style4">CSS</span><br>
  <span class="button_podtext">Анимация с помощью CSS</span></div>
  <li><div>Галереи и Слайдеры<br>
  <span class="button_podtext">Галереи и Слайдеры картинок с помощью CSS</span></div>
  <ul>
  <li><a href="#">Адаптивный слайдер изображений</a></li>
  <li><a href="#">Галерея LIGHTBOX</a></li>
  <li><a href="#">Беспорядочная галерея изображений</a></li>
  </ul>
  <li><div>Меню для сайта<br>
  <span class="button_podtext">Меню для сайта с помощью CSS</span></div>
  <ul>
  <li><a href="#">Вдавливающееся горизонтальное меню</a></li>
  <li><a href="#">Горизонтальное меню с выпадающими подпунктами ввиде гирлянды</a></li>
  <li><a href="#">Горизонтальное меню с выделенными пунктами</a></li>
  <li><a href="#">Горизонтальное меню с выпадающими подпунктами</a></li>
  <li><a href="#">Размножающееся меню</a></li>
  <li><a href="#">Древовидное облачное меню</a></li>
  <li><a href="#">Горизонтальное меню с выдвигающимися подпунктами</a></li>
  <li><a href="#">Горизонтальное плавное меню</a></li>
  <li><a href="#">Вертикальное поворотное меню</a></li>
  <li><a href="#">Горизонтальное меню с 3D разворачивающимися подпунктами</a></li>
  <li><a href="#">Меню аккордеон с выпадающим списком </a></li>
  <li><a href="#">Меню аккордеон для сайта с нумерацией</a></li>
  <li><a href="#">Вертикальное выдвигающееся меню</a></li>
  <li><a href="#">Кнопочное меню для сайта</a></li>
  <li><a href="#">Горизонтальное 3D меню для сайта</a></li>
  <li><a href="#">Выпадающее меню с помощью CSS3</a></li>
  <li><a href="#">Горизонтальное меню с каскадными подпунктами</a></li>
  <li><a href="#">Горизонтальное анимированное меню</a></li>
  <li><a href="#">Горизонтальное меню с выпадающими изображениями</a></li>
  <li><a href="#">Прячущееся меню</a></li>
  </ul>
  <li><div>РАЗНОЕ<br>
  <span class="button_podtext">Разные эффекты с помощью CSS</span></div>
  <ul>
  <li><a href="#">Смена фоновых изображений при прокрутке</a></li>
  <li><a href="#">Выделение текста на сайте разными цветами</a></li>
  <li><a href="#">Анимированная форма обратной связи</a></li>
  <li><a href="#">Анимация упорядоченного списка</a></li>
  <li><a href="#">Анимация подсказок для иконок</a></li>
  <li><a href="#">Стилизация ссылок</a></li>
  </ul>
  </ul>
  </div>

<script type="text/javascript" src="/js/jquery-latest.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
   
if($.cookie("num_open_ul")) { // если в куках есть число
   
  if($.cookie("num_open_ul")!=0) { // и это число не равно нулю - значит какой-то список открыт
  var number_eq=$.cookie("num_open_ul")-1; // уменьшаем порядковый номер на 1 так как eq идёт с нуля
  $("#accordion ul").eq(number_eq).show(); // открываем соответствующий список
  }
   
   
  };
   
   
//Определяем по нажатию на какой элемент должны открыватся подменю
$("#accordion > li > div").click(function(){
  if(!$(this).next().is(':visible')) { // если кликнутый блок не раскрыт ( не виден список после него )
  $('#accordion ul').slideUp(280);// сварачиваем все списки
  }
  $(this).next().slideToggle(280); // в любом случае переключаем (если открыт закрываем и наоборот) список после кликнутого блока
  setTimeout(fncookie, 400);//задержка записи кук
   
  });
   
   
   
//запись в куки номера открытого меню  
function fncookie(){
var number_open_ul=0; // если ноль - то ни один не открыт
   
var i=0; // переменная- счётчик всех списков ul в меню  
$("#accordion ul").each(function(){
  i++;// порядковый номер просматриваемого списка увеличиваем на 1
  if($(this).is(':visible')){ // если блок виден то его порядковый номер заносим в специальную переменную
  number_open_ul=i;
  }
$.cookie("num_open_ul",number_open_ul);// записываем в куки номер открытого списка
   
});
}// end fncookie
   
   
});/*end ready*/
</script>

#container #content #left {
  background-color: #FFFFFF;
  float:left;
  width:360px;
}

#menu_pop {
  padding: 20px 20px 20px 20px;
  margin: 40px 20px 0 20px;
  width: 290px;
  border-radius: 6px;
  background-image: url(/images/carbon.jpg);
  box-shadow: 0px 1px 5px #000;
}

#accordion {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

#accordion .button_podtext {
  font-size: 9px;
  color: #b1b1b1;
}

#accordion div {
  display: block;
  cursor: pointer;
  text-decoration: none;
  display: block;
  padding: 8px 0px 8px 11px;
  background: #000;
  color: #ffffff;
  font-size: 12px;
  font-family: verdana;
  background: url('/images/bg.png') 0px 0px;
  text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.6);
  list-style: circle;
}

#accordion div:hover {
  background: url('/images/bg.png') 0px -44px;
}

#accordion ul a {
  color: #FF9800;
}

#accordion ul {
  list-style: none;
  padding: 5px;
  font-size: 11px;
  font-family: Tahoma;
  background: #1a1a1a;
  box-shadow: inset 0px 3px 6px rgba( 0, 0, 0, 0.7);
  display: none;
}

#accordion ul li {
  font-weight: normal;
  cursor: auto;
  padding: 3px 7px;
}

#accordion a {
  text-decoration: none;
}

#accordion a:hover {
  text-decoration: underline;
}

#content #left #dryzya {
  width: 320px;
  height: 170px;
  margin: 40px 20px 0 20px;
  background-image: url(/images/fon_dryzya.png);
}

#content #left #dryzya p {
  padding-top: 40px;
}