Posters de objetos retro |
Experimentos con CSS3 |
Algna vez (espero que pronto) las nuevas opciones del CSS3 estarán disponibles en todos los navegadores. Por ahora, sólo son accesibles en Firefox, Opera, Safari y Chrome pero incluso allí, con ciertas limitaciones y propiedades diferenciadas. De todos modos, vale la pena mostar los experiementos que se van encontrando.
Estos fueron publicados en CSSTricks y son muy simples de aplicar aunque algunas de las propiedades utilizadas son un poco crípticas.
Estos fueron publicados en CSSTricks y son muy simples de aplicar aunque algunas de las propiedades utilizadas son un poco crípticas.
Creación de elipses:
¡ Hola !
<style>
.oval {
background-color: #1E90FF;
color: #000;
font-family: Comic Sans MS;
font-size: 40px;
height: 100px;
line-height: 100px;
margin: 0 auto;
text-align: center;
width: 200px;
-moz-border-radius: 100px / 50px;
-moz-transition: all 0.8s linear;
-webkit-border-radius: 100px 50px;
-webkit-transition: all 0.8s linear;
}
.oval:hover {
-webkit-transform: rotate(720deg);
}
</style>
<div class="oval">¡ Hola !</div>NOTA: En navegadores como Chrome, el efecto hover utiliza la propiedad -webkit-transform y el óvalo girará.
Esfumados con sombras:
Fantasmagórico
<style>
.blur {
color: white;
font-family: Helvetica;
font-size: 80px;
font-weight: bold;
height: 100px;
letter-spacing: -5px;
text-align: center;
color: rgba(255,255,255,0.2);
text-shadow:0 0 2px rgba(255,255,255,0.2),0 0 4px rgba(255,255,255,0.2),0 0 6px rgba(255,255,255,0.2);
-webkit-transition: all 0.2s linear;
}
.blur:hover {
color: rgba(128, 128, 128, 0.2);
font-size: 70px;
letter-spacing: 5px;
opacity: 0.8;
}
</style>
<div class="blur">Fantasmagórico</div>Otra vez, se usa la propiedad -webkit-transition para los navegadores basados en WebKit, text-shadow y los colores en formato rgba().
Efectos sobre enlaces:
Un enlace cualquiera Otro enlace cualquiera Un último enlace
<style>
.grower {
background-color:rgba(0, 195, 255, 0.3);
border: 1px solid #456;
display: block;
margin: 5px auto;
padding: 2px 5px;
text-align: center;
width: 200px;
-webkit-border-radius: 2px;
-moz-transition: all 0.1s ease-in-out;
-moz-border-radius: 2px;
-webkit-transition: all 0.1s ease-in-out;
}
.grower:hover {
background: #1E90FF;
border-color: #FFF;
-moz-border-radius: 10px;
-moz-box-shadow: 0 0 20px black;
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-webkit-box-shadow: 0 0 20px black;
-webkit-border-radius: 10px;
}
</style>
<a href="XXX" class="grower">Un enlace cualquiera</a> <a href="XXX" class="grower">Otro enlace cualquiera</a> <a href="XXX" class="grower">Un último enlace</a>
Autopaginación y las limitaciones de Blogger |
Hace varios días, Blogger Buzz anunciaba algo que titulaban Autopaginación y a decir verdad, no le prestamos demasiada atención al asunto porque, simplemente, no se entendía bien y para colmo, Blogger sólo habla in english. La nota, fue comentada y traducida en El escaparate de Rosa 
así que ahí pueden leerla en español.
Como hay muchas preguntas al respecto, vamos a ver si es posible explicar la idea.
Todo parece ser parte de una estrategia global de Google para incrementar la velocidad de la web y, en ese sentido, han decidido intervenir en nuestros blogs, evaluando sus tiempos de carga y limitando su extensión. En la práctica, significa que si bien podemos establecer la cantidad de entradas por página en Configuración | Formato, este dato puede no ser tenido en cuenta y Blogger puede decidir mostrar menos entradas que las indicadas si considera que el peso total de la página generada supera cierto valor:
así que ahí pueden leerla en español.Como hay muchas preguntas al respecto, vamos a ver si es posible explicar la idea.
Todo parece ser parte de una estrategia global de Google para incrementar la velocidad de la web y, en ese sentido, han decidido intervenir en nuestros blogs, evaluando sus tiempos de carga y limitando su extensión. En la práctica, significa que si bien podemos establecer la cantidad de entradas por página en Configuración | Formato, este dato puede no ser tenido en cuenta y Blogger puede decidir mostrar menos entradas que las indicadas si considera que el peso total de la página generada supera cierto valor:
Mostrar en la página principal.
Si se selecciona Días, se garantizará un máximo de hasta 500 entradas.
Si se selecciona Días, se garantizará un máximo de hasta 500 entradas.
¿Qué valor? No sé. Una página de un blog podrá tener 5 y la siguiente 6 o 10 o 2; dependerá de la longitud y del peso individual de las entradas. Esto, claro, crea confusión y no es algo que podamos controlar, no es una opción, deberemos convivir con ello y, en principio, más allá de los problemas que puede generar en algunos sitios, no es algo tan descabellado aunque podrían haberlo informado de otro modo o bien, simplemente, establecer un número maximo de entradas por página.
Recuerdo, por ejemplo, que el mismo Blogger mostraba las páginas de etiquetas o archivos, paginándolas con 20 entradas por defecto, demasiado para mi gusto ya que algunos sitios tardan demasiado en cargarse y eso desalienta las visitas y su posicionamiento en los buscadores.
Repito: esto no es opcional, de ahora en más, funcionará así y nada podemos hacer para evitarlo por lo tanto, cada uno deberá adaptarse a la situación.
¿Qué hacer? Lo elemental es disminuir la cantidad de páginas a un número razonable. Hace un par de años, en una entrada se hablaba de lo mismo y me da la impresión que el concepto no ha cambiado y que, simplemente, parece que Blogger se ha dado cuenta de eso:
Recuerdo, por ejemplo, que el mismo Blogger mostraba las páginas de etiquetas o archivos, paginándolas con 20 entradas por defecto, demasiado para mi gusto ya que algunos sitios tardan demasiado en cargarse y eso desalienta las visitas y su posicionamiento en los buscadores.
Repito: esto no es opcional, de ahora en más, funcionará así y nada podemos hacer para evitarlo por lo tanto, cada uno deberá adaptarse a la situación.
¿Qué hacer? Lo elemental es disminuir la cantidad de páginas a un número razonable. Hace un par de años, en una entrada se hablaba de lo mismo y me da la impresión que el concepto no ha cambiado y que, simplemente, parece que Blogger se ha dado cuenta de eso:
No hay un número mágico, 5 o 6 posts de tamaño mediano son más que suficientes. Si son artículos cortos, podemos hablar de 10 o 12. Claro, todo depende del contenido, los textos no influyen pero con las imágenes o los vídeos hay que tener mucho cuidado. La forma de chequear es cargarlo, razonar y pensar: ¿si fuera de otro, esperaría?
.......
¿Cómo calcular el tamaño? por ejemplo, con la tecla AvPag. Si debemos pulsarla más de 20 veces para llegar al final, yo diría que la página es demasiado larga.
Otra alternativa es condicionar los elementos de la sidebar o el footer de tal manera que ciertas cosas sólo sean cargadas en páginas individuales.
Por último, si aún así queremos que haya muchas entradas por página, deberemos reducir su contenido o bien, utilizar la etiqueta MORE para, de ese modo, mostrar sólo un resumen. Si se decide esto, es importante recordar que cualquier otro tipo de truco que sólo oculte el contenido no servirá para reducir el volumen de la página ya que los elementos ocultos (tanto con CSS como con JavaScript) se cargan igual aunque no los veamos.
Por último, si aún así queremos que haya muchas entradas por página, deberemos reducir su contenido o bien, utilizar la etiqueta MORE para, de ese modo, mostrar sólo un resumen. Si se decide esto, es importante recordar que cualquier otro tipo de truco que sólo oculte el contenido no servirá para reducir el volumen de la página ya que los elementos ocultos (tanto con CSS como con JavaScript) se cargan igual aunque no los veamos.
El tiempo de carga de un sitio es un tema importante y no debe ser subestimado. Se dice que más de 10 segundos es mucho y, aunque no podamos resolverlo, sería bueno que por lo menos, sepamos que el problema existe.
Claro, Blogger podría hacer muchas otras cosas para optimizar los sitios: podría reducir sus scripts, eliminar el CSS que agrega a la fuerza, integrar las librerías de uso común, optimizar las imágenes que subimos, permitir el alojamiento de archivos en el mismo servidor ... pero, no podemos pedirle peras al olmo.
Claro, Blogger podría hacer muchas otras cosas para optimizar los sitios: podría reducir sus scripts, eliminar el CSS que agrega a la fuerza, integrar las librerías de uso común, optimizar las imágenes que subimos, permitir el alojamiento de archivos en el mismo servidor ... pero, no podemos pedirle peras al olmo.
TranslateThis: Un botón en lugar de la barra |
TranslateThis es un botón que agrega un traductor cualquier sitio web y que usa las mismas caracteríticas que la barra de Google.
Podemos agregarlo a cualquier parte, simplemente copiando y pegando el código allí donde será mostrado:
<!-- Begin TranslateThis Button --> <div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script> <script type="text/javascript">TranslateThis();</script> <!-- End TranslateThis Button -->
También podemos establecer algunas opciones que se muestran en la documentación y que nos permiten personalizarlo un poco; para eso, cambairemos esta línea:
<script type="text/javascript">TranslateThis();</script>
Por ejemplo:
GA permite habilitar el seguimiento de las paginas traducidas via Google Analytics (por defecto es false)
scope permite definir los IDs de los elementos de la pagina que no deberían ser tarducidos (por defecto es false)
wrapper es el ID del DIV donde se mostrará el botón y se usa cuando tenemos varios de ellos en la misma página (por defecto es translate-this)
onLoad, onClick y onComplete definen funciones que se ejecutarán ciuando el script se esté cargando, cuando se haga click y cuando se haya completado la traducción
fromLang es el lenguaje original de nuestro sitio pero es opcional ya que si no se establece, el idioma es detectado de manera automática. Recoomiendan establecerlo para ascelerar la carga.
ddLangs es la lista de idiomas que se mostrarán; por defecto, francés, español, árabe, chino, coreano, italiano, checo, hebreo, alemán portugués, ruso, japonés, vietnamita, griego, hindú y turco. Debajo siempre habrá un enlace para ampliar la lista y se mostrarán los52 indiomas disponibles.
noBtn deshabilta el gráfico del botón, permitiendo usar uno propio o una imagen personal
btnWidth y btnHeight determiann el ancho y el alto del botón (por defecto 180x18)
btnImg es la URL de la imagen del botón si es que queremos usar una personal
noImg la establecemos en false si queremos deshabilitar las banderas que se muestran al desplegarse el botón
imgHeight e imgWidth son el tamaño de la imagen de cada una de esas banderas (por defecto 18x12)
bgImg es donde se encuentra la imagen (de tipo sprite) con esas banderas y lo usamos si queremos cambiarlo
imgMap es lo que deberemos usar para personalizar esas banderas e indicar la posiciónd e cada una
maxLength es el tamaño máximo de la cadena a enviar a Google (por debecto 1000)
reparse si se coloca en true es para recargar el contenido de nuestro sitio (cuando se trata de páginas que cambian mientras estamos en ellas)
El script modificado con algunas de esas opciones, sería así:
GA permite habilitar el seguimiento de las paginas traducidas via Google Analytics (por defecto es false)
scope permite definir los IDs de los elementos de la pagina que no deberían ser tarducidos (por defecto es false)
wrapper es el ID del DIV donde se mostrará el botón y se usa cuando tenemos varios de ellos en la misma página (por defecto es translate-this)
onLoad, onClick y onComplete definen funciones que se ejecutarán ciuando el script se esté cargando, cuando se haga click y cuando se haya completado la traducción
fromLang es el lenguaje original de nuestro sitio pero es opcional ya que si no se establece, el idioma es detectado de manera automática. Recoomiendan establecerlo para ascelerar la carga.
ddLangs es la lista de idiomas que se mostrarán; por defecto, francés, español, árabe, chino, coreano, italiano, checo, hebreo, alemán portugués, ruso, japonés, vietnamita, griego, hindú y turco. Debajo siempre habrá un enlace para ampliar la lista y se mostrarán los52 indiomas disponibles.
noBtn deshabilta el gráfico del botón, permitiendo usar uno propio o una imagen personal
btnWidth y btnHeight determiann el ancho y el alto del botón (por defecto 180x18)
btnImg es la URL de la imagen del botón si es que queremos usar una personal
noImg la establecemos en false si queremos deshabilitar las banderas que se muestran al desplegarse el botón
imgHeight e imgWidth son el tamaño de la imagen de cada una de esas banderas (por defecto 18x12)
bgImg es donde se encuentra la imagen (de tipo sprite) con esas banderas y lo usamos si queremos cambiarlo
imgMap es lo que deberemos usar para personalizar esas banderas e indicar la posiciónd e cada una
maxLength es el tamaño máximo de la cadena a enviar a Google (por debecto 1000)
reparse si se coloca en true es para recargar el contenido de nuestro sitio (cuando se trata de páginas que cambian mientras estamos en ellas)
El script modificado con algunas de esas opciones, sería así:
<script type="text/javascript">
TranslateThis({
GA : true,
scope : 'sidebar-wrapper',
fromLang : 'es',
ddLangs : [
'ca', // catalan
'en', // ingles
'fr', // france
'de', // aleman
'it', // italiano
'pt-PT', // portugues
],
});
</script>Funciona bien pero me bastante lento para cargarse.
REFERENCIAS:anieto2k
Dos scripts para generar pop-ups |
Prototype Window Class (PWC) es una librería que permite generar ventanas de alerta de muchas formas diferentes. Requiere de Prototype y es bastante pesada (64KB) pero es una opción si se hace un uso intesivo de estas cosas ya que no sólo admite generar ventanas standard sino también abrir direcciones URL, crear cajas de dialogo o login e incluso usar Ajax.
Mostrar ejemplos es bastante complicado de hacer ya que aquí están funcioanando otros scripts pero, su uso es relativamente sencillo y la página del autor tiene abundante documentación al respecto. Si descargamos el ZIP que ofrecen, allí nos encontraremos con muchas más cosas, incluyendo ejemplos diversos, distintos temas que pueden usarse para personalizar el CSS y una explicación detallada de cada función.
Básicamente, necesitamos Prototype, el script window.js y uno de los archivos CSS (default.css es el más simple y con el que conviene empezar). Todo eso, lo agregamos antes de </head>:
Mostrar ejemplos es bastante complicado de hacer ya que aquí están funcioanando otros scripts pero, su uso es relativamente sencillo y la página del autor tiene abundante documentación al respecto. Si descargamos el ZIP que ofrecen, allí nos encontraremos con muchas más cosas, incluyendo ejemplos diversos, distintos temas que pueden usarse para personalizar el CSS y una explicación detallada de cada función.
Básicamente, necesitamos Prototype, el script window.js y uno de los archivos CSS (default.css es el más simple y con el que conviene empezar). Todo eso, lo agregamos antes de </head>:
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("prototype", "1.6.1.0");
</script>
<script type='text/javascript' src='URL_window.js'>&jt;/script>
<link href='URL_default.css' rel='stylesheet" type='text/css' />
El CSS, como siempre, podemos enlazarlo o agregarlo directamente:
<style type='text/css' >
... y aquí colocamos el contenido del archivo ...
</style>
Para crear esas ventanas también utilizamos JavaScript; algo así, crearía una ventana sencilla:
<script>
win = new Window({className: "dialog", title: "UN EJEMPLO", width:200, height:150, destroyOnClose: true, resizable: true, recenterAuto:false});
win.getContent().update("<h1>MI EJEMPLO</h1>");
win.showCenter();
&jt;/script>
Una serie de scripts extras nos permiten ampliar las posibilidades:
- window_effects.js agrega efectos especiales a las ventanas
- window_ext.js permite manejar cookies
- tooltip.js permite agregarle funciones para crear tooltips (obviamente)
- debug.js y extended_debug.js son extensiones interesantes para desarrolladores
Algo similar pero bastante más simple es el script llamado DHTML Popup Window ya que es mucho más liviano (8KB) y no requiere ninguna librería extra. Descargamos el demo desde la página del autor y allí nos encontraremos con el script llamado popup-window.js y el CSS básico llamado sample.css.
También los agregamos antes de </head>:
También los agregamos antes de </head>:
<script type='text/javascript' src='URL_popup-window.js'></script>
<style type='text/css' >
... y aquí colocamos el contenido del archivo CSS ...
</style>
Lo usamos en un enlace, agregando la llamada al evento onclick:
<a href="javascript:void(0);" onclick="popup_show('idDIV', 'idDRAG', 'idEXIT', 'posicion', X, Y, 'idREL');"> CLICK </a>donde:
idDIV es el nombre del elemento oculto donde agregaremos el contenido a mostrar
idDRAG es el nombre del elemento que usaremos para arrastrar la ventana
idEXIT es el nombre del elemento que usaremos para cerrar la ventana
posicion es uno de estos valores: element, element-right, element-bottom, mouse, screen-top-left, screen-center, screen-bottom-right
X, Y son la distancia relativa si se posicionan respecto de otro elemento
Un ejemplo:
idDIV es el nombre del elemento oculto donde agregaremos el contenido a mostrar
idDRAG es el nombre del elemento que usaremos para arrastrar la ventana
idEXIT es el nombre del elemento que usaremos para cerrar la ventana
posicion es uno de estos valores: element, element-right, element-bottom, mouse, screen-top-left, screen-center, screen-bottom-right
X, Y son la distancia relativa si se posicionan respecto de otro elemento
Un ejemplo:
<!-- el enlace -->
<a href="javascript:void(0);" onclick="popup_show('popupDEMO', 'popupdragDEMO', 'popupexitDEMO', 'screen-center', 0, 0);"> abrir pop-up </a>
<!-- el contenido oculto -->
<div id="popupDEMO" class="sample_popup" style="display: none;">
<div id="popupdragDEMO" class="menu_form_header">
<img id="popupexitDEMO" class="menu_form_exit" src="URL_unaimagen" />
</div>
<div class="menu_form_body">
... el contenido a mostrar ...
</div>
</div>
Menú desplegable con CSS3 |
Este es un menú desplegable que usa las características del CSS3 y que sólo requiere de una imagen. Lo interesante es que funcionará tambien en navegadores como Internet Explorer, aún cuando estos no soporten las nuevas propiedades; la única diferencia es que no se verán ni sombra ni bordes redondeados ni sombras.
Como siempre, el estilo hay que ponerlo antes de </head> y allí, podremos cambiar los detalles.
Como siempre, el estilo hay que ponerlo antes de </head> y allí, podremos cambiar los detalles.
<style>
/* el menú es una lista */
#nav {
background: #678 url(URL_gradient.png ) repeat-x 0 -110px;
line-height: 100%;
margin: 0;
padding: 7px 6px 0;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li { /* cada item de esa lista */
float: left;
list-style: none;
margin: 0 5px;
padding: 0 0 8px;
position: relative;
}
/* las definiciones del Nivel Principal */
#nav a {
color: #DDD;
display: block;
font-weight: bold;
margin: 0;
padding: 8px 20px;
text-decoration: none;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #FFF;
}
/* efecto hover en el Nivel Principal */
#nav .current a, #nav li:hover > a {
background: #468 url(URL_gradient.png ) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #F8F8F8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* los subniveles */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #333;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #456 url(URL_gradient.png ) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* el efecto de desplegar */
#nav li:hover > ul {
display: block;
}
/* las definiciones de los submenues */
#nav ul {
background: #DDD url(URL_gradient.png ) repeat-x 0 0;
border: solid 1px #B4B4B4;
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 35px;
width: 185px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #FFF;
}
/* las definiciones de los submenues internos */
#nav ul ul {
left: 181px;
top: -3px;
}
/* bordes redondeados del primer y último item */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* definiciones generales */
#nav:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
#nav { display: inline-block; }
html[xmlns] #nav { display: block; }
* html #nav { height: 1%; }
</style>
El HTML es una serie de listas anidadas y alli, sólo debemos tener cuidado para que las etiquetas queden correctamente cerradas. El código del ejemplo es el siguiente:
<ul id="nav">
<li class="current"><a href="javascript:void(0);">Inicio</a></li>
<li>
<a href="javascript:void(0);">Menu 1</a>
<ul>
<li>
<a href="javascript:void(0);">Sub Menu 1.1</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 1.1.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.3</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Sub Menu 1.2</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 1.2.1</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Sub Menu 1.3</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Menu 2</a>
<ul>
<li>
<a href="javascript:void(0);">Sub Menu 2.1</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 2.1.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.1.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.1.3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Sub Menu 2.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.3</a></li>
<li>
<a href="javascript:void(0);">Sub Menu 2.4</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 2.4.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.4.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.4.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);">Menu 3</a></li>
<li><a href="javascript:void(0);">Menu 4</a></li>
</ul>
REFERENCIAS:webdesignerwall.com
