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
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.
Postagens
