Menu DropDown com Bootstrap

Menu DropDown com Bootstrap

Bootstrap é um framework web com código-fonte aberto para desenvolvimento de componentes de interface e front-end para sites e aplicações web usando HTML, CSS e JavaScript, baseado em modelos de design para a tipografia, melhorando a experiência do usuário em um site amigável e responsivo.

Neste tutorial vamos fazer um Menu DropDown utilizando o Bootstrap.

vamos adicionar o Html:

<!--Navbar Degradê-->
<nav class="navbar navbar-expand-lg navbar-dark bg-degrade mb-4">
   
    <a class="navbar-brand margin-right" href="#" title="Loop Nerd">Loop Nerd</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
   
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            
            <li class="nav-item">
                <a class="nav-link" href="#">Sobre</a>
            </li>
            
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Front-end 
                    </a>
                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#" title="Html5">Html5</a>
                    <a class="dropdown-item" href="#" title="Css3">Css3</a>
                    <a class="dropdown-item" href="#" target="jQuery">jQuery</a>
                    <a class="dropdown-item" href="#" title="Design Responsivo">Design Responsivo</a>
                </div>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#" title="Contato">Contato</a>
            </li>

        </ul>
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="text" placeholder="Pesquisa" aria-label="Pesquisa">
        </form>
    </div>
</nav>

Vamos Adicionar o css ONLINE:

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>  
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css'>

Css personalizado:

body { background-color:#d0d0d0; }

.bg-degrade { 

    background: rgb(2,13,196);
    background: linear-gradient(80deg, rgba(2,13,196,1) 0%, rgba(0,198,235,1) 100%);

}

.margin-right { margin-right:60px; }

.navbar .dropdown-menu a:hover { color: #565555!important;}

.title { color:#777777; }

Vamos adicionar o Js do Bootstrap:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.min.js'></script>

Veja o Resultado!

Baixar Código Veja Funcionando