Вывод меню сбоку

#1 23 октября 2014 в 15:48
Подскажите как вывести меню сбоку на 1.10.3

Демо на сайте...


Пробовал брать код по аналогу там но не получается, знаний нет
#2 23 октября 2014 в 18:41
Боковое меню там работает следующим образом. Пользователь нажимает на кнопку, скрипт обрабатывает это действие и добавляет свойство display: block; к див блоку с классом .menu-hide. Вам нужно найти скрипт который будет менять класс определенному див блоку при клике ну и добавить в этот див то что вам необходимо
#3 23 октября 2014 в 18:54
Вот к примеру http://javascript.ru/forum/jquery/35228-poyavlenie-ischeznovenie-diva-pri-klike-na-ssylku.html
  1. <script>
  2. $(document).ready(function () {
  3. $('a#link1').click(function (e) {
  4. $(this).toggleClass('active');
  5. $('#content1').toggle();
  6.  
  7. e.stopPropagation();
  8. });
  9.  
  10. $('#content1').click(function (e) {
  11. e.stopPropagation();
  12. });
  13.  
  14. $('body').click(function () {
  15. var link = $('a#link1');
  16. if (link.hasClass('active')) {
  17. link.click();
  18. }
  19. });
  20. });
  21. </script>
Добавляем этот код в template.php файл. Далее создаем ссылку с айди link1 (должен совпадать с тем что указано выше в скрипте )
  1. <a href="#" id="link1" class="">Открыть</a>
и див блок с айди content1
  1. <div id="content1" style="display: none;">
  2. Содержимое блока
  3. </div>
Ну и стилизуем ссылку и блок.
#4 23 октября 2014 в 19:24
Gorec, это можно, и лучше сделать без js
#5 23 октября 2014 в 19:42
Действительно, это можно сделать без JS. А вообще, странноватое меню в плане удобства.
#6 23 октября 2014 в 20:35
Gorec, — спасибо за решение
WAERZ, — это как должно работать?!
PET, — ну да вкусы разные (всем не угодишь), но мне лично как пользователю нравиться, особенно когда на сайте много всего и обычного не хватает
#7 23 октября 2014 в 20:50
Erwin, чекбокс, позицианировать блок, трансформ, транзиция, можно ещё анимацию применить.
Всё делается при помощи css3 и уже всем известной хитрости с чекбоксом
#8 23 октября 2014 в 21:38
Вот, например:

HTML
  1. <div>
  2. <input id="inp" class="spoiler_controler" type="checkbox">
  3. <label for="inp">
  4. <span class="show">Показать</span>
  5. <span class="hide">Скрыть</span>
  6. </label>
  7. <div class="content">
  8. Можно плакать от счастья — В.В. прёт!<br>
  9. И при этом сосать 21-й палец.<br>
  10. «Сильная власть — слабый народ»,<br>
  11. Сказал однажды один китаец.<br><br>
  12. Но если страну проиграли в джекпот —<br>
  13. Пустим ненависть по голодной вене!<br>
  14. «Сильная власть — сильный народ»,<br>
  15. Провыл с трибуны один немец.<br><br>
  16. Но, чтобы было легко и всласть,<br>
  17. Придумаем коррупционную схему.<br>
  18. «Слабый народ — слабая власть»,<br>
  19. Хватай что можешь, руби тему!<br><br>
  20. Да ещё можно решиться на переворот,<br>
  21. Устроить системе перезагрузку.<br>
  22. «Слабая власть — сильный народ»,<br>
  23. Скартавил однажды весьма нерусский.
  24. </div>
CSS
  1. .show,
  2. .hide {
  3. position:relative;
  4. left:400px;
  5. top:50px;
  6. border-bottom: 1px dashed;
  7. cursor: pointer;
  8. }
  9.  
  10. .hide,
  11. .content {
  12. display: none;
  13. }
  14.  
  15. .spoiler_controler {
  16. display: none;
  17. }
  18.  
  19. .spoiler_controler:checked + label .show {
  20. display: none;
  21. }
  22.  
  23. .spoiler_controler:checked + label .hide {
  24. display: inline;
  25. }
  26. .spoiler_controler:checked ~ .content {
  27. display: block;
  28. }
  29.  
Но у меня больше предпочтения к jQuery с точки зрения подачи для посетителя.
#9 24 октября 2014 в 03:05
PET, Что-то нормально не выводиться внизу появляется а не сбоку
#10 24 октября 2014 в 06:54
Erwin, Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
#11 24 октября 2014 в 14:31
Erwin, дайте ссылку на сайт
#12 24 октября 2014 в 17:37
Erwin, что внизу появляется?
Я дал чистый пример, без дополнительных стилей.
Через изменения свойств left и top можно играться с выводом позиции кнопки. Но, возможно, у вас совсем другая структура шаблона. Вы уж смотрите, как вам это реализовать у себя.

Пример

Ах да, и в explorer 8 и ниже работать не будет
#13 24 октября 2014 в 18:59
PET, Понял Вас. Да пример у Вас рабочий
Gorec, решил просто сделать меню боковое без вывода. Никогда не знаешь когда пользователь на него кликнет
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.