• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Kopierter HTML Code funktioniert nicht (Megamenu)

H

halloichbinpaul

Neues Mitglied
Hi,
ich nutze Bootstrap 5.2 und habe das korrekt eingebunden. Ich möchte ein Mega menu auf meiner Website einbauen. Ich würde gerne diese Vorlage einbinden:


Die Navbar selber sieht aus wie in der Demo. Der Hovereffekt funktioniert. Wenn ich Mega menu oder Dropdown right anklicke, öffnet sich leider nicht das entsprechende "Fenster". CSS oder JS wird scheinbar nicht benötigt.

Könnt ihr mir bitte sagen, was ich falsch mache? Bin recht neu in dem Thema. Auch in diesem Forum, hoffe Links etc. sind ok. Habe keine Regeln gefunden.

Danke euch.
LG
 
Werbung:
@msi das ergibt Sinn. Da das Megamenu scheinbar kein css oder js benötigt müsste die index.html Seite mit dem Megamenu ja ausreichen?

Danke und LG

<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="dist/app.css">
<title>SEO Agentur</title>
</head>

<body>

<div class="container mt-5">
<p class="display-6 fw-bold">Demo</p>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarColor02"
aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown"
aria-expanded="false">
Mega menu
</a>
<!-- Dropdown menu -->
<div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
border-top-left-radius: 0;
border-top-right-radius: 0;
">
<div class="container">
<div class="row my-4">
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Lorem ipsum</a>
<a href="" class="list-group-item list-group-item-action">Dolor sit</a>
<a href="" class="list-group-item list-group-item-action">Amet consectetur</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Explicabo voluptas</a>
<a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>
<a href="" class="list-group-item list-group-item-action">Provident dolor</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-md-0">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Iste quaerato</a>
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Est iure</a>
<a href="" class="list-group-item list-group-item-action">Praesentium</a>
<a href="" class="list-group-item list-group-item-action">Laboriosam</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="list-group list-group-flush">
<a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="" class="list-group-item list-group-item-action">Saepe</a>
<a href="" class="list-group-item list-group-item-action">Vel alias</a>
<a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
<a href="" class="list-group-item list-group-item-action">Cum dolores</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="d-flex align-items-center">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Items</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<section class="section-content py-5">

</section>
</div>

<section>
<div>
<h1 class="text-center">SEO</h1>
</div>
<div class="container">
<div class="row">
<div class="col col-4">
<h1>Das ist meine Website</h1>
</div>
<div class="col col-8">
<p>
Herzlich willkommen
</p>
</div>
</div>
</div>
</section>

<section>
<div class="container">
<div class="row">

</div>
</div>
</section>

</body>
</html>
 
Werbung:
@Sclero2004 danke für den Hinweis. Ich habe Bootstrap vollständig eingebuden, das beinhaltet dann doch auch bootstrap css und js :

app.scss:
// // Vendor
@import "vendor/__vendor-dir";

__vendor.dir.scss:
@import "bootstrap";

_bootstrap.scss
// For full Bootstrap
@import '../../node_modules/bootstrap/scss/bootstrap';
 
Ich habe die Datei heruntergeladen. In der Zip befindet sich bloß eine megamenu.html Datei.

Auf der Demo-Seite steht:
"For this demo page you should connect to the internet to receive files from CDN like Bootstrap5 CSS, Bootstrap5 JS"

Ich öffne meine Website über MAMP. Kann es sein, dass durch das lokale öffnen nicht auf Bootstrap css und js zugegriffen werden kann? Falls ja, gibt es eine Lösung?

Ich habe gerade noch zusätzliche Informationen im Zusammenhang mit der Demoseite gefunden, leider helfen sie mir bisher auch nicht weiter:


Steps to create megamenu​

  • Use the default Bootstrap's dropdown menu for your mega menu
  • Set the .dropdown position to static by overiding its CSS
  • Add .has-megamenu on li element ( together with dropdown class name )
  • Then add new class name .megamenu together with dropdown-menu classname.
  • Fill content of megamenu with Bootstrap grid's columns

    Basic Code Snippets:
    (Den ersten Teil habe ich in meine index.html Datei kopiert und den unteren Teil in nav.scss (den Teil ab .dropdown habe ich auf Grund der Anleitung (Steps to create megamenu) hinzugefügt;
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
<li class="nav-item"><a class="nav-link" href="#"> About </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Services </a></li>
<li class="nav-item dropdown has-megamenu">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Mega menu </a>
<div class="dropdown-menu megamenu" role="menu">
This is content of megamenu. <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div> <!-- dropdown-mega-menu.// -->
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Dropdown right </a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
<li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
</ul>
</li>
</ul>
</div> <!-- navbar-collapse.// -->
</div> <!-- container-fluid.// -->
</nav>



.navbar .megamenu{ padding: 1rem; }

/* ============ desktop view ============ */
@media all and (min-width: 992px) {

.navbar .has-megamenu{position:static!important;}
.navbar .megamenu{left:0; right:0; width:100%; margin-top:0; }

}
/* ============ desktop view .end// ============ */

/* ============ mobile view ============ */
@media(max-width: 991px){
.navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
overflow-y: auto;
max-height: 90vh;
margin-top:10px;
}
}
/* ============ mobile view .end// ============ */

.dropdown {
position: static;
}

li .dropdown .has-megamenu {

}

.dropdown-menu.megamenu {

}
 
Wenn ich den HTML-Code von der Testseite kopiere, den Kram mit google raus werfe und dann bei mir teste, funktioniert das einwandfrei. Stellt sich also die Frage, was du alles sonst noch verändert hast.
 
Werbung:
Ich habe festgestellt, dass ich bootstrap css und js doch nicht geladen habe. Diese Verlinkungen habe dann wie in dieser Anleitung ergänzt:

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
getbootstrap.com getbootstrap.com

Jetzt funktioniert es mit dem gedownloadeten Code der Testseite. Danke euch und LG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben