(Solucionado) Error menú horizontal. Los submenus no se ven

[lleonet2000]

Buenas tardes,

 

Tengo un problema con el menú horizontal, y es que cuando me pongo encima sobre el más a la derecha que tengo este no se vé ( se queda fuera de la pantalla ).

¿Alguna solución?

 

Muchas gracias

Edited April 9, 2013 by lleonet2000 (see edit history)

[Servicios MC]

Hola, que resolución tienes de pantalla?

 

Un saludo.

 

Ana

[lleonet2000]

Hola, la resolución es de 1024, pero de todas formas yo quiero que se vea en cualquier resolución.

Gracias

[lleonet2000]

Después de varios días volviendome loco he encontrado una manera para que esto no ocurra, que ha sido poner las subcategorías en horizontal. Aquí os dejo lo que hice:

 

Subcategorias superfish en horizontal

1.- Incluimos el archivo “superfish-navbar.css” en la carpeta “css”.

2.- En “blocktopmenu.php” incluimos una nueva línea debajo de:

$this->context->controller->addCSS($this->_path.'css/superfish-modified.css');

Insertamos:

$this->context->controller->addCSS($this->_path.'css/superfish-navbar.css');

3.- En “blocktopmenu.tpl” añadimos “sf-navbar” con un espacio al lado de “sf-menu”, quedaría así:

<ul class="sf-menu sf-navbar clearfix">

4.- En “superfish-modified.js” añadimos “sf-navbar” al lado de “sf-menu”, quedaría así:

jQuery('ul.sf-menu sf-navbar').superfish();

 

Archivo “superfish-navbar.css”:(os dejo el vínculo de donde lo saqué y bajo el archivo entero)

 

(https://raw.github.com/joeldbirch/superfish/master/css/superfish-navbar.css )

 

 

/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
.sf-navbar {
    background: #BDD2FF;
    position: relative;
    margin-bottom: 5em;
}
/* provide background colour for submenu strip */
/* you should just set the menu's container bg colour rather than use pseudo-elements */
.sf-navbar:before {
    content: '';
    position: absolute;
    left: 0;
    z-index: -1;
    background-color: #BDD2FF;
    height: 200%;
    width: 100%;
}
.sf-navbar ul {
    box-shadow: none;
}
.sf-navbar li {
    background: #AABDE6;
    position: static;
}
.sf-navbar > li > a,
.sf-navbar > li > ul > li > a {
    border: none;
}
.sf-navbar > li > ul {
    min-width: 36em; /* set this to whatever suits your design */
}
.sf-navbar ul li {
    background: #BDD2FF;
    position: relative;
}
.sf-navbar ul ul {
    left: 0;
    top: 100%;
}
.sf-navbar ul ul li {
    width: 100%;
}
.sf-navbar > li > ul > li {
    float: left;
}
.sf-navbar li.current {
    background: #BDD2FF;
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar ul li.current {
    background: #BDD2FF;
}
.sf-navbar ul li:hover,
.sf-navbar ul li.sfHover,
.sf-navbar ul ul li {
    background: #D1DFFF;
}
.sf-navbar ul ul li:hover,
.sf-navbar ul ul li.sfHover,
.sf-navbar ul ul li.current {
    background: #E6EEFF;
}
.sf-navbar ul li.current > a {
    font-weight: bold;
}
/*** point all arrows down ***/
.sf-navbar ul a .sf-sub-indicator { background-position: 0 -100px; }
.sf-navbar ul li:hover > a .sf-sub-indicator,
.sf-navbar ul li.sfHover > a .sf-sub-indicator {
    background-position: -10px -100px;
}

[Sergio Ruiz]

Después de varios días volviendome loco he encontrado una manera para que esto no ocurra, que ha sido poner las subcategorías en horizontal. Aquí os dejo lo que hice:

 

Subcategorias superfish en horizontal

1.- Incluimos el archivo “superfish-navbar.css” en la carpeta “css”.

2.- En “blocktopmenu.php” incluimos una nueva línea debajo de:

$this->context->controller->addCSS($this->_path.'css/superfish-modified.css');

Insertamos:

$this->context->controller->addCSS($this->_path.'css/superfish-navbar.css');

3.- En “blocktopmenu.tpl” añadimos “sf-navbar” con un espacio al lado de “sf-menu”, quedaría así:

<ul class="sf-menu sf-navbar clearfix">

4.- En “superfish-modified.js” añadimos “sf-navbar” al lado de “sf-menu”, quedaría así:

jQuery('ul.sf-menu sf-navbar').superfish();

 

Archivo “superfish-navbar.css”:(os dejo el vínculo de donde lo saqué y bajo el archivo entero)

 

(https://raw.github.c...fish-navbar.css )

 

 

/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
.sf-navbar {
	background: #BDD2FF;
	position: relative;
	margin-bottom: 5em;
}
/* provide background colour for submenu strip */
/* you should just set the menu's container bg colour rather than use pseudo-elements */
.sf-navbar:before {
	content: '';
	position: absolute;
	left: 0;
	z-index: -1;
	background-color: #BDD2FF;
	height: 200%;
	width: 100%;
}
.sf-navbar ul {
	box-shadow: none;
}
.sf-navbar li {
	background: #AABDE6;
	position: static;
}
.sf-navbar > li > a,
.sf-navbar > li > ul > li > a {
	border: none;
}
.sf-navbar > li > ul {
	min-width: 36em; /* set this to whatever suits your design */
}
.sf-navbar ul li {
	background: #BDD2FF;
	position: relative;
}
.sf-navbar ul ul {
	left: 0;
	top: 100%;
}
.sf-navbar ul ul li {
	width: 100%;
}
.sf-navbar > li > ul > li {
	float: left;
}
.sf-navbar li.current {
	background: #BDD2FF;
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar ul li.current {
	background: #BDD2FF;
}
.sf-navbar ul li:hover,
.sf-navbar ul li.sfHover,
.sf-navbar ul ul li {
	background: #D1DFFF;
}
.sf-navbar ul ul li:hover,
.sf-navbar ul ul li.sfHover,
.sf-navbar ul ul li.current {
	background: #E6EEFF;
}
.sf-navbar ul li.current > a {
	font-weight: bold;
}
/*** point all arrows down ***/
.sf-navbar ul a .sf-sub-indicator { background-position: 0 -100px; }
.sf-navbar ul li:hover > a .sf-sub-indicator,
.sf-navbar ul li.sfHover > a .sf-sub-indicator {
	background-position: -10px -100px;
}

 

¿Url para ver como queda?

[lleonet2000]

Aquí os dejo la url, aún está en pruebas así que toda crítica será bien recibida.

 

http://www.valsab.es/tienda2/338-varios

[Ashkro]

hola yo agregue a mi pagina el menu que indicas aca, el problema que tengo es que al parecer el menu intenta aparecer pero no se ve en realidad es como si estuviera escondido, fuera de la pagina, o bien detras del fondo y no se muestra.

 

la pagina es esta: http://otaku-store-online.com/index.php#

 

no se si puedes ayudarme a lograr que se mire bien

[lleonet2000]

Veo que ya se muestra