Вы вошли как Гость | Группа "Гости" | RSS

Главная » 2010 » Ноябрь » 3 » Красивое горизонтальное меню на jq
05:54
Красивое горизонтальное меню на jq



Красивое горизонтальное меню на jq

Красивое горизонтальное меню для сайта с подсветкой пунктов, сделанное с помощью библиотеки jq.

В head кидаем этот код:

Code
<script type="text/javascript" src="/js/jquery.sliding-menu.js"></script>  
  <script type="text/javascript">  
  jQuery(function(){  
  jQuery('#HorizontalSlidingMenu .SlidingMenu').slidingMenu();  
  });  
  </script>  
  <style>  
  body {  
  font-family: "Arial","Verdana","Helvetica";  
  font-size: 0.9em;  
  margin: 1.5em;  
  }  
  ul.SlidingMenu {  
  list-style: none;  
  padding: 0em;  
  }  
  ul.SlidingMenu a {  
  padding: 0.62em 1.5em;  
  text-decoration: none;  
  color: #FFF;  
  outline: none;  
  }  
  ul.Horizontal li {  
  float: left;  
  }  
  .ClearFix {  
  clear: both;  
  }  
  #HorizontalSlidingMenu {  
  background: url('/images/menubg.png') top left repeat-x;  
  }  
  #HorizontalSlidingMenu li.Background {  
  background: url('/images/bg_menu_right.png') top right no-repeat;  
  }  
  #HorizontalSlidingMenu li.Background div{  
  background: url('/images/bg_menu.png') top left no-repeat;  
  height: 100%;  
  margin-right: 31px;  
  }

В body - это:

Code
<div id="HorizontalSlidingMenu">  
  <ul class="SlidingMenu Horizontal">  
  <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>  
  <div class="ClearFix"></div>  
  </div>

Затем скачиваем архив и кидаем файлы jquery.sliding-menu.js - в папку js,
а картинки - в папку images




Источник/Автор:Неизвестен



Поделись ссылкой

  • - ссылка
  • - BBCode
  • - HTML





    Просмотров: 1195 | Добавил: ed127 | Теги: Красивое горизонтальное меню на jq | Рейтинг: 0.0/0 | |
    Новости по теме:
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Сделать бесплатный сайт с uCoz

    www.owi.3dn.ru © Все права защищены! 2010-2011 Сайт оптимизирован под разрешение экрана 1280х1024 и браузеры Mozila Firefox
    Загрузка...