/ / Como combinar a barra superior e a barra de guias na Foundation 5 - zurb-foundation

Como combinar a barra superior e a guia na Foundation 5 - zurb-foundation

É possível combinar Barra superior e Barra de abas (fora da tela)?

Este: insira a descrição da imagem aqui

Torna-se isso quando redimensionar para o tamanho do celular:

insira a descrição da imagem aqui

Mas eu também quero incluir lá tab-bar (off canvas) para que se torne assim

insira a descrição da imagem aqui

Eu não conseguia imaginar como isso poderia ser feito e euestava tentando fazer o meu menu-ícone personalizado e colocá-lo dentro do top-bar, mas eu tive problemas com posicionamento, elementos foram desaparecendo, margin / padding didn "t work, posição relativa atrapalhou o meu estilo ainda mais por isso embora eu pergunte aqui talvez você tem uma ideia melhor.

Respostas:

3 para resposta № 1

existem 2 maneiras de fazer isso, primeiro você pode usar o consultas de mídia ou o outro caminho é usar a classe de visibilidade. Por exemplo, no código topbar, adicione class = "show-for-medium-up", o que tornará a barra superior visível em telas médias e acima, mas ocultá-la em pequenas dimensões.

<nav class="top-bar show-for-medium-up" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">........................

Em seguida, adicione o código para os offcanvas e adicione class = "hide-for-medium-up"

<div class="off-canvas-wrap hide-for-medium-up">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>

<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>

Ao fazer isso, você poderá implementar estilos diferentes dependendo do tamanho da tela. Para mais informações, confira classe de visibilidade


Perguntas relacionadas


Comentários (0)

Adicione um comentário