aprenda como é feito:... " Um menu minimalista" | #blogdicasblogueiros ...bdb... blog dicas blogueiros
1

aprenda como é feito:... " Um menu minimalista"

Aqui neste espaço... 
Apenas divulgo e indico... 
Posts, notícias, dicas etc. 
 com devidas fontes  e créditos:    


fonte e créditos:
http://vagabundia.blogspot.com
/2011/01/un-menu-minimalista.html




"   Un menú minimalista"


La idea de tutorialzine.com no es sólo minimalista proque así llaman a este tipo de menú sino porque permite entender cómo funcionan determinadas propiedades CSS y cómo podemos combinarlas.

El HTML es sencillo y no tiene diferencias con tantos otros; es una lista a la que identificamos con un ID y en la que en cada item incluimos un enlace cuyo texto está dentro de otra etiqueta:
  
<ul id="navigationMenu">
  <li>
    <a class="home" href="#">
      <span>Home</span>
    </a>
  </li>
  .......
</ul>
¿Por qué usar la etiqueta SPAN y no poner directamente el texto? Justamente para poder combinar propiedades.

Necesitamos una imagen que usaremos de fondo y que será un sprite es decir, una serie de botoncitos todos iguales que se unen en una sola imagen; de esa manera, la carga será más rápida, usamos una sola imagen en lugar de varias. Para aplicarles un fondo a cada item de la lista, estos deben estar dimensionados y se deben tener  la propiedad overflow:hidden


En este caso, de izquierda a derecha, el primer botón estará en la posición 0, el segundo comienza en el pixel 38, el tercero en el 76, el cuarto en el 114 y el último en el 152; para calcular eso, simplemente vamos sumando anchos. Lo mismo ocurre cono los de abajo así que podemos usar background-position para posicionar el fondo y de ese modo, mostrar solo un pedacito de la imagen, basta usar esos valores colocándolos como negativos lo que desplazará la imagen original:


Empezamos entonces con las definiciones básicas; a los items de la lista se les da un tamaño fijo y se los separa un poco entres si; como las etiquetas LI son etiquetas de bloque, se verán una debajo de la otra:
 
#navigationMenu li {
  height: 39px;
  list-style: none;
  padding: 2px;
  width: 38px;
}
Cada item contiene un enlace que siempre usa la misma imagen y al que transformamos en bloque para poder dimensionarlo :
#navigationMenu a {
  background:url(URL_imagen) no-repeat;
  display:block;
  height:39px;
  position:relative;
  width:38px;
}
Ahora, definiremos el SPAN es decir el texto en si mismo al que posicionaremos de manera absoluta dentro del enlace y usando left, lo pondremos justo donde termina el botón pero, lo mantendremos oculto colocándole cero a su ancho:
 
#navigationMenu span {
  left: 38px;
  overflow: hidden;
  position: absolute;
  width: 0;
  /* le agregamos cualquier propiedad para las fuentes */
  color: #FFF;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 39px;
  text-shadow: 2px 2px 1px #000;
}
Y ahora los efectos hover que funcionarán cuando ponemos el cursor encima:
#navigationMenu a:hover {
  text-decoration:none;
}
Le indicamos que, cuando pones el cursor sobre la etiqueta A, se muestre el contenido del SPAN que está adentro de ella:
#navigationMenu a:hover span {
  overflow: visible;
  padding: 0 20px;
  width:auto;
}
Sólo falta ubicar los botones de cada item que hemos identificado con clases así que:
#navigationMenu .home { background-position:0 0; }
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span { background-color:#7DA315; }

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{ background-color:#1E8BB4; }

#navigationMenu .services { background-position:-76px 0; }
#navigationMenu .services:hover { background-position:-76px -39px; }
#navigationMenu .services span{  background-color:#C86C1F; }

#navigationMenu .portfolio { background-position:-114px 0; }
#navigationMenu .portfolio:hover{ background-position:-114px -39px; }
#navigationMenu .portfolio span{ background-color:#D0A525; }

#navigationMenu .contact { background-position:-152px 0; }
#navigationMenu .contact:hover { background-position:-152px -39px; }
#navigationMenu .contact span{ background-color:#AF1E83; }


En el ejemplo original puede verse que también hay alguna propeidad de animación que sólo funcioanrá en Chrome/Safari así que por ahora, hasta que algunos otros navegadores comiencen a utilizarla, me abstengo de ella pero, puede agregarse sin problemas.





traduzido

"  Um menu minimalista"

A idéia de tutorialzine.com ProQuad não é apenas o mínimo e chamar este tipo de menu, mas ajuda a entender como certas propriedades CSS e como podemos combiná-los.

HTML é simples e não difere de muitos outros, é uma lista que identifica com uma identificação e na qual cada item incluído um link cujo texto está dentro de um tag:

id="navigationMenu"> <ul
  <li>
    <a class="home" href="#">
      <span> Home </ span>
    </ A>
  </ Li>
  .......
</ Ul>

Por que usar a tag SPAN e não colocar o texto diretamente? Só para ser capaz de combinar as propriedades.

Precisamos de uma imagem de fundo de usar e será duende ou seja, uma série de botões no mesmo para se unirem em uma única imagem, dessa forma, a carga será mais rápida, usamos uma única imagem em vez de vários. Para aplicar um background de cada item na lista, devem ser dimensionados e deve ter a propriedade overflow: hidden


Neste caso, da esquerda para a direita, o primeiro botão está na posição 0, a segunda começa no 38 pixels, o terceiro em 76, a quarta nos 114 e os últimos no 152, para calcular que, apenas deixe acrescentando largura. O mesmo é verdadeiro do cone abaixo para que possamos usar background-posição a posição do fundo e, portanto, mostram apenas um pouco da imagem, basta usar os valores como negativa, colocando o que move a imagem original:


Em seguida, começou com as definições básicas, uma lista de itens é dado um tamanho fixo e são separados um pouco se você vem, e as tags são tags LI bloco, será um acima do outro:

NavigationMenu li # {
  height: 39px;
  list-style: none;
  padding: 2px;
  width: 38px;
}

Cada item contém um link que sempre usa a mesma imagem e transformamos quadra de dimensão:

NavigationMenu # um {
  url (URL_imagen) no-repeat;: fundo
  display: block;
  height: 39px;
  position: relative;
  width: 38px;
}

Agora, vamos definir a extensão é o texto que vai posicionar-se como uma necessidade absoluta para o loop e utilizando esquerda, direita, onde vai colocar o botão, mas mantê-lo escondido, colocando zero a sua largura:

# NavigationMenu span {
  left: 38px;
  overflow: hidden;
  position: absolute;
  width: 0;
  / * Nós adicionamos qualquer propriedade para o * Fontes /
  color: # FFF;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 39px;
  text-shadow: 2px 2px 1px # 000;
}

E agora os efeitos funcionará quando passar o mouse sobre:

# NavigationMenu a: hover {
  text-decoration: none;
}

Ele indicou que, quando você colocar o cursor na marca A, exibir o conteúdo de SPAN está dentro dele:

# NavigationMenu a: hover {span
  overflow: visible;
  padding: 0 20px;
  width: auto;
}

Resta apenas a colocação dos botões para cada item que temos identificado com as classes da seguinte forma:

#. NavigationMenu Home {background-position: 0 0;}
#. NavigationMenu Home: hover {background-position: 0-39px;}
# NavigationMenu Home span {background-color: # 7DA315;}.

# NavigationMenu Sobre {background-position:-38px 0;}.
# NavigationMenu Sobre: hover {background-position:-38px-39px;}.
# NavigationMenu Sobre span {background-color: # 1E8BB4;}.

#. NavigationMenu Serviços {background-position:-76px 0;}
#. NavigationMenu Serviços: hover {background-position:-76px-39px;}
#. NavigationMenu Serviços span {background-color: # C86C1F;}

#. NavigationMenu Carteira {background-position:-114px 0;}
#. NavigationMenu portfólio: hover {background-position:-114px-39px;}
# NavigationMenu Carteira span. {Background-color: # D0A525;}

#. NavigationMenu Contato {background-position:-152px 0;}
# NavigationMenu Contato: hover {background-position:-152px-39px;}.
#. NavigationMenu span Contato {background-color: # AF1E83;}


No exemplo original pode ser visto que há alguma animação propeidad funcioanrá só no Chrome / Safari então, por enquanto, até que alguns outros navegadores começam a usá-lo, abstenho-me de ele, mas podem ser adicionados sem problemas.




flo

http://blogdicasblogueiros.blogspot.com.br/

Um comentário:

Mensagem do formulário de comentário: