Question

是否可以制作垂直子导航？在doc文档中，只有横向页面，我无法找到如何垂直显示元素

编辑：这是基础文档的链接：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: default;
    color: white; 
}

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

Answer 1

分配＆＃39;垂直＆＃39; class在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>

只使用垂直默认值为小。例如，<ul class="vertical medium-horizontal menu" ... >对于小宽度是垂直的而对于中宽度是水平的。我希望这有帮助。

基础：垂直子导航

1 个答案: