19 de mar. de 2014

Como criar um menu Horizontal simples mais com transição.

Você irá abrir um painel e colar o seguinte código:

  body {
   padding:0px;
   margin:0px;
  }

   #menu ul {
   padding:0px;
   margin:0px;
   float: left;
   width: 100%;
   background-color:#EDEDED;
   list-style:none;
   font:80% Tahoma;
  }

   #menu ul li { display: inline; }

   #menu ul li a {
   background-color:#EDEDED;
   color: #333;
   text-decoration: none;
   border-bottom:3px solid #7f7f7f;
   padding: 2px 10px;
   float:left;
  }

   #menu ul li a:hover {
   background-color:#000000;
   color: #6D6D6D;
   border-bottom:3px solid #EA0000;
  }
 --> </style> </head> <body> <div id="menu"> <ul> <li><a href="">Teste Stranger 1</a></li> <li><a href="">Teste Stranger 2</a></li> <li><a href="">Teste Stranger 3</a></li> <li><a href="">Teste Stranger 4</a></li> <li><a href="">Teste Stranger 5</a></li> </ul> </div> </body> </html>

Para poder usa-lo você vai fazer algumas alterações onde está "Teste Stranger" você vai apagar e colar o nome do menu que você quer e onde tem duas aspas "" você vai colar o link no meio delas. E pronto. Ficará mais ou menos com esse resultado aqui.