[TUTO] Agregar un dropmenu a los suforos 2.1 SMF RC2

[gohanjaja]

buenas estimados

Les traigo un tuto super sencillo y bastante útil para aquellos foros super poblados de subforos.
Bien lo primero que hay q hacer es agregar un poco de .css a su estilo principal de su thema:

Code Select Expand

.dropbtn {
    background-color: #cde7ff;
    color: #334466;
    cursor: pointer;
    padding: 2px 5px;
    border: 1px solid #a7b9cd;
    text-shadow: 0 0 black;
    border-radius: 5px;
}

.childhover {
    display: inline-block;
}

.childhover-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.childhover-content strong {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

NOTA: Si ya tienen el childhover solo reemplazarlo.

Ahora vamos al boardindex.template.php y buscamos el siguiente foreach:

Code Select Expand

foreach ($board['children'] as $child)
{
if (!$child['is_redirect'])
$child['link'] = '' . ($child['new'] ? '<a href="' . $scripturl . '?action=unread;board=' . $child['id'] . '" title="' . $txt['new_posts'] . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')" class="new_posts">' . $txt['new'] . '</a>' : '') . '<a href="' . $child['href'] . '" ' . ($child['new'] ? 'class="board_new_posts" ' : '') . 'title="' . ($child['new'] ? $txt['new_posts'] : $txt['old_posts']) . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')">' . $child['name'] . '</a>>';
else
$child['link'] = '<a href="' . $child['href'] . '" title="' . comma_format($child['posts']) . ' ' . $txt['redirects'] . ' - ' . $child['short_description'] . '">' . $child['name'] . '</a>';

// Has it posts awaiting approval?
if ($child['can_approve_posts'] && ($child['unapproved_posts'] || $child['unapproved_topics']))
$child['link'] .= ' <a href="' . $scripturl . '?action=moderate;area=postmod;sa=' . ($child['unapproved_topics'] > 0 ? 'topics' : 'posts') . ';brd=' . $child['id'] . ';' . $context['session_var'] . '=' . $context['session_id'] . '" title="' . sprintf($txt['unapproved_posts'], $child['unapproved_topics'], $child['unapproved_posts']) . '" class="moderation_link amt">!</a>';

$children[] = $child['new'] ? '<span class="strong">' . $child['link'] . '</span>' : '<span>' . $child['link'] . '</span>';
}

Y lo reemplazamos por el mio:

Code Select Expand

foreach ($board['children'] as $child)
{
if (!$child['is_redirect'])
$child['link'] = '<a href="' . $child['href'] . '" ' . ($child['new'] ? 'class="new_posts" ' : '') . 'title="' . ($child['new'] ? $txt['new_posts'] : $txt['old_posts']) . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')">' . $child['name'] . ($child['new'] ? '</a> <a href="' . $scripturl . '?action=unread;board=' . $child['id'] . '" title="' . $txt['new_posts'] . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')"><img src="' . $settings['lang_images_url'] . '/new.gif" alt="" />' : '') . '</a>';
else
$child['link'] = '<a href="' . $child['href'] . '" title="' . comma_format($child['posts']) . ' ' . $txt['redirects'] . '">' . $child['name'] . '</a>';

// Has it posts awaiting approval?
if ($child['can_approve_posts'] && ($child['unapproved_posts'] || $child['unapproved_topics']))
$child['link'] .= ' <a href="' . $scripturl . '?action=moderate;area=postmod;sa=' . ($child['unapproved_topics'] > 0 ? 'topics' : 'posts') . ';brd=' . $child['id'] . ';' . $context['session_var'] . '=' . $context['session_id'] . '" title="' . sprintf($txt['unapproved_posts'], $child['unapproved_topics'], $child['unapproved_posts']) . '" class="moderation_link">(!)</a>';

$children[] = $child['new'] ? '<strong>' . $child['link'] . '</strong>' :'<strong>' . $child['link'] . '</strong>' ;
}
echo '<div id="board_', $board['id'], '_children" class="childhover">
  <button class="dropbtn">Listado de subforos (by gohanjaja)</button>
  <div class="childhover-content">', implode($children), '
  </div>
</div>';
}

Link de refencia para personalizar su propio botón:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown

Bueno espero les sirva. Exitos.

[-Rock Lee-]

¿Podrias dejar una imagen para ver el resultado final? Esta bueno el tutorial gracias por compartirlo por eso lo muevo a la zona respectiva!


Saludos!

[gohanjaja]

¿Podrias dejar una imagen para ver el resultado final? Esta bueno el tutorial gracias por compartirlo por eso lo muevo a la zona respectiva!


Saludos!

Hola estimado buenos días, si si disculpas por no dejar imágen, es que esta down mi foro.
Hace exactamente como lo dle ejemplo:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown

Reemplaza las subcategorías, con un botón desplegable y luego las alinea en forma vertical a todas.
Muchas gracias.

[-Rock Lee-]

Esta bueno realmente mas si tienes muchos subforos ayuda mucho en cuanto a nivel movil, justo pude sacar tiempo para probar en un foro de pruebas tengo !


Saludos!

[gohanjaja]

Esta bueno realmente mas si tienes muchos subforos ayuda mucho en cuanto a nivel movil, justo pude sacar tiempo para probar en un foro de pruebas tengo !


Saludos!

Que groso ! Exactamente tal como dices, ayuda mucho a la visualización en el celular; me alegra que te haya gustado y seguramente lo hará a los que les gusta tener "pocas cosas" en la pantalla principal.
Saludos!

[vicram10]

Buen tuto 👌