SMF 2.1Açılır Kapanır Alt Bölümler (Dropdown Button Window Child Boards Mode)

[tekyürek]

Dropdown_Button_Window_Child_Boards_Mode

*Producer: Replikacep*
*helper - authors :@PALAUDIS @tarantula901*
*Version: 2.1 Date 23.01.2019
*Compatibility: SMF 2.1 RC 1*
*Add new look for SMF 2.1 RC1*
The mod implements the following changes

Subsections: adds buttons to open and close
Font Awesome was used for free. And JavaScript was also used when making the mode.
sub-sections when you click the button, the sections are opened sequentially. and the message number and the subject number have been added.
the sub-section opens and closes and adds new message icons
Sub-sections are opened and The Shape of the claws are closed. and the subject makes the display of the number of posts elegant.
Yes the new sub-section and message sequence numbers are designed for SMF 2.1
Labor spent 2 days
Made with the infrastructure used here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown



Smf  2.1 için  geliştirdigim  bir moddur

made by www.replikacep.com

modun yapımında yardım eden yazarlar :@PALAUDIS @tarantula901

Version: 2.1 Date 2019

Compatibility: SMF 2.1 RC2

*Add new look for smf 2.1 RC 2

2.1  için  yaptım modu

mod tarafımdan yapılmıştır  :)

This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/4.0/.

Replikacep by Pop-up window mode for sub-sections is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.
Based on a work at  Replikacep
Permissions beyond the scope of this license may be available at  simplemachines.org

MOD : default Temaya  göre tasarlanmıştır  renkler ve  iconları dileyen istedigi temaya göre degiştirebilir  çok az php  bilmeniz yeterli  renkleri ve  butonu saga yada sola  kaydırmak için

Modu indir  : Dowloand


örnek :  index.css de modu yükledikten sonra bul 

Kod Seç Genişlet

.dropbtn {
    background-color: #557ea0;
    color: white;
    padding: auto;
    font-size: 14px;
    border: none;
    cursor: pointer;
    border: 1.5px solid #d1994c;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
}
aşadakilerle  oynayın

Kod Seç Genişlet

margin-left: auto;
    margin-right: auto;
    margin-top: auto; 


örnek :margin-left: auto;  yerine  margin-left: 60px; yaparsak  buton  saga  dogru kayar

yukarı  kaydırmak için : margin-top: auto; yerine  margin-top: -10px; yapın




Görseller








mobilde  gizlemek istiyorsanız  icon ları


responsive.css de  bul

Kod Seç Genişlet

@media (max-width: 480px) {
altına ekle

Kod Seç Genişlet

.fa-comments-o:before{display: none; }
.dropdown-content a {
 
  color: #557ea0;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: "Tahoma", sans-serif;
  font-weight: bold;
  line-height: 1.5em;
  margin-left: 2px;
  margin-right: auto;
  margin-top: auto;

}
bu yukarıa verdigim bir örnek tir


buton  büyük diyorsanız

index.css de  bul

Kod Seç Genişlet

.dropbtn {
    background-color: #557ea0;
    color: white;
    padding: auto;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border: 1.5px solid #d1994c;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
}


font-size: 16px;  bunu  13 yapın buton küçülür



güncelleme :

Kod Seç Genişlet

            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="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'] . ($child['new'] ? '<span class="new_posts">' . $txt['new'] . '</i></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']) . ')">' : '') . '</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"><i class="fal fa-comment-alt-smile" style="color:#34373b;margin-right: auto;line-height: 1.4em;padding: 5px 0px;text-shadow: 1px 1px .5px rgba(109,66,5,.5);"> ' . $child['link'] . '</span>' : '<span><i class="fal fa-comment-alt-smile" style="color:#34373b;margin-left: 2px;margin-right: auto;margin-top: 5px;"></i> ' . $child['link'] . '</span>'; 
         
          }
         
          echo'<script> function myFunction_', $board['id'], '() {    document.getElementById("myDropdown_', $board['id'], '").classList.toggle("show"); }     
                  window.onclick = function(event) {  if (!event.target.matches(\'.dropbtn\')) { var dropdowns = document.getElementsByClassName("dropdown-content");
              var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i];
              if (openDropdown.classList.contains(\'show\')) { openDropdown.classList.remove(\'show\'); } } } } </script>
                  <a id="board_', $board['id'], '_children" class="dropdown" title="', $txt['sub_boards'], '"></a>
                    <div class="kanka"><button onclick="myFunction_', $board['id'], '()" class="dropbtn">', $txt['sub_boards'], ' <span class="replikacep-caret"></span></button>
                    <p id="myDropdown_', $board['id'], '" class="dropdown-content"> ', implode($children), ' 
                      </p></div>';                                               
    }
}

[PALAUDIS]

Üstüne açması sıkıntı dostum.. Kodlarında display:absulute; kullanmanı tavsiye ederim. Bi ara bu sıkıntıyı giderelim. ama mantıken işlem güzel  ;) eline sağlık

[tekyürek]

Üstüne açması sıkıntı dostum.. Kodlarında display:absulute; kullanmanı tavsiye ederim. Bi ara bu sıkıntıyı giderelim. ama mantıken işlem güzel  ;) eline sağlık

 position: absolute;  ekli ama  nedense çalışmıyor   alıp  kullandıgım yer  : https://www.w3schools.com/howto/howto_js_dropdown.asp

[PALAUDIS]

position: absolute;  ekli ama  nedense çalışmıyor   alıp  kullandıgım yer  : https://www.w3schools.com/howto/howto_js_dropdown.asp

Tamam ben bi bakayım kodlarına bu akşam  ;)

[tekyürek]

Kod Seç Genişlet

global $txt, $scripturl, $context, $settings;

 // 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'] = '' . ($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">(!)</a>';

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

 echo '
 

<script src="', $settings['default_theme_url'], '/scripts/al_dropdown.js"></script>
 <a div id="board_', $board['id'], '_children" class="dropdown">
 <li><i class="fa fa-comments-o"><button onclick="myFunction()" class="dropbtn"><link href="', $settings['default_theme_url'], '/css/all.min.css" rel="stylesheet">', $txt['sub_boards'], ' </i></button></a>
 <div id="myDropdown" class="dropdown-content"> ', implode($children), '
 </div>
 </div>';
 
 
 }alt bölümlere icon koymaya ugraşıyorum  yapamadım
bunu nereye koymalıyım her alt bölümün başında gözükmesi için ?

Kod Seç Genişlet

<li><i class="fa fa-comments-o">

[PALAUDIS]

Bu kodlarla oyna

Kod Seç Genişlet

$children[] = $child['new'] ? '<span class="strong">' . $child['link'] . '</span>' : '<span>' . $child['link'] . '</span>';
 }
<span class="strong">yeni olduğunda
<span> normal görünüşüdür.

buna göre icon renginide değiştirebilirsin. yeni olduğunda turuncu olur mesela

<span class="strong" style="color:orange"> gibi mesela

[tekyürek]

bana örnek verirmisin  

Kod Seç Genişlet

$children[] = $child['new'] ? '<li><span class="strong">' . $child['link'] . '<i class="fa fa-comments-o"></span>' : '<span>' . $child['link'] . '</i></span></i>';

position: absolute;  olayını çözdüm  bu arada

[PALAUDIS]

Bunu aynen dene

Kod Seç Genişlet

$children[] = $child['new'] ? '<li><span class="strong"><i class="fa fa-comments-o" style="color:orange"></i> ' . $child['link'] . '</span>' : '<span><i class="fa fa-comments-o" style="color:#777"></i> ' . $child['link'] . '</span>';


[tekyürek]

mod güncellenmiştir

[PALAUDIS]

O alanı

Kod Seç Genişlet

echo '
<p class="board_description">', $board['description'], '</p>';bunun altına al.. ama bu alana dokunmadan... Daha düzenli görünecek

[tekyürek]

 

O alanı

Kod Seç Genişlet

echo '
<p class="board_description">', $board['description'], '</p>';bunun altına al.. ama bu alana dokunmadan... Daha düzenli görünecek

Anlamadim dediginizi 

[tarantula901]

Yapmış olduğunuz alt kategori olayını paladusun söylediği kodların altına al demek istiyor.

[tekyürek]

Modu son kez Güncelledim   alt bölümler ve  konu ve ileti sayısı eklenmiştir  güle güle  kullanın

 

[tarantula901]

Güzel paylaşım olmuş. Devamını bekleriz.

[tekyürek]

Güzel paylaşım olmuş. Devamını bekleriz.

Rica ederim admin id olayini siz yardim etmeseniz çozemezdim belkide simdiye :d

Devam edecek tabiki font icon heryerde kullanacagim