Dejo en claro primeramente que hay varias formas de hacer la integracion, yo use un poco de HTML desde genexus para hacer la carga de los items del menu y para referenciar al css que contenia el estilo del menu.
Otra forma podria haber sido crear un user control (mas practico en caso que trabajen en equipo o quieran cargar los items dinamicamente, usando sdts por ejemplo)
En la pagina http://cssmenumaker.com/ pueden encontrar varios menus prediseñados, en donde podran descargar tanto el css como un ejemplo de como cargar el menu desde su pagina HTML.
En este ejemplo vamos a usar el menu opera-drop-down-menu
Si siguen el link, van a encontrar en la pagina, la opcion Download Source.
Lo que descargarian en este ejemplo seria un .rar que contiene un css llamado style.css y un html de nombre index.html.
En archivo index.html tienen un ejemplo de como cargar el menu y como referenciar al style.css.
Pueden fijarse que desde el <head> tendriamos que hacer referencia al css, la linea que hace referencia en el ejemplo seria la siguiente:
<link rel="stylesheet" href="styles.css">
Y pueden fijarse que en el <body> del html se cargan justamente los items del menu junto con los enlaces de cada item.Ejemplo:
<li><a href='#'><span>Home</span></a></li>
Los items del menu estan dentro de un div que hace referencia al id='cssmenu' definido en el css. No quiero entrar mucho en detalle en cuanto a la definicion del html ni del css ya que la idea principal mostrales una forma de integrar dicho menu dentro de un webpanel genexus o en la propia masterpage.Referenciar el archivo css desde un webpanel
Lo primero que tienen que hacer, y es fundamental, es referenciar al css desde su webpanel, dijimos que eso lo hariamos dentro del <head> del html.
Como el editor html de genexus solamente permite trabajar sobre en body, entonces vamos a utilizar la propiedad del form HeaderRawHTML en el evento start.
Entonces quedaria de la sgte manera:
Form.HeaderRawHTML = '<link rel="stylesheet" href="/KBJavaEnvironment/static/Resources/Spanish/styles.css">'Fijense que el styles.css debe estar en el direcorio /static/Resources/Spanish/ de su kb, pueden cambiar la ruta, lo importante es referenciarlo bien y que el styles.css este alojado fisicamente en el directorio referenciado.
Luego cuando generen su aplicacion el mismo styles.css lo estaria llevando en su tomcat por ejemplo si estan protitipando con java.
Cargar los items del menu
Ahora tenemos que trabajar sobre el body de nuestro Web Panel.
La forma mas sencilla, copiar el contenido del body que se encuentra dentro del archivo de ejemplo descargado "index.html" y pegarlo en el editor HTML de Genexus del webPanel.
Ejemplo:
<li><a href="/JavaEnvironment/servlet/com.ejemplo.principal"><span>Inicio</span></a>
Ejecutar la Aplicacion, ingresar al web Panel y podran visualizar el menu dentro de su webPanel.
Abajo se muestra el mismo menu agregado como component dentro de la masterPage de la app, con algunas modificaciones realizadas en el css para adaptar mejor al tema de la aplicacion.
