0

HELP : Estou tentando desenvolver um drop down no menu estou tendo problemas de logica.

#TypeScript
Allyson Brandão
Allyson Brandão

import { Link } from "react-router-dom";

import './navbar.component.css'

import MenuLogo from '../../../assets/img/icons8-menu.svg';

import LogoSite from '../../../assets/img/logo.svg';

import UserLogo from '../../../assets/img/user.svg';

import AccountLogo from '../../../assets/img/down-chevron.svg';


import React from "react";


const NavBar: React.FunctionComponent = () => {


    return <div className="NavBar">

        <div className="nav-container">

            <div>

                <img className="navBarMenu" src={MenuLogo} alt="Menu" />

            </div>

            <div>

                <Link to="/api/painel">

                    <img className="navBarLogo" src={LogoSite} alt="Logo Nuvem 365" />

                </Link>

            </div>

            <div>

                <span className="navBarUserName">Nuvem </span>

                <img className="navBarUser" src={UserLogo} alt="User" />

                <button id="toggleButton" className="droppdown">

                  <img className="navBarAccount" src={AccountLogo} alt="Account User" />

                </button>

                <ul id="listButton">

                    <li>

                      <a href="/">Minha Conta</a>

                      <a href="/">Sair</a>

                    </li>

                </ul>

            </div>

        </div>

    </div>

}


export default NavBar;

0
1

Comentários (2)

0
Allyson Brandão

Allyson Brandão

27/04/2021 13:04

Vou verificar o JQuery , como utilizar ,

0
Flávio Melo

Flávio Melo

27/04/2021 09:29

<h1 id="dropdown">Menu</h1>
<ul style="display: none;" id="opcoes">
    <li>Massas</li>
    <li>Carnes</li>
    <li>Saladas e Vegetais</li>
</ul>

Sobre o uso do JQuery em menu dropdown exemplificado no exercício do módulo, essa é a melhor maneira de programar um menu dropdown ou existe uma forma melhor?

Analista Cloud Jr na empresa VenhaPraNuvem.