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

 
Посетитель
small user social cms
Медаль
Сообщений: 438
Подскажите как вывести меню сбоку на 1.10.3

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

http://superomsk.ru/:

Пробовал брать код по аналогу там но не получается, знаний нет
Редактировалось: 1 раз (Последний: 23 октября 2014 в 15:49)
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1842
Боковое меню там работает следующим образом. Пользователь нажимает на кнопку, скрипт обрабатывает это действие и добавляет свойство display: block; к див блоку с классом .menu-hide. Вам нужно найти скрипт который будет менять класс определенному див блоку при клике ну и добавить в этот див то что вам необходимо
Чем меньше знаешь - тем Больше тупой.
OneMinima шаблон ICMS2
Реклама
cms
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1842
Вот к примеру http://javascript.ru/forum/jquery/35228-poyavlenie-ischeznovenie-diva-pri-klike-na-ssylku.html
Код PHP:
  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 (должен совпадать с тем что указано выше в скрипте )
Код PHP:
  1. <a href="#" id="link1" class="">Открыть</a>
и див блок с айди content1
Код PHP:
  1. <div id="content1" style="display: none;">
  2. Содержимое блока
  3. </div>
Ну и стилизуем ссылку и блок.
Чем меньше знаешь - тем Больше тупой.
OneMinima шаблон ICMS2
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 684
Gorec, это можно, и лучше сделать без js
Посетитель
small user social cms
Медаль
Сообщений: 114
Действительно, это можно сделать без JS. А вообще, странноватое меню в плане удобства.
Посетитель
small user social cms
Медаль
Сообщений: 438
Gorec, - спасибо за решение
WAERZ, - это как должно работать?!
PET, - ну да вкусы разные (всем не угодишь), но мне лично как пользователю нравиться , особенно когда на сайте много всего и обычного не хватает
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 684
Erwin, чекбокс, позицианировать блок, трансформ, транзиция, можно ещё анимацию применить.
Всё делается при помощи css3 и уже всем известной хитрости с чекбоксом
Редактировалось: 1 раз (Последний: 23 октября 2014 в 20:51)
Посетитель
small user social cms
Медаль
Сообщений: 114
Вот, например:

HTML
Код PHP:
  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
Код PHP:
  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 с точки зрения подачи для посетителя.
Посетитель
small user social cms
Медаль
Сообщений: 438
PET, Что-то нормально не выводиться внизу появляется а не сбоку
Посетитель
small user social cms
Медаль
Сообщений: 865
Erwin, Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1842
Erwin, дайте ссылку на сайт
Чем меньше знаешь - тем Больше тупой.
OneMinima шаблон ICMS2
Посетитель
small user social cms
Медаль
Сообщений: 114
Erwin, что внизу появляется?
Я дал чистый пример, без дополнительных стилей.
Через изменения свойств left и top можно играться с выводом позиции кнопки. Но, возможно, у вас совсем другая структура шаблона. Вы уж смотрите, как вам это реализовать у себя.

Пример

Ах да, и в explorer 8 и ниже работать не будет
Редактировалось: 1 раз (Последний: 24 октября 2014 в 17:46)
Посетитель
small user social cms
Медаль
Сообщений: 438
PET, Понял Вас. Да пример у Вас рабочий
Gorec, решил просто сделать меню боковое без вывода. Никогда не знаешь когда пользователь на него кликнет
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.