HTML Dropdown Menü nachträglich

Diskutiere HTML Dropdown Menü nachträglich im HTML Forum im Bereich Programmierung; Hallo Zusammen, Ich bin neu Hier und benötige ganz dringend Hilfe. Ich glaube für den einen Oder Anderen Hier ist dies ein Kinderspiel, da bin...
Neues Thema erstellen Antworten
  • HTML Dropdown Menü nachträglich Beitrag #1
S
slog94
New member
Beiträge
1
Punkte Reaktionen
0
Hallo Zusammen,

Ich bin neu Hier und benötige ganz dringend Hilfe.
Ich glaube für den einen Oder Anderen Hier ist dies ein Kinderspiel, da bin ich mir sicher es geht um Folgendes.

Mir wurde vor einiger Zeit eine Website erstellt und leider erreiche ich die Person nicht mehr.

Ich möchte in meiner Aktuellen Menü Bar 4 Punkte zusammen fügen als Dropdown.

Leider bekommen ich dies einfach nicht hin, dachte vielleicht könnte mir jemand von euch da Hilfestellung geben.

Aktuell sieht sie so aus:

HTML: 
            <div class="menu">
                <nav itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
                    <div class="menu-placeholder" id="menu-placeholder"></div>
                    <ul>
                        <li><a itemprop="url" href="<?php echo $prefixLink; ?>home" class="coo-link"><span itemprop="name"><?php echo $var['contents']['home']['title']; ?></span></a></li>
                        <li><a itemprop="url" href="<?php echo $prefixLink; ?>about-us" class="coo-link"><span itemprop="name"><?php echo $var['contents']['about-us']['title']; ?></span></a></li>
                        <li><a itemprop="url" href="<?php echo $prefixLink; ?>menu" class="coo-link"><span itemprop="name"><?php echo $var['contents']['menu']['title']; ?></span></a></li>
                        <li><a itemprop="url" href="<?php echo $prefixLink; ?>bookatable" class="coo-link"><span itemprop="name"><?php echo $var['contents']['bookatable']['title']; ?></span></a></li>
                        <li><a itemprop="url" href="<?php echo $prefixLink; ?>extras" class="coo-link"><span itemprop="name"><?php echo $var['contents']['extras']['title']; ?></span></a></li>
                        <li><a itemprop="url" href="<?php echo $prefixLink; ?>contact" class="coo-link"><span itemprop="name"><?php echo $var['contents']['contact']['title']; ?></span></a></li>
                        <li><a itemprop="url" href="<?php echo (string)TemplateVars::get('basePath'); ?>team.php" class="coo-link"><span itemprop="name">Team</span></a></li>
                        <li><a itemprop="url" href="<?php echo (string)TemplateVars::get('basePath'); ?>blog.php" class="coo-link"><span itemprop="name">Blog</span></a></li>
                        <li> <a itemprop="url" href="<?php echo (string)TemplateVars::get('basePath'); ?>signature-dish.php" class="coo-link"><span itemprop="name"><?php echo $var['contents']['signature-dish']['title']; ?></span></a></li>
                      
                        <li class="hidden-mobile hidden-tablet"><a href="https://www.facebook.com/scalaka/" class="coo-link"><i class="fab fa-facebook"></i></a></li>
                        <li class="hidden-mobile hidden-tablet"><a href="https://www.instagram.com/restaurantscala/" class="coo-link"><i class="fab fa-instagram"></i></a></li>
                    </ul>
                </nav>
            </div>

Ich würde Gerne folgendes Punkte Zusammenfügen:

Team,Bar,extras,blog und signature-dish.

Ich danke im voraus für evtl. Hilfe.
 
  • HTML Dropdown Menü nachträglich Beitrag #2
basti1012
basti1012
Well-known member
Beiträge
242
Punkte Reaktionen
18
Das geht eigentlich ganz einfach mit CSS.
Es wäre schön wenn du mit deinen aktuellen Code ( HTML und CSS ) bei codepen.io deine jetzige Version ein Beispiel erstellst.
Oder hier deine CSS dazu postest.

Ist deine CSS dazu schon ausgelegt daraus ein Dropdown Menü zu erstellen?
Oder muss man das erst noch machen .

Normalerweise müsste dein HTML dann so aussehen, wenn deine CSS dafür ausgelegt ist.

Code: 
            <div class="menu">
                <nav itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
                    <div class="menu-placeholder" id="menu-placeholder"></div>
                    <ul>
                        <li><a itemprop="url" href="<?php echo $prefixLink; ?>home" class="coo-link"><span itemprop="name"><?php echo $var['contents']['home']['title']; ?></span></a></li>
                        <li><a itemprop="url" href="<?php echo $prefixLink; ?>about-us" class="coo-link"><span itemprop="name"><?php echo $var['contents']['about-us']['title']; ?></span></a></li>
                        <li><a itemprop="url" href="<?php echo $prefixLink; ?>menu" class="coo-link"><span itemprop="name"><?php echo $var['contents']['menu']['title']; ?></span></a></li>
                        <li><a itemprop="url" href="<?php echo $prefixLink; ?>bookatable" class="coo-link"><span itemprop="name"><?php echo $var['contents']['bookatable']['title']; ?></span></a></li>
                        <li><a itemprop="url" href="<?php echo $prefixLink; ?>extras" class="coo-link"><span itemprop="name"><?php echo $var['contents']['extras']['title']; ?></span></a></li>
                        <li><a itemprop="url" href="<?php echo $prefixLink; ?>contact" class="coo-link"><span itemprop="name"><?php echo $var['contents']['contact']['title']; ?></span></a></li>
                        
                        <li>Neue PUNKTE
                            <ul>
                                <li><a itemprop="url" href="<?php echo (string)TemplateVars::get('basePath'); ?>team.php" class="coo-link"><span itemprop="name">Team</span></a></li>
                                <li><a itemprop="url" href="<?php echo (string)TemplateVars::get('basePath'); ?>blog.php" class="coo-link"><span itemprop="name">Blog</span></a></li>
                                <li> <a itemprop="url" href="<?php echo (string)TemplateVars::get('basePath'); ?>signature-dish.php" class="coo-link"><span itemprop="name"><?php echo $var['contents']['signature-dish']['title']; ?></span></a></li>
                                <li><a>bar </a></li>
                                <li><a> extras</a></li>
                            </ul>
                        </li>   
                        <li class="hidden-mobile hidden-tablet"><a href="https://www.facebook.com/scalaka/" class="coo-link"><i class="fab fa-facebook"></i></a></li>
                        <li class="hidden-mobile hidden-tablet"><a href="https://www.instagram.com/restaurantscala/" class="coo-link"><i class="fab fa-instagram"></i></a></li>
                    </ul>
                </nav>
            </div>
Mit der richtigen CSS sollte das gehen.
Wenn nicht muss man die CSS noch anpassen.
Deswegen poste deine Css, wenn es so nicht klappt.
 
  • HTML Dropdown Menü nachträglich Beitrag #3
basti1012
basti1012
Well-known member
Beiträge
242
Punkte Reaktionen
18
Ich habe mal ein Codepen erstellt
* Link entfernt , weil existiert nicht mehr *
Die Links zu deiner Seite habe ich gelöscht.

Ob das Menü im Handy Modus auch funktioniert musst du mal selber testen, weil blicke gerade nicht durch dein JS durch.

Beim Codepen siehst du das geänderte HTML, was ich hier schon ungefähr gezeigt habe.
In der CSS sind ganz am Ende noch paar Zeilen zugekommen
 
Zuletzt bearbeitet:
Thema:

HTML Dropdown Menü nachträglich

Oben Unten