Как избежать того, что фиксированная загрузочная навигация закрывает панель управления DNN?

Я использую навигацию bootstrap 3.0 в DNN с классом CSS navbar-fixed-top (у меня не было бы этой проблемы с navbar-static-top, но тогда панель навигации исчезает при прокрутке страницы). Когда я вхожу в DNN (как администратор), DNN также создает фиксированную панель навигации с меню, специфичным для администратора. Но теперь моя загрузочная навигация скрывает панель управления DNN.

Как я могу настроить это, например. применяя другой стиль либо к панели навигации, либо к меню DNN в режиме администратора?

Если я помещу панель навигации в .ascx, смогу ли я определить, нахожусь ли я в режиме администратора внутри .ascx?


twitter-bootstrap-3 dotnetnuke dotnetnuke-7
person TvdH    schedule 10.12.2013    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Попробуйте использовать этот CSS

#ControlBar {
        height: 53px !important;
}

.navbar-fixed-top.admin {
        top: 53px;
        z-index: 9;
}

и этот JavaScript

$(function() {
    if ($('form').hasClass('showControlBar')) $('.navbar-fixed-top').addClass('admin');  
});
person rwisch45    schedule 15.12.2013
comment
Хорошая проверка js для панели управления. Это работает, мне пришлось добавить немного поля для настройки содержимого. - person TvdH; 16.12.2013
comment
Для ленточной панели измените ControlBar на dnnCPWrap, if ($('form').hasClass('showControlBar')) на if (document.getElementById('dnnCPWrap')) и замените 53px на 36px. - person MiguelSlv; 26.07.2014

arrow_upward
1
arrow_downward

Можете ли вы показать скриншот или скрипку?

возможно, просто добавление этого правила в ваш файл css исправит это.

body {
  padding-top: 50px;
  padding-bottom: 20px;
}
person ppollono    schedule 11.12.2013
comment
Это не работает, так как обе панели навигации используют фиксированные макеты и, следовательно, перекрываются. Я думаю, что мне нужно каким-то образом определить, находится ли он в режиме администратора, и в этом случае использовать статический макет для одной из панелей навигации. - person TvdH; 11.12.2013

arrow_upward
1
arrow_downward

другой способ — переключить dnn #ControlBar или #dnnCPWrap, если вы используете RibbonBar. Должен работать с каждой фиксированной панелью навигации.

Создайте маленькую кнопку в левом верхнем углу. Стиль якоря в соответствии с вашими потребностями.

    $(document).ready(function () {

     var moTtoggleButton;
            if(('#ControlEditPageMenu').length > 0 ) {  //  FOR CONTROLBAR DNN7 and up
                    moTtoggleButton = '<ul class="dnnActions dnnClear">';
                    moTtoggleButton += '<li class="moTtoggleButton"><a href="javascript:void(0)" onclick="$(\'#ControlBar\').toggle();">toggle menu</a></li>';
                    moTtoggleButton += '</ul>';

                $('#ControlBar_ControlPanel').before(moTtoggleButton)
            }
            if(('#dnnCPWrap').length > 0) { //  FOR RIBBONBAR
                    moTtoggleButton = '<ul class="dnnActions dnnClear">';
                    moTtoggleButton += '<li class="moTtoggleButton"><a href="javascript:void(0)" onclick="$(\'#dnnCPWrap\').toggle();">toggle menu</a></li>';
                    moTtoggleButton += '</ul>';

                $('#dnnCPWrap').before(moTtoggleButton)
            }

    });

некоторые стили кнопок

.moTtoggleButton{
    z-index: 10001 !important;
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    left:0;
}
.moTtoggleButton > a {
    display: inline-block;
    font-weight: 700;
    padding: 10px 15px;
}

обновление: измененная позиция: абсолютная; положение: фиксированное; добавлено href="javascript:void(0)" в тег привязки

person pixelquadrat    schedule 26.09.2014

arrow_upward
0
arrow_downward

Попробуйте добавить этот CSS. На DNN7+ работает нормально.

#ControlBar, #ControlBar div,  #ControlBar li,  #ControlBar a {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
person Alex Z    schedule 04.06.2014