Menu Grade

Menu Grade

Neste tutorial vamos fazer um menu com formato de Grade.

Obs: você também pode adicionar uma mini galeria neste formato de grade adicionando um Lightbox

Vamos Adicionar o Html:

    <ul class="grade">
                    
      <li> <a href="#" title="Html">Html</a> </li>
      <li> <a href="#" title="Css">Css</a> </li>
      <li> <a href="#" title="jQuery">jQuery</a> </li>
      <li> <a href="#" title="jQuery">jQuery</a> </li>
      <li> <a href="#" title="Css">Css</a> </li>
      <li> <a href="#" title="Html">Html</a> </li>
                
    </ul>

Vamos Adicionar o Css:

    .grade {
		  list-style-type: none;
		  margin:auto;
		  overflow: hidden;
		  width: 31.6%;
		  background-color:#ffffff; 
		  padding: 0;
       }

	li {
		float:left;
		height: 100px;
		width: 100px;
		margin: 5px;
		transition: all .2s ease-in-out;
	}

	li a {
		
		width:100%;
		height:100%;
		line-height:100px;   
		background-color:#242424;
		color:#ffffff;
		text-decoration:none;  
		display:block;
		text-align:center;
		   
	}

	.grade:hover li{
		opacity: .3;
	}

	.grade:hover li:hover {
		opacity: 1 !important;
		cursor:pointer; 
	}

Veja o Resultado !

Baixar Código Veja Funcionando