Menu Nav – Hover Pontilhado

Menu Nav – Hover Pontilhado

Neste tutorial vamos fazer um menu com efeito hover pontilhado com css e html.

Vamos Adicionar o Html:

    <nav class="bg hover-pontilhado">

        <a href="#" title="Página Inícial">Home</a>
        <a href="#" title="Html">Html</a>
        <a href="#" title="Css">Css</a>
        <a href="#" title="jQuery">jQuery</a>
        <a href="#" title="WrodPress">WrodPress</a>
    
    </nav>

Vamos Adicionar o Css:

nav.bg {
	    
	    width:100%;
	    float:left; 
	    text-align:center;  
	    background-color: #ffd90e;
	    padding:1em 0em; 

	}

	nav a {

		position: relative;
		display: inline-block;
		margin:5px 30px;
		outline: none;
		color: #fff;
		text-decoration: none;
		font-weight: bold;
		font-size: 1.3em;
		transition:0.6s; 

	}

	nav a:hover,
	nav a:focus {

		transition:0.4s;
		outline: none;
		color:#000; 

	}

	/* Efeito Pontilhado */
	.hover-pontilhado a {

		-webkit-transition: color 0.4s;
		-moz-transition: color 0.4s;
		transition: color 0.4s;

	}

	.hover-pontilhado a::before {

		font-size: 1.2em;
		color: transparent;
		position: absolute;
		top: 70%;
		left: 50%;
		content: '•';
		text-shadow: 0 0 transparent;
		-webkit-transition: text-shadow 0.3s, color 0.3s;
		-moz-transition: text-shadow 0.3s, color 0.3s;
		transition: text-shadow 0.3s, color 0.3s;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		transform: translateX(-50%);
		pointer-events: none;
	}

	.hover-pontilhado a:hover::before,
	.hover-pontilhado a:focus::before {
		color: #2f2f2e;
		text-shadow: 10px 0 #2f2f2e, -10px 0 #2f2f2e;
	}

	.hover-pontilhado a:hover,
	.hover-pontilhado a:focus {
		color: #2f2f2e;
	}

Veja o Resultado !

Baixar Código Veja Funcionando