Блог

Главная - Вопросы по программированию - Основа: вертикальный вспомогательный навигатор

Основа: вертикальный вспомогательный навигатор

#css #zurb-foundation

#css #zurb-foundation

Вопрос:

Возможно ли создать вертикальный субнавигатор? На странице документа есть только горизонтальный, и я не могу понять, как отображать элементы по вертикали

РЕДАКТИРОВАТЬ: вот ссылка на документы foundation: http://foundation.zurb.com/docs/components/subnav.html

И это оригинальный css (извлеченный из foundation.css):

 .sub-nav 
{
    display: block;
    width: auto;
    overflow: hidden;
    margin: -0.25rem 0 1.125rem;
    padding-top: 0.25rem;
    margin-right: 0;
    margin-left: -0.75rem; 
}

.sub-nav dt 
{
    text-transform: uppercase; 
}

.sub-nav dt,
.sub-nav dd,
.sub-nav li 
{
    float: left;
    display: inline;
    margin-left: 1rem;
    margin-bottom: 0.625rem;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 0.875rem;
    color: #999999; 
}

.sub-nav dt a,
.sub-nav dd a,
.sub-nav li a 
{
    text-decoration: none;
    color: #999999;
    padding: 0.1875rem 1rem; 
}

.sub-nav dt a:hover,
.sub-nav dd a:hover,
.sub-nav li a:hover 
{
    color: #737373; 
}

.sub-nav dt.active a,
.sub-nav dd.active a,
.sub-nav li.active a 
{
    border-radius: 3px;
    font-weight: normal;
    background: #008cba;
    padding: 0.1875rem 1rem;
    cursor: defau<
    color: white; 
}

.sub-nav dt.active a:hover,
.sub-nav dd.active a:hover,
.sub-nav li.active a:hover 
{
    background: #0078a0; 
}

Комментарии:

1. Нет кода, нет примера, нет ссылки на документацию. Что вы пробовали до сих пор?

2. Я попытался изменить исходный базовый css и переопределить класс sub-nav в моем файле css, но пока мне не удалось достичь своей цели

3. Итак, покажите нам, что у вас есть на данный момент, и мы сможем указать вам правильное направление. Создайте JSfiddle.net Демо-версия

Ответ №1:

Присвоение «вертикального» класса присваивается в html следующим образом:

 <ul class="vertical menu">
    <li><a href="oranges.html">Oranges</a></li>
    <li><a href="#">Limes</a></li>
    <li><a href="#">Lemons</a></li>
</ul>

Просто использование вертикальных значений по умолчанию равно small. Например <ul class="vertical medium-horizontal menu" ... > , будет вертикальным для небольшой ширины и горизонтальным для средней ширины. Я надеюсь, что это поможет.