Jump to content

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


Recommended Posts

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

post-298587-0-74172400-1364572407_thumb.png

Edited by lleonet2000 (see edit history)

Share this post


Link to post
Share on other sites
  • 2 weeks later...

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;
}

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
  • 1 month later...

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More