Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17720
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu centralizado com abas feito em CSS

23-03-2015 20:02

Nesse post estou indicando um menu centralizado com abas em CSS.

Veja os exemplos nesse link http://matthewjamestaylor.com/centered-menus/

Para copiar um dos exemplos, acesse o código-fonte no link acima, em seguida, escolha uma das class no estilo da página, por exemplo

        /* -------------------------------------------------- */         /* roundbar-blue */         /* -------------------------------------------------- */         #roundbar-blue {                 clear:left;                 float:left;                 width:100%;                 background:#80C8FF url(roundbar-blue.gif) 0 25% repeat;                 font-family:Trebuchet MS, Helvetica, sans-serif;                 border-bottom:1px solid #49A9FF;                 overflow:hidden;         }         #roundbar-blue ul {                 clear:left;                 float:left;                 list-style:none;                 margin:0;                 padding:0;                 position:relative;                 left:50%;                 text-align:center;         }         #roundbar-blue ul li {                 display:block;                 float:left;                 list-style:none;                 margin:0;                 padding:0;                 position:relative;                 right:50%;         }         #roundbar-blue ul li.first {                 border-left:1px solid #49A9FF;         }         #roundbar-blue ul li.last {                 border-right:1px solid #99D8FF;         }         #roundbar-blue ul li a {                 display:block;                 margin:0;                 padding:.4em .8em;                 color:#000;                 text-decoration:none;                 border-left:1px solid #99D8FF;                 border-right:1px solid #49A9FF;                 line-height:1.3em;         }         #roundbar-blue ul li.active a {                 background:url(roundbar-blue.gif) 0 75% repeat;                 font-weight:bold;         }         #roundbar-blue ul li a:hover {                 background:url(roundbar-blue.gif) 0 75% repeat;         }         #roundbar-blue ul li a span {                 display:block;         }

O estilo acima é roundbar-blue. Agora é só aplicar esse estilo a div de exemplo

<div id="roundbar-blue">         <ul>                 <li class="first"><a href="#"><span>Home Page</span></a></li>                 <li class="active"><a href="#"><span>Our Products</span></a></li>                 <li><a href="#"><span>About Us</span></a></li>                 <li class="last"><a href="#"><span>Contact Us</span></a></li>         </ul> </div>

Se desejar outro estilo para o menu, só copiar a class desejada e atribuir o id da class ao id da div principal.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado