Выдвижное меню, с портативной кнопкой

 
Посетитель
small user social cms
Медаль
Сообщений: 325
Чтобы заменить стандартное меню при малой ширине экрана, и сделать, на мой взгляд, более красивое. По такому типу:
Выдвижное меню, с портативной кнопкой


Нужно сделать следующее:
1) в файле main.tpl.php перед тегом </head> вставить код
Код PHP:
  1. <script type="text/javascript">/*смена стилей для главного меню*/
  2. $(document).ready(function(){
  3. $(".nav_but").click(function(){
  4. $(".nav_portable").addClass('nav_block');
  5. $(".sect").addClass('body_left');
  6. $(".nav_but_act").addClass('active');
  7. $(this).toggleClass("active");
  8. return false;
  9. });
  10. });
  11. </script>
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14. $(".nav_but_act").click(function(){
  15. $(".nav_portable").removeClass('nav_block');
  16. $(".sect").removeClass('body_left');
  17. $(".nav_but").removeClass('active');
  18. $(this).toggleClass("active");
  19. return false;
  20. });
  21. });
  22. </script>
в этом же файле вместо
Код PHP:
  1. <?php if($this->hasWidgetsOn('top')) { ?>
  2. <nav>
  3. <?php $this->widgets('top', false, 'wrapper_plain'); ?>
  4. </nav>
  5. <?php } ?>
вставить
Код PHP:
  1. <?php if($this->hasWidgetsOn('top')) { ?>
  2. <nav>
  3. <div class="nav-menu">
  4. <a class="nav_but" title="Открыть" href="#">Открыть</a>
  5. <a class="nav_but_act" title="Закрыть" href="#">Закрыть</a>
  6. </div>
  7. <?php $this->widgets('top', false, 'wrapper_plain'); ?>
  8. </nav>
  9. <div class="nav_portable"><?php $this->widgets('top', false, 'wrapper_plain'); ?></div>
  10. <?php } ?>
2) в файле theme-layout.css удалить
Код PHP:
  1. @media screen and (max-width: 800px) {
  2. #body section { width:100% !important; }
  3. #body aside { display:none; }
  4. nav { padding:5px; height:auto; }
  5. nav .menu { display:none; }
  6. nav select { display: block; }
  7. #layout footer #info { display: none !important; }
  8. }
и вставить
Код PHP:
  1.  
  2. .nav-menu { display: none;}
  3. .nav_portable {display: none;}
  4. @media screen and (max-width: 800px){
  5. nav .menu { display:none; }
  6. .nav-menu {display:block;width: 50px; height:50px; z-index: 20; }
  7. .nav_but,.nav_but_act.active {display:block; width:50px; height:50px; z-index: 500;}
  8. .nav_but, .nav_but_act { background: url("../images/nav_menu.png") no-repeat center center #34495e;border-right: 1px solid rgba(255,255,255,0.06);}
  9. .nav_but.active {display:none;}
  10. .nav_but_act {display:none;}
  11. .nav_but,.nav_but_act{text-indent:-9999px;}
  12. .nav_portable {}
  13. .nav_block {display:block;}
  14. .body_left {}
  15. .sect,.body_left,.nav_portable ,.nav_block{transition: .2s linear;}
  16. }
  17. .nav_portable {background: #34495e; margin-bottom: 10px; margin-top: -10px;}
  18. .nav_portable .menu {margin:0;}
  19. .nav_portable ul {list-style-type: none; line-height: 30px;}
  20. .nav_portable ul li a{
  21. display: block;
  22. padding-left:15px;
  23. color: #FFF;
  24. text-decoration: none;
  25. font-weight: normal;
  26. border-top: 1px solid rgba(255,255,255,0.06);
  27. text-transform: uppercase;
  28. }
  29. .nav_portable ul li ul {margin-right: 0;}
  30. .nav_portable ul li ul li a {text-transform: none;}
  31. .nav_portable .menu > li.active > a { background: #2980b9 !important; }
  32. .nav_portable .menu > li.active > a:hover{ background: #2980b9 !important; }
  33. .nav_portable .menu > li > a:hover {background: #27ae60 !important;}
  34. .nav_portable .menu > li > ul > li >a:hover {background: #27ae60 !important;}
  35.  
3) в папку images положить прикрепленный файл.

Вроде ничего не забыл.
Посмотреть пример работы можно здесь
PS Шаблон в разработке, поэтому то, что на нем отображается, может отличаться от того, что было на момент создания этой темы.

Если кому помог, плюсуйте карму, потешу свое самолюбие.
Прикрепленные файлы:
navmenu_1csdn.png | 0,11 Кб | Скачали: 304
Редактировалось: 2 раз (Последний: 23 марта 2015 в 21:34)
Посетитель
small user social cms
Медаль
Сообщений: 646
Чёт на демо не увидел ни чего...
Надёжный хостинг от 110 руб.
Посетитель
small user social cms
Медаль
Сообщений: 325
DeeMon:

Чёт на демо не увидел ни чего...

Браузер сожмите до ширины менее 800px
Посетитель
small user social cms
Медаль
Сообщений: 646
romanovcmc:
сожмите до ширины менее 800px
Дык это для чего? Для планшетов выходит если только? В этом задумка?
Надёжный хостинг от 110 руб.
Посетитель
small user social cms
Медаль
Сообщений: 181
работает, а ведь в дефолте это реализовано для главного меню, без кнопки.
Посетитель
small user social cms
Медаль
Сообщений: 325
DeeMon:

romanovcmc:
сожмите до ширины менее 800px
Дык это для чего? Для планшетов выходит если только? В этом задумка?

Совершенно верно. Это замена стандартного меню, которое в список превращалось. В список тыкать не удобно. И мои пользователи с телефонов по начала жаловались, что не сразу догадались по нему щелкнуть.
Редактировалось: 1 раз (Последний: 23 марта 2015 в 21:45)
Посетитель
small user social cms
Медаль
Сообщений: 198
romanovcmc, однозначно +
КРУТОЙ ОБЛАЧНЫЙ МАЙНИНГ Регистрация ИП за 5 минут
Посетитель
no avatar
Сообщений: 23
Romanovcmc:
.nav_but, .nav_but_act { background: url("../images/nav_menu.png") no-repeat center center #34495e;border-right: 1px solid rgba(255,255,255,0.06); position: fixed;}

Добавил position: fixed;

Теперь кнопка меню перемещается при перелистывании страницы, что очень удобно, но!
Меню открывается на прежнем месте.
Как сделать так чтобы меню открывалось рядом с кнопкой???
Помогите )))!!!
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.