Todo lo que necesitamos es un div con una lista dentro y en cada elemento li una etiqueta a con una clase, pero mejor veamoslo en el código que es mas sencillo entenderlo asi.
Aquí hay varias cosas de que hablar, la primera es que he puesto el atributo target=»_blank» para que cuando el usuario acceda al link este se abra en una nueva pestaña y asi no abandone tu sitio, muchas personas no lo recomiendan pero todo el mundo lo hace.
Pasemos con el código CSS:
En el código anterior he puesto comentarios explicando mas claramente para que usamos cada propiedad, pero en resumen lo que hicimos fue establecer una posición fija para la barra con position:fixed; También le dimos a cada elemento a un estilo de botón, le agregamos animaciones e hicimos que cuando el usuario pasara el mouse incrementara el espacio interior del botón y el color de fondo.
Con esto ya lo tendríamos, cabe aclarar una cosa y es que esta barra no funciona si la deseas posicionar a la derecha, puedes quitar left:0; y poner right:0; esto la moverá a la derecha, pero al pasar el mouse tendrás un error, si quieres tenerla a la derecha tendrás que quitarle el padding al hover.
Referencia Falconmasters
