PHP Dosya Yöneticisi

{% set i = 0 %}
      {% for menu in menus %}

{% if menu.children %}
            <ul class="menu-sub">

{% for children_1 in menu.children %}
                <li class="menu-item">
                  {% if children_1.href %}
                    <a href="{{ children_1.href }}" class="menu-link">
                      <div>{{ children_1.name }}</div>
                    </a>
                  {% else %}
                    <a href="javascript:void(0);" class="menu-link menu-toggle">
                      <div>{{ children_1.name }}</div>
                    </a>
                  {% endif %}
                  {% if children_1.children %}
                    <ul class="menu-sub">
                      {% for children_2 in children_1.children %}
                        <li class="menu-item">
                          {% if children_2.href %}
                            <a href="{{ children_2.href }}" class="menu-link">{{ children_2.name }}</a>
                          {% else %}
                            <a href="javascript:void(0);" class="menu-link menu-toggle">{{ children_2.name }}</a>
                          {% endif %}
                          {% if children_2.children %}
                            <ul class="menu-sub">
                              {% for children_3 in children_2.children %}
                                <li class="menu-item">
                                  <a href="{{ children_3.href }}" class="menu-link">{{ children_3.name }}</a>
                                </li>
                              {% endfor %}
                            </ul>
                          {% endif %} </li>
                        {% set i = i + 1 %}

{% endfor %}
                    </ul>
                  {% endif %}
                </li>
                {% set i = i + 1 %}
              {% endfor %}

</ul>
          {% endif %}
        </li>

{% set i = i + 1 %}
      {% endfor %}

</ul>
  </div>
</aside>

<div id="cssmenu" class="hidden-md hidden-lg menu-container">
    <div class="llooggoo">
        <img width="140" src="view/image/logo.png" alt="OpenCart">
        <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-xl-none">
          <i class="bx bx-x bx-sm align-middle"></i>
        </a>
    </div>
    <ul id="menu">
        {% set i = 0 %}
        {% for menu in menus %}
            <li id="{{ menu.id }}">
                {% if menu.href %}<a href="{{ menu.href }}"><i class="fa {{ menu.icon }} fw"></i> {{ menu.name }}</a>{% else %}<a href="#collapse{{ i }}" data-toggle="collapse" class="parent collapsed" ><i class="fa {{ menu.icon }} fw"></i> {{ menu.name }}</a>{% endif %}
                {% if menu.children %}
                    <ul id="collapse{{ i }}" class="collapse">
                        {% set j = 0 %}
                        {% for children_1 in menu.children %}
                            <li>{% if children_1.href %}
                                    <a href="{{ children_1.href }}">{{ children_1.name }}</a>
                                {% else %}
                                    <a href="#collapse{{ i }}-{{ j }}" data-toggle="collapse" class="parent collapsed">{{ children_1.name }}</a>
                                {% endif %}

{% if children_1.children %}
                                    <ul id="collapse{{ i }}-{{ j }}" class="collapse">
                                        {% set k = 0 %}
                                        {% for children_2 in children_1.children %}
                                            <li>{% if children_2.href %}
                                                    <a href="{{ children_2.href }}">{{ children_2.name }}</a>
                                                {% else %}
                                                    <a href="#collapse-{{ i }}-{{ j }}-{{ k }}" data-toggle="collapse" class="parent collapsed">{{ children_2.name }}</a>
                                                {% endif %}
                                                {% if children_2.children %}
                                                    <ul id="collapse-{{ i }}-{{ j }}-{{ k }}" class="collapse">

{% for children_3 in children_2.children %}
                                                            <li><a href="{{ children_3.href }}">{{ children_3.name }}</a></li>
                                                        {% endfor %}
                                                    </ul>
                                                {% endif %}</li>
                                            {% set k = k + 1 %}
                                        {% endfor %}
                                    </ul>
                                {% endif %} </li>
                            {% set j = j + 1 %}
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
            {% set i = i + 1 %}
        {% endfor %}
    </ul>

</div>
<script>
  $(document).ready(function() {
    function adjustContentOpacity() {
      if ($('#cssmenu').is(':visible')) {
        $('#content').css('opacity', '0.5');
      } else {
        $('#content').css('opacity', '1');
      }
    }

// X butonuna tıklandığında menüyü kapat ve content alanının opacity'sini değiştir
    $('.layout-menu-toggle').click(function() {
      $('#cssmenu').toggle();
      adjustContentOpacity();
    });

// Sayfa yüklendiğinde de adjustContentOpacity() fonksiyonunu çağır
    adjustContentOpacity();
  });
</script>

<style>

/* Ana menü ve alt menü öğelerini grid layout ile düzenle */
#menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 200px genişlikli öğeler, sığmazsa yeni sütun aç */
}

/* Ana menü ve alt menü bağlantılarının stilini düzenle */
#menu a {
    display: block;
    height: 42px; /* Ana menü öğesi yüksekliği */
}

/* Bu stil, menüyü yan tarafta sabit tutacak */
.menu-container {
    width: 250px; /* Menü genişliği - dilediğiniz gibi ayarlayabilirsiniz */
    overflow-y: auto; /* Yatay kaydırma çubuğu için gereklidir */
}

/* Yatay kaydırma çubuğunun stilini belirler */
.menu-container::-webkit-scrollbar {
    width: 4px; /* Çubuk genişliği - dilediğiniz gibi ayarlayabilirsiniz */
}

.menu-container::-webkit-scrollbar-thumb {
    background-color: #888; /* Çubuk rengi - dilediğiniz gibi ayarlayabilirsiniz */
    border-radius: 2px; /* Çubuk köşeleri - dilediğiniz gibi ayarlayabilirsiniz */
}

.menu-container::-webkit-scrollbar-thumb:hover {
    background-color: #eceded; /* Çubuk üzerine gelindiğindeki renk - dilediğiniz gibi ayarlayabilirsiniz */
}

/* Aktif menülerin ve alt menülerin arka plan rengini belirleme */
#menu li.active > a,
#menu li.active > a:hover,
#menu li.active > a:focus,
#menu li ul li.active > a,
#menu li ul li.active > a:hover,
#menu li ul li.active > a:focus {
  background-color: #eceded;
}

#menu > li {
  margin: 0 10px;
}

#menu li li.active > a {
  background-color: #dbe4f3 !important;
  font-weight: 500;
}

#menu > li > a > i {
    margin-right: 20px !important;
    width: 0px !important;
    font-size: 15px !important;
}

#menu li li a::before{
content: "\2022";
    margin-right: 16px !important;
    color: #7f8a9b !important;
    font-size: 15px;
    margin-left: 3px !important;
}

/* Alt menü öğelerinin aktif olduğunda arka plan rengini belirleme */
#menu li li.active > a::before {
  color: #5a8dee !important;
}

#menu li li ul a {
  padding-left:20px !important;
}

.menu-container {
    /* Diğer stil kodları burada */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
}

</style>

İptal

📁 PHP Dosya Yöneticisi

📝 column_left.twig

📝 column_left.twig

📝 Yeniden Adlandır

🔐 Dosya İzinleri (chmod)