¿Es posible crear un menú o lista desplegable dentro de un tema?

Inicio Foros WordPress Themes y Diseño ¿Es posible crear un menú o lista desplegable dentro de un tema?

Etiquetado: ,

Este debate contiene 8 respuestas, tiene 2 mensajes y lo actualizó  LGrusin hace 6 años.

  • Autor
    Publicaciones
  • #66763

    Jaivota
    Participante

     

    Hola de nuevo.

    Resulta que estoy dedicando mi blog para hacer guías, y cada una está estructurada de la siguiente manera (por ejemplo):

    Cocina.

    Aperitivos
    Sopas
    Platos principales

    Actividades

    Minería
    Pesca
    Cultivar

     

    El caso es que estoy pensando que, en vez de poner esas listas interminables, todo quedaría infinitamente mejor si hago menús desplegables, de tal manera que, al pasar el ratón por encima, aparezca un submenú vertical con las opciones.

    He estado indagando por ahí y lo de anidar usando <ul> y <li> lo veo chupado para un novatillo como yo, pero parece que también hay que andar toqueteando en las css, lo cual ya se me complica un poco.

    La pregunta es, ¿se puede hacer un menú deplegable en un tema nuevo? y de ser así, ¿dónde habría que andar en el css y qué habría que poner?

    PD: sólo habría un nivel de anidado, tal y como he puesto en el ejemplo.

    Saludos y muchas gracias.

  • #66765

    Jaivota
    Participante

    Perdón,  donde puse tema quise decir entrada.

  • #66766

    LGrusin
    Miembro

    Si se puede hacer, incluso puedes poner la misma función que crea el menú superior de la cabecera dentro de un post.

    Los menús se ponen en la parte superior del sitio para que siempre este visible desde cualquier post, página, categoría, etc.

    Puesto que no termino de comprender la idea que quieres no me atrevo a darte más detalles.

    Un saludo

  • #66768

    Jaivota
    Participante

    Antes de nada, muchas gracias por contestar.

    Intentaré explicarme mejor. En mi página voy a subir guías, de hecho ahora mismo tengo una completa y otra a medio hacer.

    Cada guía es una entrada en la que he puesto un índice, de tal manera que alguien entra en el índice de la guía y ve todas las posibilidades que hay y pincha en la que más le interesa, se le abre una ventana nueva y ve la información. Voy a poner el enlace para que se vea cómo es, sin ánimo de hacer spam ni mucho menos: http://www.elnauta.net/?p=476

    Mi idea es que ese índice, en vez de mostrarse tal y como está, con todo escrito de inicio a fin, muestre sólo los apartados más destacados en una columna y luego al pasar el ratón por encima, despliegue los detalles en otra columna a la derecha.

    Por más que busco, veo que hay miles de referencias para el menú principal de la página, pero yo lo que pretendo es hacer algo similar, en vertical, en una entrada.

    Imagino que habría que crear la instrucción en algún sitio del CSS y luego hacer la llamada correspondiente desde el editor de texto (pestaña html), pero ni sé si se puede y ni mucho menos cómo.

    Un saludo.

  • #66813

    Jaivota
    Participante

    Bueno, hoy es lunes, las pilas están cargadas, y a ver si alguien me puede ayudar =)

  • #66835

    Jaivota
    Participante

    Hola de nuevo.

    Investigando y preguntando, he encontrado una página para hacer este tipo de menús, http://cssmenumaker.com/ que puede servir para copiar y pegar el código css y también para saber qué hay que poner exactamente en el apartado html.

    Pero, ¿dónde habría que pegar ese css? ¿Qué llamada habría que hacer a ese css?¿Existe alguna manera de relativizar todo de tal manera que al escribir las ul y las li todo fuera más o menos sencillo?

    Socorro 🙁

  • #66837

    Jaivota
    Participante

    Bueno, finalmente he dado un paso hacia adelante, aunque aún hay un pequeño problema que espero alguien pueda solucionar.

    En la página cssmaker obtuve el código css del tipo de menú que quiero:

    /* Some stylesheet reset */
    #cssmenu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
    }

    /* The container */
    #cssmenu > ul {
    display: block;
    position: relative;
    width: 150px;
    }

    /* The list elements which contain the links */
    #cssmenu > ul li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 150px;
    }

    /* General link styling */
    #cssmenu > ul li a {
    /* Layout */
    display: block;
    position: relative;
    margin: 0;
    border-top: 1px dotted #3a3a3a;
    border-bottom: 1px dotted #1b1b1b;
    padding: 11px 20px;
    width: 110px;

    /* Typography */
    font-family: Helvetica, Arial, sans-serif;
    color: #d8d8d8;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 1px 1px #000;
    font-size: 13px;
    font-weight: 300;

    /* Background & effects */
    background: #282828;
    }

    /* Rounded corners for the first link of the menu/submenus */
    #cssmenu > ul li:first-child>a {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top: 0;
    }

    /* Rounded corners for the last link of the menu/submenus */
    #cssmenu > ul li:last-child>a {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: 0;
    }

    /* The hover state of the menu/submenu links */
    #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
    color: #3cc4e6;
    text-shadow: 0 1px 0 #fff;
    background: #e6e6e6;
    background: -webkit-linear-gradient(bottom, #e6e6e6, #fff);
    background: -ms-linear-gradient(bottom, #e6e6e6, #fff);
    background: -moz-linear-gradient(bottom, #e6e6e6, #fff);
    background: -o-linear-gradient(bottom, #e6e6e6, #fff);
    border-color: transparent;
    }

    /* The arrow indicating a submenu */
    #cssmenu > ul .has-sub>a::after {
    content: ”;
    position: absolute;
    top: 16px;
    right: 10px;
    width: 0px;
    height: 0px;

    /* Creating the arrow using borders */
    border: 4px solid transparent;
    border-left: 4px solid #d8d8d8;
    }

    /* The same arrow, but with a darker color, to create the shadow effect */
    #cssmenu > ul .has-sub>a::before {
    content: ”;
    position: absolute;
    top: 17px;
    right: 10px;
    width: 0px;
    height: 0px;

    /* Creating the arrow using borders */
    border: 4px solid transparent;
    border-left: 4px solid #000;
    }

    /* Changing the color of the arrow on hover */
    #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
    border-left: 4px solid #3cc4e6;
    }

    #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
    border-left: 4px solid #fff;
    }

    /* THE SUBMENUS */
    #cssmenu > ul ul {
    position: absolute;
    left: 150px;
    top: -9999px;
    padding-left: 5px;
    opacity: 0;
    /* The fade effect, created using an opacity transition */
    -webkit-transition: opacity .3s ease-in;
    -moz-transition: opacity .3s ease-in;
    -o-transition: opacity .3s ease-in;
    -ms-transition: opacity .3s ease-in;
    }

    /* Showing the submenu when the user is hovering the parent link */
    #cssmenu > ul li:hover>ul {
    top: 0px;
    opacity: 1;
    }

     

    Y lo pegué al final en la hoja de estilos de mi tema (style.css)

    Luego creé una entrada de prueba, que podéis ver  http://www.elnauta.net/archivo-guias/prueba-de-indice/

    Y antes de poner las ul, li y toda esa serie de cosas, hice una llamada al código de la siguiente manera:

    link rel=”STYLESHEET” type=”text/css” href=”style.css” (todo eso entre “<” y “>”)

    y funciona, pero mal, porque al pasar el ratón por encima del apartado “Cocina”, se abren los subapartados “postres” y “platos principales”, pero no consigo llegar a ellos para abrir otros subapartados.

    Me imagino que el error está en el css, aunque probándolo en mi pc funciona bien.

    ¿Qué es lo que pasa?

  • #66856

    Jaivota
    Participante

    Finalmente lo he arreglado, y era que en ul ul había que modificar el left a 130 píxeles.

    En fin, quiero darme las gracias por haberme autosolucionado el problema y por toda la autoayuda obtenida.

    No cabe la menor duda que la autoayuda ha sido de calidad, eficiente y, sobre todo, rápida, al menos con esta duda.

  • #66857

    LGrusin
    Miembro

    Perdona Jaivota pero no había tenido tiempo de mirar eso.

    No sé si esos enlaces los pones a mano o automáticamente, de todas formas yo había pensado en un menú tipo acordeón o similar en jQuery. Aquí tienes una página de ejemplo http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

    Un saludo

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest

Ir al contenido