Одна кнопка вертикальное меню аккордеон CSS + javascript

Автор: Admin    Категория: Меню навигации    Теги:  Вертикальное меню    Дата: 1-03-2011, 19:07
Одна кнопка вертикальное меню аккордеон CSS + javascriptСложная очень эффектная вертикальная навигация на javascript в стиле аккордеон реализованная одной кнопкой
Меню реализовано списком определений, в описание определения вложен маркированный список и вся эта красота спрятана в одной кнопке. Раскрывающийся список меню абсолютно позиционирован и раскрывается поверх всех элементов на странице, что бывает очень удобно при нехватке или экономии места. Меню корректно работает во всех нормальных браузерах, код валидный DTD XHTML 1.0 Strict, валидацию можно проверить кнопочкой внизу справа на примере меню.
Новичку будет сложно добавить что-то своё в эту навигацию, описывать реализацию я не буду, дам лишь несколько важных замечаний:
Добавлять категории больше чем в примере нельзя, меньше можно
Идентификаторы категорий не должны повторяться
Последняя категория должна быть НЕРАСКРЫВАЮЩЕЙСЯ
В общем берём и пользуемся как есть, ну, естественно со своими ссылками и названиями.

Посмотреть пример одна кнопка вертикальное меню аккордеон CSS + javascript
Скачать готовый пример одна кнопка вертикальное меню аккордеон CSS + javascript

Пользуемся на здоровье! И не забываем комментировать.
Версия для печати
  • 100
     Просмотров: 14 010      Комментариев: 7   

Понравилась новость Одна кнопка вертикальное меню аккордеон CSS + javascript на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

Другие новости по теме

Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Одна кнопка вертикальное меню аккордеон CSS + javascript из категории Меню навигации

№ 7 Автор: 22ev 26 октября 2012 17:00

Вот такой я - 22ev

22ev
Гости
комментариев
публикаций

Статус:
Всё, нашёл, как сместить это дело влево. Если кому надо - это в стилях, параметр margin в самом начале. Я поставил 10

  • Нравится
  • 0
    

№ 6 Автор: 22ev 26 октября 2012 16:23

Вот такой я - 22ev

22ev
Гости
комментариев
публикаций

Статус:
Почему она в центре? Как влево сместить? Где это, не найду((

  • Нравится
  • 0
    

№ 5 Автор: Admin 6 января 2012 14:57

Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: rolex_737
Хочу поинтересоваться, а можно ли сделать так, чтобы при активной кнопке "Раздел категории" (например: категория1/раздел категории) - все это меню не сворачивалось, а оставалось открытым как раз на этой категории.

В этом меню так сделать нельзя - это нужно переписать весь скрипт.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 4 Автор: rolex_737 23 декабря 2011 14:21

Вот такой я - rolex_737

rolex_737
Гости
комментариев
публикаций

Статус:
Доброго времени суток!

Хочу поинтересоваться, а можно ли сделать так, чтобы при активной кнопке "Раздел категории" (например: категория1/раздел категории) - все это меню не сворачивалось, а оставалось открытым как раз на этой категории.

  • Нравится
  • 0
    

№ 3 Автор: Admin 19 мая 2011 13:42

Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: Евгений
а что ставить в main.tpl?

Приветствую. В main.tpl ставить код кнопки как в примере, код выделен комментарием:
<!--Одна кнопка вертикальное меню аккордеон от http://megaweb.su/-->

Чтоб не потерять в дальнейшем код кнопки - ставте вместе с моим комментарием.
В конце кода путь к скрипту:
<script src="js/odnaknopka.js"  type="text/javascript">
</script>
не забудьте поменять путь на свой.
И в CSS файле odnaknopka.css нужно поменять пути к картинкам на свои, подсмотреть как правильно прописываются пути к картинкам можно в любом CSS файле вашего шаблона.

Цитата: Евгений
Скрипты отправил в корень сайта

Правильнее файлы кинуть по своим местам, файл odnaknopka.css в папку ко всем CSS файлам шаблона и файл odnaknopka.js ко всем JS файлам шаблона и не забыть подключить их в шапку main.tp аналогично как подключены другие css и js файлы шаблонаl. И картинки из папки img примера можно кинуть в вашу папку с картинками.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 2 Автор: Евгений 19 мая 2011 07:47

Вот такой я - Евгений

Евгений
Гости
комментариев
публикаций

Статус:
Добрый день! Отличная кнопка. Хотелось бы Вашей помощи по установке на DLE 9.2. Скрипты отправил в корень сайта, картинки картинки шаблона, а что ставить в main.tpl?

  • Нравится
  • 0
    

№ 1 Автор: vic.tor 11 апреля 2011 13:17

Вот такой я - vic.tor

vic.tor
Гости
комментариев
публикаций

Статус:
хорошая навигация, особенно для экономии места на сайте, почти пол года работает

  • Нравится
  • 0
    

Информация

Внимание!

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус