Este guia demonstra como criar uma barra de navegação moderna e funcional, inspirada no design da plataforma Jianshu, utilizando HTML5 e CSS3. O foco principal é o uso de Flexbox para o layout e transições suaves para elementos interativos, como a barra de busca e menus suspensos.

Estrutura de Estilziação (CSS)

O CSS abaixo define o layout fixo no topo, o comportamento responsivo básico e os efeitos de hover. Utilizamos flexbox para distribuir os elementos entre o logotipo, a navegação centralizada e os botões de ação à direita.

/* Reset básico e configurações globais */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

.centro-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Header Fixo */
#navbar-principal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 58px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    z-index: 1000;
}

.container-nav {
    max-width: 1440px;
    min-width: 768px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
}

.logo-link img {
    height: 100%;
    padding: 10px 0;
}

/* Área de Busca e Links de Navegação */
.wrapper-centro {
    flex: 1;
    display: flex;
    margin-left: 50px;
}

.lista-links {
    display: flex;
    height: 100%;
}

.item-link {
    padding: 0 20px;
    transition: background 0.2s;
    cursor: pointer;
}

.item-link:hover {
    background-color: #f5f5f5;
}

.item-link span {
    margin-left: 8px;
    font-size: 17px;
}

/* Busca Dinâmica */
.secao-busca {
    align-self: center;
    margin-left: 20px;
    position: relative;
}

.secao-busca input {
    background-color: #eee;
    border: 1px solid #eee;
    border-radius: 20px;
    height: 38px;
    padding: 0 40px 0 20px;
    width: 160px;
    transition: width 0.4s ease-in-out;
    outline: none;
}

.secao-busca input:focus {
    width: 260px;
}

.icon-lupa {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Botões e Perfil do Usuário */
.acoes-usuario {
    display: flex;
    align-items: center;
}

.btn-publicar {
    background-color: #ea6f5a;
    color: #fff;
    width: 100px;
    height: 40px;
    border-radius: 20px;
    margin-left: 15px;
    font-weight: 400;
}

.perfil-dropdown {
    position: relative;
    margin: 0 20px;
}

.avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ddd;
}

.menu-suspenso {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 5px 0;
    min-width: 160px;
}

.perfil-dropdown:hover .menu-suspenso {
    display: block;
}

.menu-suspenso li a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
}

.menu-suspenso li a:hover {
    background-color: #f8f8f8;
}

Estrutura de Marcação (HTML)

Abaixo está o esqueleto HTML que utiliza as classes CSS definidas acima. Note o uso de SVGs embuitdos para manter a fidelidade visual sem depender de bibliotecas externas de ícones.

<header id="navbar-principal">
    <nav class="container-nav">
        <!-- Logotipo -->
        <a href="/" class="logo-link">
            <img src="https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="Logo">
        </a>

        <div class="wrapper-centro">
            <ul class="lista-links">
                <li class="item-link centro-flex">
                    <svg width="20" height="20" viewBox="0 0 1024 1024"><path d="M513.1 951.2c-9.3 0-18.1-0.6-27.4-1.2h-1.7c-43.1-2.9-84.5-11.7-122.9-25.6-121.2-46.6-208-131.1-257.5-251.1-15.7-39.6-25.6-81.6-29.1-125.2 0-2.3-0.6-4.7-0.6-7s-0.6-5.2-0.6-8.2l-0.6-7v-27.4l0.6-5.8c0-3.5 0.6-7 1.2-10.5 0.6-3.5 1.2-7.6 1.2-11.1 0.6-3.5 0.6-6.4 1.2-9.9 1.2-12.2 2.3-25.6 5.2-37.9 14-69.3 43.7-131.7 87.4-185.8 47.2-58.8 107.2-103.7 177.1-132.2 41.9-17.5 86.2-28 131.1-30.9 2.9-0.6 5.2-0.6 8.2-0.6 2.3 0 5.2-0.6 7.6-0.6l7-0.6h29.1c1.2 0 1.7 0.6 2.3 0.6 40.8 1.7 79.8 8.7 117.1 21 81 26.8 149.1 73.4 202.7 138.6 57.1 69.3 90.3 150.3 98.4 240.6 3.5 43.7 1.2 85.6-7 125.2-8.7 46-26.2 92-51.8 136.3-41.9 70.5-99 125.8-170.1 164.3-65.8 34.4-135.7 51.8-208 51.8z" fill="#ea6f5a"></path></svg>
                    <span>Descobrir</span>
                </li>
                <li class="item-link centro-flex">
                    <span>Mensagens</span>
                </li>
            </ul>

            <div class="secao-busca">
                <form>
                    <input type="text" placeholder="Pesquisar...">
                    <span class="icon-lupa">🔍</span>
                </form>
            </div>
        </div>

        <div class="acoes-usuario">
            <div class="perfil-dropdown">
                <a href="#">
                    <img class="avatar-img" src="http://upload.jianshu.io/users/upload_avatars/6481861/35e9a803-bcdc-477f-ac76-79ff2697f7fd.jpg" alt="Avatar">
                </a>
                <ul class="menu-suspenso">
                    <li><a href="#">Meu Perfil</a></li>
                    <li><a href="#">Favoritos</a></li>
                    <li><a href="#">Configurações</a></li>
                    <hr>
                    <li><a href="#">Sair</a></li>
                </ul>
            </div>
            <a href="#" class="btn-publicar centro-flex">Escrever</a>
        </div>
    </nav>
</header>

Funcionalidades Implementadas

• Barra de Busca Inteligente: Ao receber foco, o campo de entrada expande sua largura suavemente através de transition: width.
• Menu Dropdown: O menu de usuário é controlado via CSS :hover, exibindo opções extras quando o mouse passa sobre a imagem de perfil.
• Layout Flexível: O uso de flex: 1 no container central garante que a busca e os links ocupem o espaço disponível de forma dinâmica.
• Posicionamento Fixo: A barra permanece visível no topo da página (position: fixed) durante a rolagem.