Jump to content

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


 Share

Recommended Posts

  • 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...
Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

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