Dropdown Menu für Andy Theme

Post Reply
marek
Ssr. Bludit
Posts: 13
Joined: Mon Jan 17, 2022 6:24 am

Hallo Zusammen,

ich bin hier neu im Forum und Suche nach Hilfe um das Andy Theme um ein Dropdown Menü in der main.navigation zu erweitern. Die Seite soll für unseren Dorfverein sein, der gerade geründet wurde.

Da ich keinerlei PHP programierkenntnise besitze habe ich im Forum gesucht und bin auch recht schnell über die Suchergebnisse auf den nachfolgenden Beitrag gestoßen.

viewtopic.php?t=2198

Bin jedoch daraus nicht so richtig schlau geworden und an der Umsetzung gescheitert.
Hat jemand im Forum sowas bereits umgesetzt und könnte mich dabei anleiten oder ggf. die modifizierten Deiten zur Verfügung stellen.

Vielen Dank
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Wo stehst Du an?
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
marek
Ssr. Bludit
Posts: 13
Joined: Mon Jan 17, 2022 6:24 am

Hallo,

den nachfolgenden CSS Code habe ich unter bl-themes\andy\assets\css\style.css ergänzt

Code: Select all

.dropdown-hover .main-navigation.toggled ul li:hover > ul {
   transition-delay: 0s;
   display: block;
   visibility: visible;
   left: auto;
   height: auto;
   opacity: 1;
   transition-delay: 150ms;
   pointer-events: auto;
   height: auto;
   overflow: visible;
}
Mir ist nicht klar wo ich was in der navbar.php ersetzen muss.
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Das kannst Du. Oder die CSS-Anweisungen in das Feld "Head" des Plugins HTML-Code zwischen die Tags <style> und </style> einfügen, also so:

Code: Select all

<style>

.dropdown-hover .main-navigation.toggled ul li:hover > ul {
   transition-delay: 0s;
   display: block;
   visibility: visible;
   left: auto;
   height: auto;
   opacity: 1;
   transition-delay: 150ms;
   pointer-events: auto;
   height: auto;
   overflow: visible;
}

</style>
In der Datei navbar.php im Verzeichnis /bl-themes/andy/php kannst Du Folgendes ersetzen (ab Zeile 13):

Code: Select all

<?php
$current_page = $_SERVER['REQUEST_URI'];

foreach ($staticContent as $staticPage) {
   $children = $staticPage->children();
   if (!$staticPage->isChild()){
      echo '<li class="nav-item parent">';
      echo '<a class="nav-link" href="'. $staticPage->permalink().'">'.$staticPage->title().'</a>';
      if ($staticPage->hasChildren()) {
         echo PHP_EOL.'<ul class="child">'.PHP_EOL;
            foreach ($children as $child) {
               echo '<li class="nav-item child"><a href="'.$child->permalink().'">'.$child->title().'</a></li>'.PHP_EOL;
            }
         echo '</ul>'.PHP_EOL;
      }
   echo '</li>'.PHP_EOL;
   }
}
?>
statt

Code: Select all

<?php
   $current_page = $_SERVER['REQUEST_URI'];
   foreach ($staticContent as $staticPage) : ?>

   <li <?php if ($current_page == '/' . $staticPage->slug()) echo 'class="current-menu-item"'; ?>>
      <a href="<?php echo $staticPage->permalink(); ?>"><?php echo $staticPage->title(); ?></a>
   </li>

<?php endforeach ?>
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
marek
Ssr. Bludit
Posts: 13
Joined: Mon Jan 17, 2022 6:24 am

Danke für die Hilfe, jetzt klappt alles. :D
marek
Ssr. Bludit
Posts: 13
Joined: Mon Jan 17, 2022 6:24 am

Nach dem nun die Seite von der Struktur steht habe ich festgestellt, dass sich das Dropdown Menü von mobilen Geräten nicht bedienen läßt, weil das Dropdown Menu gleich beim click die obersten Eintrag öffnet ohne das Menü zu öffen.

Auf dem Desktop PC mit dem Test der Bildschirmgrößentesten ist mir das Verhalten nicht aufgefallen. Hat jemand eine Idee was man am PHP oder CSS anpassen muss, damit die Seite auch vom Tablet und Smartphone bedient werden kann?

Gerne kann ich den Link zur Seite per PM schicken.
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Ich schaue mir das diese Woche an.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
Post Reply