Блог

Я использую адаптивное навигационное решение под названием Naver (http://formstone.it/components/Naver ) для моих веб-сайтов. Однако я сталкиваюсь с проблемами, когда использую адаптивную навигацию фиксированной ширины (например, сетку). Адаптивная навигация принимает ширину своего родительского элемента и не отображается на 100% ширине.

Вот два примера, один с навигацией внутри сетки, а другой просто перемещен вправо:

• http://jsfiddle.net/9FCq2/11/
• http://jsfiddle.net/9FCq2/10/

Примечание: у меня есть пара внешних ресурсов в каждом из этих скриптов.

Мне интересно, как я могу каким-то образом настроить свой CSS или JavaScript, чтобы мой адаптивный выпадающий список отображался на 100% при нажатии, независимо от ширины родительского элемента.

HTML

 <div class="clearfix">
    <div class="float-left">
        <a href="http://concisecss.com">
                <img src="http://concisecss.com/images/logo.svg" alt="Concise Logo" width="150" />
            </a>
    </div>

    <div class="float-right">
        <nav class="nav-responsive">
            <ul class="list-inline list-unstyled">
                <li><a href="">Welcome</a>

                </li>
                <li><a href="">Why Concise</a>

                </li>
                <li><a href="">Get Started</a>

                </li>
                <li><a href="">Documentation</a>

                </li>
                <li><a href="">Add-Ons</a>

                </li>
            </ul>
        </nav>
    </div>
</div>
  

CSS

 .naver .naver-handle {
    color: inherit;
    cursor: pointer;
    display: none;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1;
    text-align: right;
    text-transform: uppercase;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.naver .naver-wrapper {
    height: auto;
}
.naver.enabled .naver-handle {
    display: block;
}
.naver.enabled .naver-wrapper {
    height: 0px;
    overflow: hidden;
}
.naver.enabled .naver-wrapper ul li {
    display: block;
    padding: 8px;
    text-align: left;
    width: 100%;
}
.naver.enabled .naver-wrapper ul li:hover {
    background: #f9f9f9;
}
.nav-responsive.naver .naver-handle:after {
    content:"f0c9";
    font-family: FontAwesome;
    text-align: right;
}
  

Библиотека Naver jQuery:http://formstone.it/components/Naver/jquery.fs.naver.js

Вам нужно указать навигацию и ее верхний контейнер width из 100% . Делая это, вы гарантируете, что оба будут занимать 100% ширину вашего экрана (или в каком бы контейнере они ни находились)

для вашего первого использования используйте jsfiddle, .naver-wrapper{width:100%;} потому что naver-wrapper это верхний родительский элемент для вашей навигации. Проверьте здесь

в то время как во втором примере вы должны предоставить как навигацию, так и верхний контейнер (родительский) width:100% Проверьте здесь

 .naver-wrapper{width:100%;}
.float-right{width:100%;}
  

Используйте приведенный ниже CSS. Я надеюсь, что это полезно для вас:

CSS

 .naver.enabled .naver-wrapper{
overflow: hidden;  position: absolute; left: 0px; width: 100%; }