Hover Altbölüm (açılır kapanır alt bölümler)

Başlatan snrj, 07 Şub 2017 20:56

« önceki - sonraki »

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

snrj

alt bölümlerin çok yer kapladığını düşünen arkadaşlar için ufak bir ipucu
anlatım default temaya göre yapılmış olup farklı temalarda ufak tefek farklılıklar olabilir
örnek resim
önceki

sonraki



Boradindex.template.php de
bul
Kod [Seç]
<td class="icon windowbg"', !empty($board['children']) ? ' rowspan="2"' : '', '>değiştir
Kod [Seç]
<td class="icon windowbg">bul ve sil (süslü parentezlere filan dikkat )
Kod [Seç]
// Show the "Child Boards: ". (there's a link_children but we're going to bold the new ones...)
if (!empty($board['children']))
{
// Sort the links into an array with new boards bold so it can be imploded.
$children = array();
/* Each child in each board's children has:
id, name, description, new (is it new?), topics (#), posts (#), href, link, and last_post. */
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" class="new_posts" 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>' : $child['link'];
}
echo '
<tr id="board_', $board['id'], '_children">
<td colspan="3" class="children windowbg">
<strong>', $txt['parent_boards'], '</strong>: ', implode(', ', $children), '
</td>
</tr>';
}
bul
Kod [Seç]
// Show the "Moderators: ". Each has name, href, link, and id. (but we're gonna use link_moderators.)
if (!empty($board['moderators']))
echo '
<p class="moderators">', count($board['moderators']) == 1 ? $txt['moderator'] : $txt['moderators'], ': ', implode(', ', $board['link_moderators']), '</p>';

altına ekle
Kod [Seç]
// Show the "Child Boards: ". (there's a link_children but we're going to bold the new ones...)
if (!empty($board['children']))
{
// Sort the links into an array with new boards bold so it can be imploded.
$children = array();
/* Each child in each board's children has:
id, name, description, new (is it new?), topics (#), posts (#), href, link, and last_post. */
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" class="new_posts" 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">', $txt['parent_boards'], '</button>
  <div class="childhover-content">', implode($children), '
  </div>
</div>';
}

index.css de en alta ekle
Kod [Seç]
.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;
}
.childhover-content strong:hover {background-color: #f1f1f1}
.childhover:hover .childhover-content {
    display: block;
}
emeğe saygı başka sitelerde paylaşırken kaynak belirtin http://smf.konusal.com/