"Um par de menus com efeitos. "
"Em horizontal e em vertical"
traduzido:
fonte e créditos:
oloblogger
Un par de menús con efectos. En horizontal y en vertical | Oloblogger
Un menú para poder acceder rápidamente desde un solo elemento a otras páginas o secciones importante...
Un menú para poder acceder rápidamente desde un solo elemento a otras
páginas o secciones importantes, es algo casi indispensable en cualquier
sitio web que tenga un mínimo de contenido.
Pero como con los colores (los que visualizan los humanos normales), versiones hay tantas como personas multiplicadas por gustos. Por aquí ya hemos publicado algunas decenas, pero seguro que más de uno todavía no ha encontrado ese que le acaba de cuadrar del todo.
Para ellos y siempre planteándolos sólo como base para modificar según la conveniencia de cada cual, aquí van un par que utilizan transiciones para incorporar efectos de "movimiento" con transiciones CSS. Ambos dos son variaciones de otros vistos anteriormente.
Este lo he visto por un par de sitios últimamente, pero estaba hecho con imágenes. En su momento vimos una fuente que permitía añadir iconos mediante una fuente "trucada" para que las letras no fueran tales sino dibujos escalables y que podían ser tratados con propiedades reservadas para texto (bold, font-size, color, etc.). Era la fuente Awesome.
Para ejemplarizar su uso presenté un menú muy similar a este pero mucho más sencillo de aspecto; apenas una palabra y un icono para cada elemento, sin ninguna cosa más.
No es que le haya añadido mucho más... unos bordes redondos y un cambio de escala para el hover, pero con poco a veces las cosas cambian mucho.
En la primera parte del código (HTML), los div con clases fa marcan el icono que se debe mostrar, siguiendo el catálogo de los disponibles con Awesome.
En la segunda (CSS) sólo destacar que de las cuatro últimas reglas, la primera es para que los elementos impares tengan un color de fondo distinto y las tres siguientes para cambiar el tamaño y asimismo el fondo del primer elemento.
El resto son reglas habituales y cambiando background y color de los selectores que los lleven, podréis integrar el menú totalmente con vuestro diseño.
Para que hagáis experimentos he preparado también un Codepen.
También vimos anteriormente tres de este tipo pero con disposición horizontal.
El elemento seleccionado se va a ver con un cambio de color de fondo, pero en lugar de ser un simple background que cambia de golpe, el color será realmente un bloque independiente que bajará de manera progresiva desplazándose hasta el elemento.
Otra vez para probar:
También como antes, os doy el código preparado para copiar y pegar en un gadget. En este caso, por ser más alto que ancho, parece que el sitio idóneo sería la barra lateral.
Aquí lo destacable son las últimas líneas del CSS que lo que hacen es situar el rectángulo naranja (.marca) que inicialmente está desplazado por arriba fuera de la zona visible (top: -30px;), dentro del menú y en concreto a la altura del elemento correspondiente.
El top en tanto por ciento para el elemento n tiene que ser el que salga de la fórmula (100/nºtotal elementos) * (n+1), así que eso hay que cambiarlo si la cantidad de elementos de vuestro menú son más o menos de 8, que son los que yo usé para el ejemplo.
En el anterior post sobre este tipo de menús lo expliqué con más detalle para el que necesite más aclaraciones.
Otro Codepen para pruebas con este último tipo de menú.
Y bueno, los de BPT que no olviden cambiar los símbolos # por las direcciones de destino que corresponda, que en las demo están así por innecesarios.
"Em horizontal e em vertical"
traduzido:
Um menu para acesso rápido de um item para outras páginas ou trechos importantes, é quase indispensável em qualquer site que tem um mínimo de conteúdo. Mas, como com as cores (que exibiu o humano normal ), há tantas versões como pessoas multiplicado pelo sabor. Pois aqui temos publicado dezenas , mas certamente mais do que um ainda não descobriu que você acabou de praça todos. Para eles e sempre criá-los apenas como uma base para modificar a conveniência de todos, aqui estão algumas que usam transições para incorporar os efeitos de "movimento" com transições CSS. Ambos outros dois são variações de visto anteriormente.
Isso eu vi um par de sites ultimamente, mas foi feito com fotos.No momento em que vi uma fonte que permitia a adição de ícones por uma fonte de "truque" de que as cartas não eram desenhos escaláveis e tal, mas que poderiam ser tratadas com propriedades reservadas para o texto (negrito, font-size, cor, etc.). Fonte era impressionante . apresentados para exemplificar o uso de um menu muito semelhante , mas isso parece muito mais fácil; apenas uma palavra e um ícone para cada item, sem qualquer outra coisa. 'Não é que você tenha adicionado um pouco mais ... bordas arredondadas e uma mudança de escala para a pairar, mas às vezes pequenas coisas mudam muito. Para testar :
Para adicionar um gadget tipo HTML / JavaScript (sob o cabeçalho parece o melhor lugar), eu só tenho que copiar e colar o seguinte.
Na primeira parte do código (HTML), o div com classe fa definir o ícone a ser exibido, seguindo o catálogo de disponível impressionante. Durante o segundo (CSS) observou que apenas os últimos quatro regras, o primeiro é para elementos estranhos têm uma cor de fundo diferente e os três seguintes para mudar o tamanho e também a parte inferior do primeiro elemento. O resto são regras comuns e mudando de fundo e Cor seletores que com, você pode integrar o menu inteiramente com seu projeto. vos para experimentos também prepararam uma Codepen .
Vimos, também, acima de três tal, mas com layout horizontal .Item selecionado, veremos uma mudança de cor de fundo, mas em vez de ser um simples fundo que muda de repente, a cor é realmente um bloco separado para download progressivamente se mudar para o item. novamente para tentar:
Além disso, como antes, eu dar o código pronto para copiar e colar em um gadget. Neste caso, ser mais alto do que largo, parece que o local ideal seria lateral.
Aqui estão os notáveis últimas linhas de CSS que você faz é o lugar da caixa de laranja ( marca. que é inicialmente deslocado pelo lado de fora da área visível () top: 30px-; ) dentro do menu e, especificamente, a altura o elemento correspondente. 'ssuperior em percentagem para o elemento que n tem que ser aquele de fórmula (100 / elementos totais) * (n +1), de modo que tem de ser alterada, se o número de elementos do menu são mais ou menos do que 8, que é o que eu usei para o exemplo. Nopost anterior sobre este tipo de menu, como expliquei em mais detalhes para que você precisar de mais esclarecimentos. aindateste Codepen este último tipo de menu. Y Bem, aqueles de BPTnão se esqueça de mudar o símbolo # para os endereços de destino correspondentes que estão no demo, bem como desnecessário.
Grandes caixas com ícone da fonte impressionante
Isso eu vi um par de sites ultimamente, mas foi feito com fotos.No momento em que vi uma fonte que permitia a adição de ícones por uma fonte de "truque" de que as cartas não eram desenhos escaláveis e tal, mas que poderiam ser tratadas com propriedades reservadas para o texto (negrito, font-size, cor, etc.). Fonte era impressionante . apresentados para exemplificar o uso de um menu muito semelhante , mas isso parece muito mais fácil; apenas uma palavra e um ícone para cada item, sem qualquer outra coisa. 'Não é que você tenha adicionado um pouco mais ... bordas arredondadas e uma mudança de escala para a pairar, mas às vezes pequenas coisas mudam muito. Para testar :
Para adicionar um gadget tipo HTML / JavaScript (sob o cabeçalho parece o melhor lugar), eu só tenho que copiar e colar o seguinte.
Na primeira parte do código (HTML), o div com classe fa definir o ícone a ser exibido, seguindo o catálogo de disponível impressionante. Durante o segundo (CSS) observou que apenas os últimos quatro regras, o primeiro é para elementos estranhos têm uma cor de fundo diferente e os três seguintes para mudar o tamanho e também a parte inferior do primeiro elemento. O resto são regras comuns e mudando de fundo e Cor seletores que com, você pode integrar o menu inteiramente com seu projeto. vos para experimentos também prepararam uma Codepen .
Deslizante verticalmente com uma seleção de marca
Vimos, também, acima de três tal, mas com layout horizontal .Item selecionado, veremos uma mudança de cor de fundo, mas em vez de ser um simples fundo que muda de repente, a cor é realmente um bloco separado para download progressivamente se mudar para o item. novamente para tentar:
Além disso, como antes, eu dar o código pronto para copiar e colar em um gadget. Neste caso, ser mais alto do que largo, parece que o local ideal seria lateral.
Aqui estão os notáveis últimas linhas de CSS que você faz é o lugar da caixa de laranja ( marca. que é inicialmente deslocado pelo lado de fora da área visível () top: 30px-; ) dentro do menu e, especificamente, a altura o elemento correspondente. 'ssuperior em percentagem para o elemento que n tem que ser aquele de fórmula (100 / elementos totais) * (n +1), de modo que tem de ser alterada, se o número de elementos do menu são mais ou menos do que 8, que é o que eu usei para o exemplo. Nopost anterior sobre este tipo de menu, como expliquei em mais detalhes para que você precisar de mais esclarecimentos. aindateste Codepen este último tipo de menu. Y Bem, aqueles de BPTnão se esqueça de mudar o símbolo # para os endereços de destino correspondentes que estão no demo, bem como desnecessário.
oloblogger
Un par de menús con efectos. En horizontal y en vertical | Oloblogger
Un menú para poder acceder rápidamente desde un solo elemento a otras páginas o secciones importante...
Un par de menús con efectos. En horizontal y en vertical
Pero como con los colores (los que visualizan los humanos normales), versiones hay tantas como personas multiplicadas por gustos. Por aquí ya hemos publicado algunas decenas, pero seguro que más de uno todavía no ha encontrado ese que le acaba de cuadrar del todo.
Para ellos y siempre planteándolos sólo como base para modificar según la conveniencia de cada cual, aquí van un par que utilizan transiciones para incorporar efectos de "movimiento" con transiciones CSS. Ambos dos son variaciones de otros vistos anteriormente.
Rectángulos grandes con la fuente de iconos Awesome
Este lo he visto por un par de sitios últimamente, pero estaba hecho con imágenes. En su momento vimos una fuente que permitía añadir iconos mediante una fuente "trucada" para que las letras no fueran tales sino dibujos escalables y que podían ser tratados con propiedades reservadas para texto (bold, font-size, color, etc.). Era la fuente Awesome.
Para ejemplarizar su uso presenté un menú muy similar a este pero mucho más sencillo de aspecto; apenas una palabra y un icono para cada elemento, sin ninguna cosa más.
No es que le haya añadido mucho más... unos bordes redondos y un cambio de escala para el hover, pero con poco a veces las cosas cambian mucho.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<div class="menuicon">
<a href="#">
<div class="fa fa-bug"></div>
<div class="title">My blog</div>
</a>
<a href="#">
<div class="fa fa-user"></div>
<div class="title">About</div>
</a>
<a href="#">
<div class="fa fa-camera"></div>
<div class="title">Portfolio</div>
</a>
<a href="#">
<div class="fa fa-search"></div>
<div class="title">Search</div>
</a>
<a href="#">
<div class="fa fa-envelope"></div>
<div class="title">Contact</div>
</a>
</div>
<style>
.menuicon {text-align: center; font-size: 0;}
.menuicon a {position: relative; display: inline-block; *display: inline; zoom: 1; width: 100px; height: 120px; text-align: center; color: PaleGoldenrod; text-shadow: 1px 1px 0 DarkGoldenrod; text-decoration: none; background: #D3AE4E; vertical-align: top; -webkit-transition: .3s all; -moz-transition: .3s all; transition: .3s all;}
.menuicon a .fa {position: relative; top: 10px; padding: 10px; border-radius: 200px; border: 2px solid white; font-size: 40px;}
.menuicon a .title {font-size: 20px; line-height: 60px;}
.menuicon a:hover {-webkit-transform: scale(0.90,0.90); -moz-transform: scale(0.90,0.90); transform: scale(0.90,0.90);}
.menuicon a:nth-of-type(odd) {background: #BF9830;}
.menuicon a:first-child {background: #A67900; width: 200px;}
.menuicon a:first-child .fa {border: 0; font-size: 60px;}
.menuicon a:first-child .title {font-size: 30px; line-height: 20px; font-style: italic;}
</style>
<div class="menuicon">
<a href="#">
<div class="fa fa-bug"></div>
<div class="title">My blog</div>
</a>
<a href="#">
<div class="fa fa-user"></div>
<div class="title">About</div>
</a>
<a href="#">
<div class="fa fa-camera"></div>
<div class="title">Portfolio</div>
</a>
<a href="#">
<div class="fa fa-search"></div>
<div class="title">Search</div>
</a>
<a href="#">
<div class="fa fa-envelope"></div>
<div class="title">Contact</div>
</a>
</div>
<style>
.menuicon {text-align: center; font-size: 0;}
.menuicon a {position: relative; display: inline-block; *display: inline; zoom: 1; width: 100px; height: 120px; text-align: center; color: PaleGoldenrod; text-shadow: 1px 1px 0 DarkGoldenrod; text-decoration: none; background: #D3AE4E; vertical-align: top; -webkit-transition: .3s all; -moz-transition: .3s all; transition: .3s all;}
.menuicon a .fa {position: relative; top: 10px; padding: 10px; border-radius: 200px; border: 2px solid white; font-size: 40px;}
.menuicon a .title {font-size: 20px; line-height: 60px;}
.menuicon a:hover {-webkit-transform: scale(0.90,0.90); -moz-transform: scale(0.90,0.90); transform: scale(0.90,0.90);}
.menuicon a:nth-of-type(odd) {background: #BF9830;}
.menuicon a:first-child {background: #A67900; width: 200px;}
.menuicon a:first-child .fa {border: 0; font-size: 60px;}
.menuicon a:first-child .title {font-size: 30px; line-height: 20px; font-style: italic;}
</style>
En la primera parte del código (HTML), los div con clases fa marcan el icono que se debe mostrar, siguiendo el catálogo de los disponibles con Awesome.
En la segunda (CSS) sólo destacar que de las cuatro últimas reglas, la primera es para que los elementos impares tengan un color de fondo distinto y las tres siguientes para cambiar el tamaño y asimismo el fondo del primer elemento.
El resto son reglas habituales y cambiando background y color de los selectores que los lleven, podréis integrar el menú totalmente con vuestro diseño.
Para que hagáis experimentos he preparado también un Codepen.
En vertical con una marca de selección deslizante
También vimos anteriormente tres de este tipo pero con disposición horizontal.
El elemento seleccionado se va a ver con un cambio de color de fondo, pero en lugar de ser un simple background que cambia de golpe, el color será realmente un bloque independiente que bajará de manera progresiva desplazándose hasta el elemento.
Otra vez para probar:
También como antes, os doy el código preparado para copiar y pegar en un gadget. En este caso, por ser más alto que ancho, parece que el sitio idóneo sería la barra lateral.
<div class="menudes">
<a href="#">Inicio</a>
<a href="#">Pintura</a>
<a href="#">Escultura</a>
<a href="#">Grabados</a>
<a href="#">Música</a>
<a href="#">Danza</a>
<a href="#">Acerca de</a>
<a href="#">Contacto</a>
<div class="marca"></div>
</div>
<style>
.menudes {
position: relative;
overflow: hidden;
width: 200px;
margin: 10px auto 10px;
background: #000;
text-align:center;
font-size: 0;
}
.menudes a {
display: block;
padding: 8px;
border-bottom: 2px solid #fff;
position: relative;
z-index: 2;
color: white;
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
font-family: arial;
font-weight: bold;
}
.marca {
position: absolute;
top: -30%;
left: 0;
width: 100%;
height: 12.5%;
background: orange;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menudes a:hover {color: #000;}
.menudes a:nth-child(1):hover ~ .marca {top: 0%;}
.menudes a:nth-child(2):hover ~ .marca {top: 12.5%%;} /* (100/nº elementos)x1 */
.menudes a:nth-child(3):hover ~ .marca {top: 25%;} /* (100/nº elementos)x2 */
.menudes a:nth-child(4):hover ~ .marca {top: 37.5%;} /* (100/nº elementos)x3 */
.menudes a:nth-child(5):hover ~ .marca {top: 50%;}
.menudes a:nth-child(6):hover ~ .marca {top: 62.5%;}
.menudes a:nth-child(7):hover ~ .marca {top: 75%;}
.menudes a:nth-child(8):hover ~ .marca {top: 87.5%;}
</style>
<a href="#">Inicio</a>
<a href="#">Pintura</a>
<a href="#">Escultura</a>
<a href="#">Grabados</a>
<a href="#">Música</a>
<a href="#">Danza</a>
<a href="#">Acerca de</a>
<a href="#">Contacto</a>
<div class="marca"></div>
</div>
<style>
.menudes {
position: relative;
overflow: hidden;
width: 200px;
margin: 10px auto 10px;
background: #000;
text-align:center;
font-size: 0;
}
.menudes a {
display: block;
padding: 8px;
border-bottom: 2px solid #fff;
position: relative;
z-index: 2;
color: white;
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
font-family: arial;
font-weight: bold;
}
.marca {
position: absolute;
top: -30%;
left: 0;
width: 100%;
height: 12.5%;
background: orange;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menudes a:hover {color: #000;}
.menudes a:nth-child(1):hover ~ .marca {top: 0%;}
.menudes a:nth-child(2):hover ~ .marca {top: 12.5%%;} /* (100/nº elementos)x1 */
.menudes a:nth-child(3):hover ~ .marca {top: 25%;} /* (100/nº elementos)x2 */
.menudes a:nth-child(4):hover ~ .marca {top: 37.5%;} /* (100/nº elementos)x3 */
.menudes a:nth-child(5):hover ~ .marca {top: 50%;}
.menudes a:nth-child(6):hover ~ .marca {top: 62.5%;}
.menudes a:nth-child(7):hover ~ .marca {top: 75%;}
.menudes a:nth-child(8):hover ~ .marca {top: 87.5%;}
</style>
Aquí lo destacable son las últimas líneas del CSS que lo que hacen es situar el rectángulo naranja (.marca) que inicialmente está desplazado por arriba fuera de la zona visible (top: -30px;), dentro del menú y en concreto a la altura del elemento correspondiente.
El top en tanto por ciento para el elemento n tiene que ser el que salga de la fórmula (100/nºtotal elementos) * (n+1), así que eso hay que cambiarlo si la cantidad de elementos de vuestro menú son más o menos de 8, que son los que yo usé para el ejemplo.
En el anterior post sobre este tipo de menús lo expliqué con más detalle para el que necesite más aclaraciones.
Otro Codepen para pruebas con este último tipo de menú.
Y bueno, los de BPT que no olviden cambiar los símbolos # por las direcciones de destino que corresponda, que en las demo están así por innecesarios.
Postagens
