domingo, 23 de novembro de 2014

Marcadores:
, , ,

Criando um Menu Avançado com Bootstrap

Publicado por: RodrigoLCA em 11:06
Anteriormente nós aprendemos como criar um menu principal para seu site, bem básico, para quem realmente não entende quase nada de programação e está iniciando.
Se você leu o artigo anterior que fala sobre CodeIgniter e Bootstrap, frameworks que mudaram a minha vida como programador, iremos aprender agora como criar um menu principal avançado utilizando essas ferramentas como frameworks.
Utilizaremos alguns conhecimentos do tutorial anterior sobre como criar um menu básico para o seu site, então se você não leu ainda, recomendo que leia antes de prosseguir com esse tutorial.

Como você já sabe, o Bootstrap automaticamente faz com que seu site fique responsivo, utilizando de seus elementos como referencia para posicionamento, tamanho, etc.
Sabendo disso, se a gente for criar um menu utilizando o Bootstrap para front-end, teremos que seguir algumas normas e padrões estabelecidos pelo Bootstrap para fazer com que ele automaticamente estruture os elementos da página para deixar responsivo corretamente.
Primeiramente iremos copiar nosso pacote BootIgniter (um pacote do CodeIgniter e Bootstrap integrados, você pode baixar no artigo Encarando as Frameworks: CodeIgniter e Bootstrap) no nosso diretório, verificamos se ta tudo certo, e começaremos a colocar a mão na massa.
Primeiramente criaremos um novo controlador, nomearemos de “menu.php”, crie esse arquivo na pasta Controllers, e atribua o seguinte conteúdo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Menu extends CI_Controller {
   public function index()
   {
      $this->load->view('header');
      $this->load->view('menu_principal');
      $this->load->view('footer');
   }
}

Novo controlador criado, agora precisamos alterar a rota do site para chamar ele primeiro ao invés do “welcome”, para isso, iremos no seguinte diretório: “application/config/routes.php” e mudaremos a seguinte linha:

Após alterar a rota do site, precisamos agora criar o arquivo view que o controlador chama, esse arquivo se chamará “menu_principal.php” e vai no diretório “application/view” do seu projeto:

Agora é hora de programar mesmo, mão na massa! Iremos utilizar CSS e HTML nesse mesmo arquivo, portando não é necessário linkar nada nos outros arquivos “footer.php” ou “header.php”.
Como já disse anteriormente, nosso menu tem que seguir um padrão para o bootstrap fazer sua parte, portando, iremos criar um menu utilizando o padrão do bootstrap. Abra o arquivo “menu_principal.php” e escreva:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style type="text/css">

</style>

<br/><br/><br/><br/>

<nav class="navbar navbar-default" role="navigation">
   <div class="container">
                       
   <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">MeuSite</a>
   </div>
                                              
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home <span class="sr-only">(selecionado)</span></a></li>
         <li><a href="#">Contato</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Servicos <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
               <li><a href="#">Design Grafico</a></li>
               <li><a href="#">Desenvolvimento Web</a></li>
               <li><a href="#">Informatica</a></li>
               <li class="divider"></li>
               <li><a href="#">Outros servicos</a></li>
            </ul>
          </li>
          <li><a href="#">Fale Conosco</a></li>
       </ul>
    </div><!-- /.navbar-collapse -->
                                              
    </div>
</nav>


Salve o arquivo em “menu_principal.php”, e perceba que teremos um menu principal, mesmo sem ter feito nada com CSS! Isso por que o Bootstrap tem seu próprio arquivo CSS, que por padrão formata o menu dessa forma.
No final desse artigo você vai descobrir alguns lugares onde você pode customizar esse layout padrão do Bootstrap, mudando cores, fontes e tamanhos. É incrível!
Veja como está ficando nosso menu principal:

Muitos sites feitos com Bootstrap criam menus padrões e deixam com esse visual ai mesmo, o que não é uma má idéia. Mas caso você queira customizar, vamos seguir em frente!

Customizando o menu principal
Como já havíamos criado o espaço para escrever CSS no nosso arquivo “menu_principal.php”, agora iremos utilizar este espaço. Escreva o seguinte código naquele espaço:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style type="text/css">
/* barra de menu principal */
.navbar-default {
   background: #B3D4E2;
   border: 1px solid #89B0D0;
}

/* elemento que tem o nome "MeuSite" */
.navbar-default .navbar-brand {
   color: #336799;
}

/* item de menu quando tiver selecionado */
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
   color: #5387AD;
   background-color: #F5F5F5;
}

/* item de menu */
.navbar-default .navbar-nav>li>a {
   color: #5387AD;
}

/* mouse over no item de menu */
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
   color: #0C2C4C;
   background-color: transparent;
}

/* item de menu dropdown quando tiver aberto */
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
   color: #5387AD;
   background-color: #FFFFFF;
}
</style>


Pronto! Nem parece que criamos um menu tão bem feito como este programando tão pouco, não é? Esse é o lado bom de utilizar frameworks, elas agilizam bastante o processo de criação.
Você pode explorar os códigos que escrevemos hoje, modificando, testando, indo no site do Bootstrap e procurando saber o que as classes fazem, etc.
Veja abaixo como ficou nosso menu principal:

Clicando em Servicos, o submenu aparece!
No código CSS que escrevemos, você pode modificar o tamanho, cores, altura, estilos, etc.
O Bootstrap é uma ótima framework, tem esse layout padrão que é bonito, mas você pode modificá-lo criando um novo arquivo CSS e sobrescrevendo os códigos, ou alterando o arquivo “bootstrap.css”.
Não é lá uma boa idéia, por que o arquivo tem bastante classes e códigos, e você iria demorar horas para alterar o arquivo e deixá-lo a seu gosto.
Existem alguns arquivos já modificados do “bootstrap.css” que tem a sua interface alterada, estes são chamados de temas.

Existe um site que disponibiliza estes temas grátis para você baixar, o site se chama BootSwatch, e no item “Themes” do site você encontra uma lista de temas que podem ser testados no próprio site, e você pode baixar indo no item “Download” e clicando em “bootstrap.min.css”.




2 comentários:

  1. Unknown4 de maio de 2017 às 23:13

    Meu código não funciona :(

    O menu nao fica na linha, ele imprime como se fosse lista mesmo

    ResponderExcluir
  2. Unknown22 de maio de 2018 às 12:09

    deu o mesmo pra mim kkkk

    ResponderExcluir

Assinar: Postar comentários (Atom)