Proyecto del Curso (IV): Web estática versión final: mejorando el menú e iconos

Usamos superfish para obtener un bonito menú desplegable. En la siguiente página web encontramos el script con instrucciones sencillas de uso. Además viene con un ejemplo para ver saber como usarlo.

 http://users.tpg.com.au/j_birch/plugins/superfish/

Vamos a usar el superfish para crear un menu desplegable horizontal. El primer problema será aplicarlo de forma que quede atractivo para la web, el segundo será como hacer que solo afecte a uno de los estilos dado que contamos con style switcher.

Sin tocar mucho nos queda algo así:

 

El background del menú debería ser igual que el de las otras pantallas, así que lo arreglamos tocando el css del estilo sf-menu para que nos quede con el background que queremos.

Podemos ver unos iconos en el menu un poco feos que más alante serán mejorados.

 Al igual que antes, queremos ahora que el submenu, tenga un background similar a las otras mantallas y que además salga con sombreado.

 

Falta algún retoque... modificamos el padding y el margin del menu para que quede mejor. Mejoramos también los iconos y nos queda algo así.

Faltará aun dejar bien el menú vertical.

Veamos ahora que pasa si cambiamos de estilo:

  

Queda feo. Mejor si no se aplican las propiedades del style sf-menu. Veremos si podemos aprovechar el superfish que hemos puesto en el otro estilo horizontal.

En el script que antes se usaba para inicializar el superfish, ahora metemos alguna cosa más:

 

Más o menos lo que hacemos es que cuando estemos en el estilo blue, no se aplique el css del superfish, y que cuando se esté en el otro estilo si que se aplique... además inicializamos. El resto de código es para tener en cuenta posibles clicks. Nos queda esto: