Jump to content

Arreglos menu horizontal superior (topmenu)

smash.imq

By smash.imq
in Discusión general

 Share

Recommended Posts

smash.imq Apprentice

smash.imq

Posted
Posted

Buenas,

 

Estoy intentando hacer unos cambios pero no hay manera, estoy haciendo mejoras en la web y tal y aqui me he quedado atascado....

 

Intento cambiar la forma de presentación del menu horizontal superior... ahora mismo esta así:

post-815786-0-93621700-1424887646_thumb.jpg

 

y me gustaría que se viera así:

post-815786-0-51638200-1424887681_thumb.jpg

 

Información WEB:

La pagina es: http://www.protemania.com

La plantilla es: Minimal Theme 1.6

La versión Prestashop: 1.6.0.5

si necesitáis alguna info mas, PEDIRLA!

 

Hay manera de hacerlo? si es así, como lo hago?

 

Espero respuestas y GRACIAS por adelantado, ya que siempre he necesitado algo, he obtenido respuestas y soluciones!

Link to comment
Share on other sites
LyL Desarrollo Enthusiast

LyL Desarrollo

Posted
Posted

Buenas, vamos a darte un poco de ayuda

 

en el archivo superfish-modified.css que esta en la carpeta del modulo menu, es la linea 99 y solo deberas eliminar el "!important"

.sf-menu li li ul {
position: static;
display: block !important; Aqui elminar el "!important"
opacity: 1 !important;
background: none;
-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
}

y vas a agregar esta nueva

#block_top_menu > ul > li > ul > li > ul {
display: block !important;
}
  • Like 1
Link to comment
Share on other sites
smash.imq Apprentice

smash.imq

Posted
  • Author
Posted
  On 2/26/2015 at 11:27 AM, LyL Desarrollo said:

 

Buenas, vamos a darte un poco de ayuda

 

en el archivo superfish-modified.css que esta en la carpeta del modulo menu, es la linea 99 y solo deberas eliminar el "!important"

.sf-menu li li ul {
position: static;
display: block !important; Aqui elminar el "!important"
opacity: 1 !important;
background: none;
-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
}

y vas a agregar esta nueva

#block_top_menu > ul > li > ul > li > ul {
display: block !important;
}

 

perfecto, lo unico es que cuando me pongo encima de alguna de las subcategorías que tiene otras subcategorias, hace como un desplegable... eso se podría quitar?

 

si entras en la web y te fijas en el menu, porque las categorías Otros productos, packs, crosfit y outlet zone se desplazan arriba a la derecha? en la teoría, deberían ir así:

post-815786-0-69372100-1424969153_thumb.jpg

 

espero respuesta!

Link to comment
Share on other sites
LyL Desarrollo Enthusiast

LyL Desarrollo

Posted
Posted

agrega esta 

.sf-menu li li li ul {
display: none !important;
}

para que solo se vean las principales seria editar la que te di ayer

#block_top_menu > ul > li > ul > li > ul {
display: block !important;
}
/* cambiar por */

#block_top_menu > ul > li > ul > li > ul {
display: none !important;
}

lo de como deberian verse las otras letras que se suben, eso te lo contesto luego, estoy en medio de un proyecto. Saludos

  • Like 1
Link to comment
Share on other sites
paulets Newbie

paulets

Posted
Posted

hola

 

me podriais echar una mano....

 

a  mi lo que me pasa es que en el menu principal al ponerme encima de una categoria se me desplegan las subcatedorias, y como tengo varias me hace dos lineas, la primera linea esta correcta, bien separada y seentiende bien, pero de la primera a la segunda hay un espacio minimo y se me apelotonan las letras.

 

quisiera augmetar ese espacio entre las primeras lineas de las subcategorias y las segundas, en el menu desplegable

 

un saludo

Link to comment
Share on other sites
gr_fenix Newbie

gr_fenix

Posted
Posted
  On 3/3/2015 at 5:50 PM, paulets said:

hola

 

me podriais echar una mano....

 

a  mi lo que me pasa es que en el menu principal al ponerme encima de una categoria se me desplegan las subcatedorias, y como tengo varias me hace dos lineas, la primera linea esta correcta, bien separada y seentiende bien, pero de la primera a la segunda hay un espacio minimo y se me apelotonan las letras.

 

quisiera augmetar ese espacio entre las primeras lineas de las subcategorias y las segundas, en el menu desplegable

 

un saludo

 

Hola, edita el css superfish-modified.css dentro de tu tema->css->modules.

 

Usa Firebug para conocer que elemento exacto modificar

Link to comment
Share on other sites
smash.imq Apprentice

smash.imq

Posted
  • Author
Posted
  On 2/26/2015 at 5:03 PM, LyL Desarrollo said:

agrega esta 

.sf-menu li li li ul {
display: none !important;
}

para que solo se vean las principales seria editar la que te di ayer

#block_top_menu > ul > li > ul > li > ul {
display: block !important;
}
/* cambiar por */

#block_top_menu > ul > li > ul > li > ul {
display: none !important;
}

lo de como deberian verse las otras letras que se suben, eso te lo contesto luego, estoy en medio de un proyecto. Saludos

 

Buenas, has podido mirar porque se desplazan hacia arriba? yo he seguido intentándolo pero no hay forma...

 

Gracias!

Link to comment
Share on other sites
paulets Newbie

paulets

Posted
Posted

hoa de nuevo.

 

he conseguido instalar fire bug y entrar en css fish....

 

lo que no soy capaz de encontrar, qué es lo que debo modificar para que las subcategorias del menu desplegable,que se me ponen en dos lineas, tengan más sepàracion una de la otra y no se confundad los escritos..... ya que tengo 8 subcategorias,

 

un saludo

Link to comment
Share on other sites
  • 2 months later...
FranSegurval Newbie

FranSegurval

Posted
Posted

Hola buenas tardes, 

 

Rescato este hilo porque es el único que habla de lo que necesito y me ha solucionado a medias mi problema.

 

 

Al poner el código que indicó LyL Desarrollo las subcategorías que aparecen al aparecer me mueven el resto de subcategorías de nivel superior (tengo muchas) haciendo un efecto extraño y poco estético, y si toco entre position y display consigo dejarlo fijo en un punto por encima de las categorías sin que las desplace pero mi intención es que aparezca siempre justo a la derecha de la categoría que se despliega pero sin que mueva el resto de categorías.  

 

Qué debería de cambiar?  Espero que me hayais podido entender.  Muchas gracias de antemano.

 

 

en el archivo superfish-modified.css que esta en la carpeta del modulo menu, es la linea 99 y solo deberas eliminar el "!important"

.sf-menu li li ul {
position: static;
display: block !important; Aqui elminar el "!important"
opacity: 1 !important;
background: none;
-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
}

y vas a agregar esta nueva

#block_top_menu > ul > li > ul > li > ul {
display: block !important;
}

Link to comment
Share on other sites
  • 1 year later...
m@sterprogram Newbie

m@sterprogram

Posted
Posted

Hola no se si deberia hacer mi pregunta en esta seccion, pero deseo ayuda o si alguien me puede orientar en como crear un meno fijo cuando el scrol se mueve , e visto varias formas pero desea hacerlo en mi prestashop.

 

 

Probe con esto pero no me funciono.

 

{literal}
<script type="text/javascript">
$(function(){

    var menu = $('#menu'),
        pos = menu.offset();

        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });

});
</script>
{/literal}

 

next open modules>blocktopmenu>blocktopmenu.tpl we just need to add a divsion

 

 

 

<div id="menu" class="default">
    <div class="sf-contener clearfix">
        <ul class="sf-menu clearfix">
            {$MENU}
            {if $MENU_SEARCH}
                <li class="sf-search noBack" style="float:right">
                    <form id="searchbox" action="{$link->getPageLink('search')}" method="get">
                        <p>
                            <input type="hidden" name="controller" value="search" />
                            <input type="hidden" value="position" name="orderby"/>
                            <input type="hidden" value="desc" name="orderway"/>
                            <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" />
                        </p>
                    </form>
                </li>
            {/if}
        </ul>
    </div></div>

 

Note :Menu id name menu may conflict with other html tag in that case u need to change to other name and also on java script.

 

add this at blocktopmenu>css>superfish-modified>

.fixed {	position: fixed;	top: -1px;	left: 0;	width: 100%;}
Link to comment
Share on other sites
Ruben Yerai Newbie

Ruben Yerai

Posted
Posted

Vamos a ver si entre todos le damos salida a los problemas jejeje.

 

Yo no puedo ayudar, pero también estoy intentando modificar el Block Top Menú para que las Sub Categorias aparezcan en forma de lista hacia abajo.

 

A ver si nos ayudan a todos.

 

Gracias ¡¡

Link to comment
Share on other sites
josue.sanz Newbie

josue.sanz

Posted
Posted

Buenas tardes, quisiera saber si me podrían ayudar a modificar mi menu superior, quiero que las subcategorias se vean en forma vertical, no horizontal como esta ahora.

 

La direccion de la pagina es http://www.joyaplata.com.mx/index.php

 

El codigo de mi archivo superfish-modified.css es el siguiente:

 

Muchas gracias de antemano

/*** ESSENTIAL STYLES ***/
.sf-contener {
  clear: both;
  float: left;
  width: 100%; }

.sf-menu,
.sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none; }

.sf-menu {
  position: relative;
  padding: 0;
  width: 100%;
  background: #3f3f45; }
  @media (max-width: 767px) {
    .sf-menu {
      display: none; } }

.sf-menu ul {
  position: absolute;
  top: -999em;
  background: #3f3f45; }
  @media (max-width: 767px) {
    .sf-menu ul {
      position: relative; } }

.sf-menu ul li {
  width: 100%; }

.sf-menu li:hover {
  visibility: inherit;
  /* fixes IE7 'sticky bug' */ }

.sf-menu > li {
  float: left; }
  @media (max-width: 767px) {
    .sf-menu > li {
      float: none;
      position: relative;
      border-right: none; }
      .sf-menu > li span {
        position: absolute;
        right: 6px;
        top: 20px;
        width: 30px;
        height: 30px;
        z-index: 2;
        color: white; }
        .sf-menu > li span:after {
          font-family: "FontAwesome";
          content: "\f067";
          font-size: 26px; }
        .sf-menu > li span.active:after {
          content: "\f068"; } }
  .sf-menu > li > a {
    font: 400 12px/16px "Tinos", sans-serif;
    text-transform: uppercase;
    color: white;
    display: block;
    padding: 28px 20px 27px;
    position: relative;
    -webkit-perspective: 180px;
    perspective: 180px;
    text-decoration: none;
    display: block;
    overflow: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    @media (max-width: 991px) {
      .sf-menu > li > a {
        padding: 28px 16px 27px; } }
    @media (max-width: 767px) {
      .sf-menu > li > a {
        padding: 20px 20px 19px; } }
    .sf-menu > li > a:before {
      padding: 29px 20px 27px;
      left: 0;
      top: 0;
      background: #96363a;
      -webkit-transform: rotateX(-90deg);
      transform: rotateX(-90deg);
      position: absolute;
      content: attr(title);
      font: 400 12px/16px "Tinos", sans-serif;
      color: white;
      -webkit-transform-origin: 0 0 0;
      transform-origin: 0 0 0;
      display: block;
      -webkit-transition: all 0.35s ease;
      -moz-transition: all 0.35s ease;
      -ms-transition: all 0.35s ease;
      -o-transition: all 0.35s ease;
      transition: all 0.35s ease;
      white-space: nowrap;
      visibility: hidden; }
      @media (max-width: 991px) {
        .sf-menu > li > a:before {
          padding: 28px 16px 27px; } }
      @media (max-width: 767px) {
        .sf-menu > li > a:before {
          display: none; } }
    .sf-menu > li > a:hover:before {
      -webkit-transform: rotateX(1deg);
      transform: rotateX(1deg);
      background: #ed5258;
      visibility: visible; }
  .sf-menu > li.sfHover > a:before, .sf-menu > li.sfHoverForce > a:before {
    -webkit-transform: rotateX(1deg);
    transform: rotateX(1deg);
    background: #ed5258;
    visibility: visible; }
  @media (max-width: 767px) {
    .sf-menu > li:hover, .sf-menu > li.sfHover > a, .sf-menu > li.sfHoverForce > a {
      background: #ed5258; } }

.sf-menu li li li a {
  display: inline-block;
  position: relative;
  color: white;
  font-size: 13px;
  line-height: 16px;
  font-weight: bold;
  padding-bottom: 10px; }
  @media (max-width: 991px) and (min-width: 767px) {
    .sf-menu li li li a {
      font-size: 12px;
      font-weight: 400; } }
  .sf-menu li li li a:before {
    content: "\f105";
    display: inline-block;
    font-family: "FontAwesome";
    padding-right: 10px; }
  .sf-menu li li li a:hover {
    color: #ed5258; }

.sf-menu li ul {
  display: none;
  left: 0;
  top: 72px;
  /* match top ul list item height */
  z-index: 99;
  padding: 12px 0 18px 0;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 13px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 13px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 5px 13px; }
  @media (max-width: 767px) {
    .sf-menu li ul {
      top: 0; } }

.sf-menu li li ul {
  position: static;
  display: block !important;
  opacity: 1 !important;
  background: none;
  -moz-box-shadow: transparent 0 0 0;
  -webkit-box-shadow: transparent 0 0 0;
  box-shadow: transparent 0 0 0; }

.sf-menu li li li ul {
  padding: 0 0 0 20px; }

.sf-menu li li li ul {
  width: 220px; }

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

.sf-menu > li > ul {
  padding: 26px 30px 31px;
  width: 100%; }
  .sf-menu > li > ul > li > a {
    text-transform: uppercase;
    font: 600 16px/20px "Ubuntu", sans-serif;
    color: white; }
    .sf-menu > li > ul > li > a:hover {
      color: #ed5258; }
    @media (max-width: 991px) {
      .sf-menu > li > ul > li > a {
        font-size: 14px;
        font-weight: 400;
        text-transform: none; } }
    @media (max-width: 767px) {
      .sf-menu > li > ul > li > a {
        font: 400 12px/14px "Ubuntu", sans-serif;
        text-transform: uppercase; } }
  @media (max-width: 767px) {
    .sf-menu > li > ul > li {
      margin-bottom: 15px; } }
  @media (max-width: 767px) {
    .sf-menu > li > ul {
      font: 600 16px/20px "Ubuntu", sans-serif; } }

.sf-menu > li > ul > li {
  float: left;
  width: 20%;
  padding-right: 15px; }
  @media (max-width: 767px) {
    .sf-menu > li > ul > li {
      width: 50%; } }
  @media (max-width: 479px) {
    .sf-menu > li > ul > li {
      width: 100%; } }
  @media (min-width: 768px) {
    .sf-menu > li > ul > li.first-in-line-lg {
      clear: left; } }
  @media (min-width: 480px) and (max-width: 767px) {
    .sf-menu > li > ul > li.first-in-line-xs {
      clear: left; } }

.sf-menu > li > ul > li#category-thumbnail {
  width: 100% !important;
  float: none;
  clear: both;
  overflow: hidden;
  padding-right: 0; }
  .sf-menu > li > ul > li#category-thumbnail > div {
    float: left;
    padding-left: 10px;
    width: 33.333%; }
    @media (max-width: 479px) {
      .sf-menu > li > ul > li#category-thumbnail > div {
        width: 100%;
        padding-left: 0;
        padding-top: 10px;
        text-align: center; } }
    .sf-menu > li > ul > li#category-thumbnail > div:first-child {
      padding-left: 0; }
    .sf-menu > li > ul > li#category-thumbnail > div img {
      max-width: 100%;
      display: block; }

.cat-title {
  display: none; }
  @media (max-width: 767px) {
    .cat-title {
      display: block;
      font: 600 18px/22px "Ubuntu", sans-serif;
      text-transform: uppercase;
      color: #484848;
      display: block;
      padding: 17px 20px;
      border-bottom: 3px solid #e9e9e9;
      background: #f6f6f6;
      position: relative; }
      .cat-title:hover, .cat-title.active {
        background: #3f3f45;
        border-bottom-color: #666666;
        color: white; }
      .cat-title:after {
        display: block;
        font-family: "FontAwesome";
        content: "\f067";
        position: absolute;
        right: 15px;
        top: 18px;
        font-size: 26px; }
      .cat-title.active:after {
        content: "\f068"; } }

.sf-menu li.sf-search {
  border: none; }
  .sf-menu li.sf-search input {
    display: inline;
    padding: 0 13px;
    height: 30px;
    line-height: 30px;
    background: white;
    margin: 13px 10px 0 0;
    font-size: 13px;
    color: #9c9b9b;
    border: 1px solid #d6d4d4; }
Link to comment
Share on other sites
  • 2 months later...
  • 7 months later...
Ara1930 Newbie

Ara1930

Posted
Posted (edited)

Buenas tardes.

Me gustaría hacer lo mismo que el que inició el foro pero tengo Prestashop 1.7 y el theme Minimal y los archivos son diferentes.

 

Necesito que las categorías sean desplegables, ya que algunas están compuestas por muchas subcategorías y no se llega a ver bien

¿Me podrían ayudar?

 

Gracias :)

Edited by Ara1930 (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...