1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

[Toturial] Criar menu - Vista Style - HTML + CSS

Discussão em 'Web Development' iniciada por xOy, 8 de Dezembro de 2007. (Respostas: 6; Visualizações: 4071)

  1. xOy

    xOy Power Member

    Boas pessoal... Neste pequeno toturial vou expliar como criar um menu tipo windows Vista em HTML e CSS.

    Provavelmente ja devem ter visto no windows Vista um menu deste genero:
    [​IMG]

    pois bem... aqui explica como fazer um menu bar deste estilo:
    [​IMG]


    Primeiro definimos o menu com a tag <ul> <- esta tag ira esta em <div class="vista_toolbar">
    Cada <li> representa um elemento ou butao do menu; ou seja sempre que quiseres um butao fazes <li> butao </li>

    vamos ver um exemplo:

    Ate aqui tudo bem. Agora temos que definir esta tag em CSS.

    Temos 2 hipoteses... 1. ou definimos o CSS com as tags <style> antes do <title> e do <body>:
    ou 2. entao criamos uma linha de codigo antes do <body> e dentro das tags <head> e </head> onde diga:

    Código:
    <link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
    depois temos que criar no directorio "style" o ficheiro style.css e lá inserir:

    Código:
    [FONT=Courier New]#vista_toolbar {[/FONT] 
       [FONT=Courier New]float:left;[/FONT] 
       [FONT=Courier New]font:normal 12px 'Trebuchet MS','Arial';[/FONT] 
       [FONT=Courier New]margin:0;[/FONT] 
       [FONT=Courier New]padding:0;[/FONT] 
       [FONT=Courier New]}[/FONT]
     
    Agora em seguida vamos criar a tag <ul> <- no mesmo ficheiro style/style.css ou no html da pagina <style></style>...



    Código:
     [FONT=Courier New]#vista_toolbar ul {[/FONT] 
      [FONT=Courier New]background-image:url(back.gif);[/FONT] 
      [FONT=Courier New]background-repeat:repeat-x;[/FONT] 
      [FONT=Courier New]float:left;[/FONT] 
      [FONT=Courier New]line-height:32px;[/FONT] 
      [FONT=Courier New]list-style:none;[/FONT] 
      [FONT=Courier New]margin:0;[/FONT] 
      [FONT=Courier New]padding:0 10px 0 10px;[/FONT] 
      [FONT=Courier New]width:500px;[/FONT] 
      [FONT=Courier New]}[/FONT] 
    
    A altura do menu esta definida com line-height:32px; e o comprimento com width:500px; 10 px de espaçamento porque nao queremos que o menu comece com butoes logo no inicio... tem que ter um espaço... ahh px significa pixel


    Agora vamos criar a tag <li>


    Código:
     [FONT=Courier New]#vista_toolbar li {[/FONT] 
      [FONT=Courier New]display:inline;[/FONT] 
      [FONT=Courier New]padding:0;[/FONT] 
      [FONT=Courier New]}[/FONT]
    o display esta em 'inline' pk quero que os butoes sejam expostos numa linha.

    Criar os butoes:

    Pode criar os seus proprios butoes se souber utilizar o fireworks ou o photoshop, ou ver este toturial nesta pagina, ou usar estes mesmos aqui:

    [​IMG] left.png
    [​IMG] right.png

    Codigo HTML do butao:

    Código:
     [FONT=Courier New]<li>[/FONT] 
      [FONT=Courier New]<a href="#">[/FONT] 
      [FONT=Courier New]<span>Pagina Incial</span>[/FONT] 
      [FONT=Courier New]</a>[/FONT] 
      [FONT=Courier New]</li>[/FONT] 
    
    Se quer adicionar uma imagem antes do texto apenas adicionar a seguinte linha de codigo dentro do <span>:

    Código:
    <img align="left" src="files/paginicial.png" alt="Pagina Inicial">
    ou seja... fica assim:

    Código:
     [FONT=Courier New]<li> [/FONT]
      [FONT=Courier New]<a href="#"> [/FONT]
      [FONT=Courier New]<span> [/FONT]
      [FONT=Courier New]<img align="left" src="files/paginicial.png" alt="Pag. Inicial"/>Pagina Inicial[/FONT] 
      [FONT=Courier New]</span>[/FONT] 
      [FONT=Courier New]</a>[/FONT] 
      [FONT=Courier New]</li>[/FONT] 
    
    Agora à que fazer os links para isto... dentro do style/style.css se optou pela 2ª hipotese, ou dentro das tags <style>...</style> se optou pela 1ª opçao:

    Código:
     [FONT=Courier New]#vista_toolbar a {[/FONT] 
      [FONT=Courier New]color:#FFF[/FONT] 
      [FONT=Courier New]float:left;[/FONT] 
      [FONT=Courier New]padding:0 3px 0 3px; [/FONT]
      [FONT=Courier New]text-decoration:none;[/FONT] 
      [FONT=Courier New]}[/FONT]
     [FONT=Courier New]#vista_toolbar a span {[/FONT] 
      [FONT=Courier New]display:block;[/FONT] 
      [FONT=Courier New]float:none;[/FONT] 
      [FONT=Courier New]padding:0 10px 0 7px;[/FONT] 
      [FONT=Courier New]}[/FONT] 
     
      [FONT=Courier New]#vista_toolbar a span img {[/FONT] 
      [FONT=Courier New]border:none;[/FONT] 
      [FONT=Courier New]margin:8px 4px 0 0;[/FONT] 
      [FONT=Courier New]}[/FONT] 
     
    
    Se tivers uma imagem seguido de um texto num butao, tens que centrar verticalmente com as margens.

    Código:
     [FONT=Courier New]#vista_toolbar a:hover{[/FONT] 
      [FONT=Courier New]background: url(left.png) no-repeat left center;[/FONT] 
      [FONT=Courier New]}[/FONT] 
     
      [FONT=Courier New]#vista_toolbar a:hover span {[/FONT] 
      [FONT=Courier New]background:url(right.png) no-repeat right center;[/FONT] 
      [FONT=Courier New]}[/FONT]
    
    e pronto...


    Aqui fica um toturial traduzido por mim.. eu pessoalmente ainda nao testei, mas penso fazer outro projecto brevemente e devo usar isto...

    Se quiserem mais infos podem visitar o site de onde sakei isto (Aqui) ou fazer o download do zip com os ficheiros todos e ja com o codigo td feito -> Download

    espero ter ajudado..

    cumpz* :cool:
     
    Última edição: 12 de Dezembro de 2007
  2. EuCoRi

    EuCoRi Power Member

    Escreve-se tutorial. :)
     
  3. exit

    exit Power Member

    Sempre útil!
     
  4. Squillace

    Squillace Power Member

    ERRADO! Esse código deve ser colocado ANTES do <body> e DENTRO do <head></head> !
     
  5. xOy

    xOy Power Member

    corrigido! :P :003:
     
  6. Squillace

    Squillace Power Member

    Não. Antes do body e DENTRO do <head></head>.
     
  7. xOy

    xOy Power Member

    done!
     

Partilhar esta Página