/ Julho 29, 2018/ Webdesign

Neste Tutorial, vou explicar e mostrar como se pode criar um Menu – com efeito – usando CSS (Cascading Style Sheets).

Primeiro, cria-se a Lista que vai compor o Menu em HTML, por exemplo:

<div class=”list_container”>

<ul>

<li><a href=”#”>Item 1</a></li>

<li><a href=”#”>Item 2</a></li>

<li><a href=”#”>Item 3</a></li>

</ul>

</div>

A seguir, deve-se criar o Script CSS- que vai permitir aplica uma cor (no original) e outra – sempre que passar o rato sobre o mesmo. Eis então esse Script:

.list_container a
{
display: block;
padding: 1px;
padding-left: 10px;
width: 200px;
background-color: #FFF;
border-bottom: 1px solid #DDF;
}

.list_container a:link, .list_container a:visited
{
color: #369;
text-decoration: none;
}

.list_container a:hover
{
background-color: #369;
color: #fff;
}

Depois, guarde a Página Web, e pré-visualize-a.

E, assim pode aplicar efeitos aos Links dos menus, usando o CSS. Espero que começem e utilizar esta técnica.