AddressForAll / site-v2

New AddressForAll website, version 3 of attempts to make it better
Apache License 2.0
1 stars 0 forks source link

Implementar menu com apenas CSS #11

Closed ppKrauss closed 2 years ago

ppKrauss commented 2 years ago

A versão atual permanece sem menu, o que é uma falha para a proposta desse primeiro rascunho.
Usar menu da tag <nav> do website corrente, se um CSS melhor por hora não for encontrado.

http://addressforall.org/resources/css/navbar.css

        <nav>
          <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
          <ul class="nav-list">
            <li>
              <a href="#!">Address For All</a>
              <ul class="nav-dropdown">
                <li><a href="/quemsomos">Quem Somos</a></li>
                <li><a href="/projetos">Projetos</a></li>
                <li><a href="/estatuto">Estatuto</a></li>
              </ul>
            </li>
            <li>
              <a href="#!">Dados & API</a>
              <ul class="nav-dropdown">
                <li><a href="/dados">Dados</a></li>
                <li><a href="/servicos">Serviços</a></li>
                <li><a href="/api">API</a></li>
              </ul>
            </li>
            <li>...</li>
          </ul>
        </nav>
elpbatista commented 2 years ago

Done! It still needs to be adapted for cell phones

elpbatista commented 2 years ago
 <nav>
      <ul className="nav">
        <li className="dropdown">
          <a
            className="dropdown-toggle"
            href="about"
            id="corporateMenuLink"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            Corporate
          </a>
          <ul className="dropdown-menu" aria-labelledby="corporateMenuLink">
            <li>
              <a href="/About">About US</a>
            </li>
            <li>
              <a href="#!">Statute</a>
            </li>
            <li>
              <a href="#!">Projects</a>
            </li>
            <li>
              <a href="#!">Partnerships</a>
            </li>
          </ul>
        </li>
        <li className="dropdown">
          <a
            className="dropdown-toggle"
            href="#!"
            id="resourcesMenuLink"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            Resources
          </a>
          <ul className="dropdown-menu" aria-labelledby="resourcesMenuLink">
            <li>
              <a href="#!">Data</a>
            </li>
            <li>
              <a href="#!">Services</a>
            </li>
            <li>
              <a href="#!">API</a>
            </li>
            <li>
              <a href="#!">Tools</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#!">FAQ</a>
        </li>
        <li>
          <a href="#!">Contact</a>
        </li>
        <li>
          <a href="#!">Blog</a>
        </li>
      </ul>
      <form className="d-flex">
        <select className="form-select" aria-label="Language">
          <option value="pt">pt</option>
          <option value="es">sp</option>
          <option value="en">en</option>
        </select>
      </form>
    </nav>