CMS DataLife Engine - Система управления сайтами

Sign in to follow this  
n0lik

Помогите с багом/особенностью шаблона Green

Recommended Posts

Помогите пожалуйста с багом/особенностью шаблона Green. А именно. У шаблона есть кнопка для вывода меню навигации слева, нажав, мы видим пункты меню, но если в этом меню присутствует много разделов/категорий, то этот список невозможно прокрутить ниже (если монитор большой, то меню видно, а если маленький, то половина пунктов меню скрыто и не прокручивается), прокрутить меню можно только в мобильной версии.

Я записал небольшой видео-скрин, что бы было понятнее о чём я говорю. https://yadi.sk/i/lWNAbBWAZkDjNw

 

 

Share this post


Link to post
Share on other sites

Что-то типа такого:

.greenmenu {
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

 

Share this post


Link to post
Share on other sites
5 минут назад, proba сказал:

Что-то типа такого:

Да, но не сработало ((

Share this post


Link to post
Share on other sites
1 час назад, n0lik сказал:

Да, но не сработало ((

Попробуйте вместо

height: 100%;

  сделать

height: 100vh;

 

 

Share this post


Link to post
Share on other sites
7 минут назад, redissx сказал:

Попробуйте вместо


height: 100%;

  сделать


height: 100vh;

 

 

Нет, не работает.

Share this post


Link to post
Share on other sites
1 час назад, n0lik сказал:

Нет, не работает.

 .greenmenu {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

Это работает, проверено.  Если не работает, значит кеш в браузере не обновили.

Share this post


Link to post
Share on other sites
4 минуты назад, redissx сказал:

 .greenmenu {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

Это работает, проверено.  Если не работает, значит кеш в браузере не обновили.

Не работает, проверено.

Share this post


Link to post
Share on other sites
4 часа назад, redissx сказал:

 .greenmenu {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

Это работает, проверено.  Если не работает, значит кеш в браузере не обновили.

Что заменить?

 

Edited by kamensk

Share this post


Link to post
Share on other sites
18 часов назад, kamensk сказал:

Что заменить?

 

Ничего, в конец css добавить.

Share this post


Link to post
Share on other sites

В стилях найдите ~ 382 строка.

/* Всплывающее меню */
#menu, .greenmenu { width: 290px; }

сразу ниже добавьте

.menubtn_open #menu, .greenmenu {
    bottom: 0;
    overflow-y: auto;
}

 

Share this post


Link to post
Share on other sites
55 минут назад, master27 сказал:

В стилях найдите ~ 382 строка.


/* Всплывающее меню */
#menu, .greenmenu { width: 290px; }

сразу ниже добавьте


.menubtn_open #menu, .greenmenu {
    bottom: 0;
    overflow-y: auto;
}

 

Не то пальто. 

Работает, но не совсем корректно.

1) Появляется скролл

2) Если опустить страницу в самый них, то скрываются нижняя часть меню.

Видео-скрин, о том, что происходит: https://yadi.sk/i/MqDTCliH5gIEyg

 

В идеале, хотелось бы конечно меню как тут https://codyhouse.co/demo/multi-level-accordion-menu/index.html готов даже заплатить за данную реализацию.

Share this post


Link to post
Share on other sites

Подтверждаю слова аффтора - работает не корретно.

 

Share this post


Link to post
Share on other sites

я себе сделал на подобии

HTML

<div class="mini-menu">
    <ul>
        <li>
            <a href="/">Главная</a>
        </li>
        <li class="sub">
            <a href="#"><i class="fas fa-angle-down float-right"></i>Жанр</a>
            Жанр 1
          Жанр 2
        </li>
        <li class="sub">
            <a href="#"><i class="fas fa-angle-down float-right"></i>Год</a>
            <ul>
            Год 1
              Год 2
            </ul>
        </li>
        <li class="sub">
            <a href="#"><i class="fas fa-angle-down float-right"></i>Тип</a>
            <ul>
            Тип 1
              Тип 2
            </ul>
        </li>
        <li class="sub">
            <a href="#"><i class="fas fa-angle-down float-right"></i>Озвучивание</a>
            <ul>
            Озвучивание 1
              Озвучивание 2
            </ul>
        </li>
    </ul>
  </div>

css

.mini-menu {
    margin: 0 auto;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    overflow: hidden
}

.mini-menu ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.mini-menu > ul > li {
    position: relative
}

.mini-menu > ul > li > a {
    display: block;
    padding: .7em 1em;
    outline: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    background: #23252b;
    text-decoration: none;
    font-weight: normal
}

.mini-menu .sub ul {
    display: none;
    overflow: hidden;
    background: #eee
}

.mini-menu .sub ul li a {
    display: block;
    padding: .7em 1em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    color: #514b92;
    font-size: 12px;
    text-decoration: none
}

.mini-menu .sub ul li a:hover, .mini-menu .sub ul li a.active {
    padding-left: 1.3em;
    background: #d8d8d8;
    color: red
}

.mini-menu .sub ul li a:after {
    float: left;
    margin-right: 6px;
    content: "»";
    line-height: 12px
}

.mini-menu .sub > a:before {
    height: 12px;
    width: 12px;
    font-size: 1em;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 12px;
    background: #fff;
    line-height: .8em;
    color: red;
    text-indent: 0;
    text-align: center;
    text-shadow: none;
    font-weight: 500;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

.mini-menu .sub > a.active:before {
    color: #f2bd00
}

и js

$(document).ready(function () {
    $(".sub > a").click(function () {
        return $(".sub ul").slideUp(), $(this).next().is(":visible") ? ($(this).next().slideUp(1e3), $(".mini-menu > ul > li > a, .sub a").removeClass("active")) : ($(this).next().slideToggle(2e3), $(this).addClass("active")), !1
    }), $(".mini-menu > ul > li > a").click(function () {
        $(".mini-menu > ul > li > a, .sub a").removeClass("active"), $(this).addClass("active")
    }), $(".sub ul li a").click(function () {
        $(".sub ul li a").removeClass("active"), $(this).addClass("active")
    })
});

поиграться и должно работать с вложенными выпадающими меню

Share this post


Link to post
Share on other sites
2 часа назад, alukardua сказал:

я себе сделал на подобии

...

поиграться и должно работать с вложенными выпадающими меню

Всё это хорошо, но меню генерируется автоматически и не хотелось бы лесть в php файлы движка и править их.

Желательно обойтись правкой только файлов шаблона, а генерацию автоматического вывода меню оставить без изменений. 

Без автоматического вывода меню можно сделать что угодно, примеров в сети масса, а вот подстроить css и js под автоматический вывод, это сложнее (по крайне мере для меня)

Share this post


Link to post
Share on other sites
13 минут назад, n0lik сказал:

Всё это хорошо, но меню генерируется автоматически и не хотелось бы лесть в php файлы движка и править их.

Желательно обойтись правкой только файлов шаблона, а генерацию автоматического вывода меню оставить без изменений. 

Без автоматического вывода меню можно сделать что угодно, примеров в сети масса, а вот подстроить css и js под автоматический вывод, это сложнее (по крайне мере для меня)

у меня все разделы тоже сами генерируются

жанры через catmenu

[root]<ul>[/root]
[item]
	<li><a href="{url}">{name}</a></li>
	[sub-prefix]<ul>[/sub-prefix]{sub-item}[sub-suffix]</ul>[/sub-suffix]
[/item]
[root]</ul>[/root]

а все остальные через xflist модуль, в нем только правка происходит

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this