创建带有按钮的多级汉堡菜单，可扩展汉堡级别
Creating a multi level hamburger menu with buttons that expand the hamburger levels
我想创建一个动画汉堡菜单，其中包含可展开下一级的按钮。
我知道我的代码离那个很远，但我完全被这个问题困住了。无论如何都会向你展示我的进步。
https://jsfiddle.net/TheBB23/hnsjym9u/
我从网站上复制了这段代码，以便您清楚地了解我想要什么。 https://jsfiddle.net/TheBB23/uw2jzge1/
正如我所说，我完全被困住了，非常感谢任何帮助。
$('.circle-plus').on('click', function() {
$(this).toggleClass('opened');
})
var coll = document.getElementsByClassName("hamburger");
var hideLinks = document.querySelectorAll('.mobilemenuitems a');
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var mobilemenuitems = this.nextElementSibling;
if (mobilemenuitems.style.display === "block") {
mobilemenuitems.style.display = "none";
} else {
mobilemenuitems.style.display = "block";
}
});
}
var hamburger = document.querySelector(".hamburger");
var header = document.querySelector(".header");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
header.classList.toggle("header--is-active");
// Do something else, like open/close menu
});
document.onload = document.getElementsByClassName("mobilemenuspace")[0].style.display = "none";
document.getElementsByClassName("mobilemenuspace")[0].addEventListener("click", function() {
this.style.display = "none";
hamburger.classList.toggle("is-active");
});
body {
margin: 0px;
padding: 0px;
background: white;
color: #24603c;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
section {
height: 50px;
width: 100%;
}
/* Responsive (Smartphone) Menu */
@media (max-width: 1000px) {
/* Bild oben links Style */
.logo img {
height: 50px;
position: fixed;
float: left;
z-index: 3;
}
.login-container {
display: none;
}
.LogoutArea {
display: none;
}
#nav {
display: none;
}
/* Platzhalter Menü*/
section {
height: 50px;
width: 100%;
background: rgba(237, 237, 237, 1);
background: -moz-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237, 237, 237, 1)), color-stop(53%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
background: -o-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
background: -ms-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff', GradientType=0);
}
.nav {
height: 50px;
width: 100%;
background: #24603c;
position: fixed;
z-index: 2;
}
#BurgerSpace>div>button {
position: fixed;
right: 0px;
top: 0px;
z-index: 3;
background: none;
}
#BurgerSpace {
position: relative !important;
}
#BurgerSpace>div {
position: relative !important;
}
#BurgerSpace>div>div {
display: block;
margin-top: 50px;
}
#BurgerSpace {
width: 100%;
height: 50px;
display: block;
position: absolute;
float: right;
margin-right: 0;
padding-right: 0px;
padding-top: -2px;
}
}
.mobilemenuspace {
display: none;
width: 100%;
position: relative;
z-index: 1;
right: 0;
margin-top: 50px;
background: white;
}
@media (min-width: 1000px) {
.mobilemenuspace {
display: none !important;
}
}
#mobilemenufirstorder>a {
text-decoration: none !important;
font-weight: bold;
list-style: none !important;
font-size: 28px;
line-height: 28px;
height: 100%;
display: block;
height: 28px;
padding-top: 26px;
padding-bottom: 26px;
padding-left: 25px;
}
#mobilemenufirstorder>a:hover {
color: lightgrey !important;
}
#mobilemenufirstorder>a:hover+div {
display: block !important;
}
#mobilemenufirstorder {
height: 80px;
width: 100%;
border-bottom: solid 2px lightgrey;
border-top: solid 2px lightgrey;
list-style: none !important;
text-decoration: none !important;
}
.mobilemenuitems>li {
list-style: none;
text-decoration: none;
}
.mobilemenuitems {
display: block;
}
.mobilemenusecondorder {
display: none;
}
.closed .vertical {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
}
.closed .horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
opacity: 1;
}
.opened {
opacity: 1;
}
.opened .vertical {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
}
.opened .horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
opacity: 0;
}
.circle-plus {
height: 4em;
width: 4em;
font-size: 1em;
opacity: 0.7;
}
.circle-plus .circle {
position: relative;
width: 2.55em;
height: 2.5em;
}
.circle-plus .circle .horizontal {
position: absolute;
background-color: red;
width: 30px;
height: 5px;
left: 50%;
margin-left: -15px;
top: 50%;
margin-top: -2.5px;
}
.circle-plus .circle .vertical {
position: absolute;
background-color: red;
width: 5px;
height: 30px;
left: 50%;
margin-left: -2.5px;
top: 50%;
margin-top: -15px;
}
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover .hamburger-inner::after {
background: lightgrey;
}
.hamburger:hover .hamburger-inner::before {
background: lightgrey;
}
.hamburger:hover .hamburger-inner {
background: lightgrey;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: white;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse .hamburger-inner::after {
top: -20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.header--is-active {
display: flex;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function myFunction() {
$('.mobilemenusecondorder').css('display', 'block');
}
</script>
</head>
<div class="nav">
<div id="BurgerSpace">
<div class="header">
<button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="mobilemenuspace">
<div class="mobilemenuitems">
<li>
<div id="mobilemenufirstorder">
<a href="?module=*Hockey">HOCKEY</a>
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=*1.Herren">1. Herren</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*1.Damen">1. Damen</a>
</li>
<li class="menulevel1">
<a class=" " href="#">Jugend <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?action=*Hockey-Jugend">Jugend</a>
<li class="menulevel2">
<a class=" " href="?action=*MJA">M�nnliche Jugend A</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MJB">M�nnliche Jugend B</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnA">A Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnB">B Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnC">C Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnD">D Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnE">E Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*WJA">Weibliche Jugend A</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*WJB">Weibliche Jugend B</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaA">A M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaB">B M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaC">C M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaD">D M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaE">E M�dchen</a>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Erwachsene">Erwachsene</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Trainingsplan">Trainingsplan</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Schiedsrichter">Schiedsrichter</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Links">offizielle Links</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=events_gruppe&id=975">Kalender</a>
</li>
</ul>
</div>
</li>
<li>
<div id="mobilemenufirstorder">
<a href="?module=*Tennis">TENNIS</a>
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Herren">HERREN</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Damen">DAMEN</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Jugend">JUGEND</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Trainer">TRAINER</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Schule">TENNISSCHULE</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*_action_events_gruppe_id_976">KALENDER</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=platzbuchung_woche&id=117">PLATZBUCHUNG</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Links">OFFIZIELLE LINKS</a>
</li>
</ul>
</div>
</li>
<li>
<div id="mobilemenufirstorder">
<a href="?module=*UhlenTV">UHLEN.TV</a>
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder"> </div>
</li>
<li>
<div id="mobilemenufirstorder">
<a href="?module=profile">MEIN.HTCU</a>
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=profile_edit">PROFIL</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=start_news&cmd=list">ARTIKEL</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_meinerechnungen">Meine Rechnungen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_mitgliedsbescheinigung">Meine Mitgliedsbescheinigung</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_teilnahmebescheinigung">Meine Teilnahmebescheinigungen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_interessen">Meine Interessen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=events_meinetermine">Meine Termine</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_wunschmeine">Meine Support-Anfragen</a>
</li>
</ul>
</div>
</li>
<li>
<div id="mobilemenufirstorder">
<a href="?module=admin">ADMIN</a>
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">KASSE <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?module=kasse">KASSE</a>
<li class="menulevel2">
<a class=" " href="?action=kasse_tasks">Startseite</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=kasse_beleg">SPESEN</a>
</li>
<li class="dropdown dropdown-submenu menulevel2">
<a href="#">Belege <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_buchung&cmd=addmulti">Belegschnellerfassung</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_angebote">Angebote</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_rechnungneu">Neue Rechnung</a>
</li>
</ul>
</li>
<li class="menulevel2">
<a class=" " href="?action=members_beitragaktuell">BEITR�GE</a>
</li>
<li class="dropdown dropdown-submenu menulevel2">
<a href="#">Rechnungen <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=0">Rechnungen unverschickt</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=1">Rechnungen offen</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=2">Rechnungen in Bezahlung</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=3">Rechnungen bezahlt</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=6">Rechnungen alle</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_faellig">�bersichten</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_einzug">SEPA-�W/Einzug</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
<a href="#">Buchf�hrung <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_journal">Journal</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_guv">Gewinn und Verlust</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_bilanzoffenk">�bersichten</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_kontenrahmen">Kontenrahmen</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
<a href="#">Barkasse <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_barkasse&konto=1000">Hauptkasse</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
<a href="#">Bankkonten <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_kontouebersicht">(�bersicht)</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_bank&bankkonto=250">Vereinskonto Sparkasse</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_overview">�BERBLICK</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_basis">BASISKONFIG</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_optionen">OPTIONEN</a>
</li>
<li class="dropdown dropdown-submenu menulevel1">
<a href="#">VORLAGEN <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?action=admin_mailtemplates">MAIL</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_pdftemplates">PDF</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_static">HTML</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_antraege">Antr�ge</a>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_wunsch">Support-Anfragen</a>
</li>
</ul>
</div>
</li>
</div>
</div>
</div>
</div>
</div>
这是一个基本示例，您可以从这里开始，并在需要时对其进行改进。
$(function () {
var $menu = $('.menu');
var $menuItems = $menu.find('.menu-item');
for (var i = 0; i < $menuItems.length; i++) {
var $menuItem = $menuItems.eq(i);
if ($menuItem.children('.children').length > 0) {
var $expandCollapseButton = $menuItem.children('.children').hasClass('hidden')?$('<i class="fa fa-plus-square-o"></i>'):$('<i class="fa fa-minus-square-o"></i>');
$expandCollapseButton.insertAfter($menuItem.find('> a')).on('click', expandCollapse);
}
}
})
function expandCollapse(e) {
var $expandCollapseButton = $(this)
var $children = $expandCollapseButton.siblings('.children');
if($children.hasClass('hidden')){
$expandCollapseButton.removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
}else {
$expandCollapseButton.removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
}
$children.toggleClass('hidden');
}
a {
text-decoration: none;
}
body {
font-family: 'Ubuntu', sans-serif;
}
.menu-item {
margin-bottom: 10px;
min-width: 150px;
}
.menu-item>i {
margin-left: 5px;
cursor: pointer;
}
.menu-item>i:hover {
color: crimson;
}
.child-item {
margin-left: 20px;
}
.children {
height: 80px;
overflow: hidden;
transition: height .4s;
}
.children.hidden {
height: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="menu-item">
<a href="#">Item 1</a>
<div class="children">
<div class="child-item menu-item">
<a href="#">Child 1 of Item 1</a>
</div>
<div class="child-item menu-item">
<a href="#">Child 2 of Item 1</a>
</div>
<div class="child-item menu-item">
<a href="#">Child 3 of Item 1</a>
</div>
</div>
</div>
<div class="menu-item">
<a href="#">Item 2</a>
<div class="children hidden">
<div class="child-item menu-item">
<a href="#">Child 1 of Item 2</a>
</div>
<div class="child-item menu-item">
<a href="#">Child 2 of Item 2</a>
</div>
<div class="child-item menu-item">
<a href="#">Child 3 of Item 2</a>
</div>
</div>
</div>
<div class="menu-item">
<a href="#">Item 3</a>
<div class="children">
<div class="child-item menu-item">
<a href="#">Child 1 of Item 3</a>
</div>
<div class="child-item menu-item">
<a href="#">Child 2 of Item 3</a>
</div>
<div class="child-item menu-item">
<a href="#">Child 3 of Item 3</a>
</div>
</div>
</div>
<div class="menu-item">
<a href="#">Item 4</a>
</div>
<div class="menu-item">
<a href="#">Item 5</a>
</div>
</div>
我想创建一个动画汉堡菜单，其中包含可展开下一级的按钮。 我知道我的代码离那个很远，但我完全被这个问题困住了。无论如何都会向你展示我的进步。 https://jsfiddle.net/TheBB23/hnsjym9u/
我从网站上复制了这段代码，以便您清楚地了解我想要什么。 https://jsfiddle.net/TheBB23/uw2jzge1/
正如我所说，我完全被困住了，非常感谢任何帮助。
$('.circle-plus').on('click', function() {
$(this).toggleClass('opened');
})
var coll = document.getElementsByClassName("hamburger");
var hideLinks = document.querySelectorAll('.mobilemenuitems a');
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var mobilemenuitems = this.nextElementSibling;
if (mobilemenuitems.style.display === "block") {
mobilemenuitems.style.display = "none";
} else {
mobilemenuitems.style.display = "block";
}
});
}
var hamburger = document.querySelector(".hamburger");
var header = document.querySelector(".header");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
header.classList.toggle("header--is-active");
// Do something else, like open/close menu
});
document.onload = document.getElementsByClassName("mobilemenuspace")[0].style.display = "none";
document.getElementsByClassName("mobilemenuspace")[0].addEventListener("click", function() {
this.style.display = "none";
hamburger.classList.toggle("is-active");
});
body {
margin: 0px;
padding: 0px;
background: white;
color: #24603c;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
section {
height: 50px;
width: 100%;
}
/* Responsive (Smartphone) Menu */
@media (max-width: 1000px) {
/* Bild oben links Style */
.logo img {
height: 50px;
position: fixed;
float: left;
z-index: 3;
}
.login-container {
display: none;
}
.LogoutArea {
display: none;
}
#nav {
display: none;
}
/* Platzhalter Menü*/
section {
height: 50px;
width: 100%;
background: rgba(237, 237, 237, 1);
background: -moz-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237, 237, 237, 1)), color-stop(53%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
background: -o-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
background: -ms-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff', GradientType=0);
}
.nav {
height: 50px;
width: 100%;
background: #24603c;
position: fixed;
z-index: 2;
}
#BurgerSpace>div>button {
position: fixed;
right: 0px;
top: 0px;
z-index: 3;
background: none;
}
#BurgerSpace {
position: relative !important;
}
#BurgerSpace>div {
position: relative !important;
}
#BurgerSpace>div>div {
display: block;
margin-top: 50px;
}
#BurgerSpace {
width: 100%;
height: 50px;
display: block;
position: absolute;
float: right;
margin-right: 0;
padding-right: 0px;
padding-top: -2px;
}
}
.mobilemenuspace {
display: none;
width: 100%;
position: relative;
z-index: 1;
right: 0;
margin-top: 50px;
background: white;
}
@media (min-width: 1000px) {
.mobilemenuspace {
display: none !important;
}
}
#mobilemenufirstorder>a {
text-decoration: none !important;
font-weight: bold;
list-style: none !important;
font-size: 28px;
line-height: 28px;
height: 100%;
display: block;
height: 28px;
padding-top: 26px;
padding-bottom: 26px;
padding-left: 25px;
}
#mobilemenufirstorder>a:hover {
color: lightgrey !important;
}
#mobilemenufirstorder>a:hover+div {
display: block !important;
}
#mobilemenufirstorder {
height: 80px;
width: 100%;
border-bottom: solid 2px lightgrey;
border-top: solid 2px lightgrey;
list-style: none !important;
text-decoration: none !important;
}
.mobilemenuitems>li {
list-style: none;
text-decoration: none;
}
.mobilemenuitems {
display: block;
}
.mobilemenusecondorder {
display: none;
}
.closed .vertical {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
}
.closed .horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
opacity: 1;
}
.opened {
opacity: 1;
}
.opened .vertical {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
}
.opened .horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
opacity: 0;
}
.circle-plus {
height: 4em;
width: 4em;
font-size: 1em;
opacity: 0.7;
}
.circle-plus .circle {
position: relative;
width: 2.55em;
height: 2.5em;
}
.circle-plus .circle .horizontal {
position: absolute;
background-color: red;
width: 30px;
height: 5px;
left: 50%;
margin-left: -15px;
top: 50%;
margin-top: -2.5px;
}
.circle-plus .circle .vertical {
position: absolute;
background-color: red;
width: 5px;
height: 30px;
left: 50%;
margin-left: -2.5px;
top: 50%;
margin-top: -15px;
}
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover .hamburger-inner::after {
background: lightgrey;
}
.hamburger:hover .hamburger-inner::before {
background: lightgrey;
}
.hamburger:hover .hamburger-inner {
background: lightgrey;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: white;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse .hamburger-inner::after {
top: -20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.header--is-active {
display: flex;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function myFunction() {
$('.mobilemenusecondorder').css('display', 'block');
}
</script>
</head>
<div class="nav">
<div id="BurgerSpace">
<div class="header">
<button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="mobilemenuspace">
<div class="mobilemenuitems">
<li>
<div id="mobilemenufirstorder">
<a href="?module=*Hockey">HOCKEY</a>
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=*1.Herren">1. Herren</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*1.Damen">1. Damen</a>
</li>
<li class="menulevel1">
<a class=" " href="#">Jugend <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?action=*Hockey-Jugend">Jugend</a>
<li class="menulevel2">
<a class=" " href="?action=*MJA">M�nnliche Jugend A</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MJB">M�nnliche Jugend B</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnA">A Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnB">B Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnC">C Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnD">D Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnE">E Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*WJA">Weibliche Jugend A</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*WJB">Weibliche Jugend B</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaA">A M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaB">B M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaC">C M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaD">D M�dchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaE">E M�dchen</a>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Erwachsene">Erwachsene</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Trainingsplan">Trainingsplan</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Schiedsrichter">Schiedsrichter</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Links">offizielle Links</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=events_gruppe&id=975">Kalender</a>
</li>
</ul>
</div>
</li>
<li>
<div id="mobilemenufirstorder">
<a href="?module=*Tennis">TENNIS</a>
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Herren">HERREN</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Damen">DAMEN</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Jugend">JUGEND</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Trainer">TRAINER</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Schule">TENNISSCHULE</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*_action_events_gruppe_id_976">KALENDER</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=platzbuchung_woche&id=117">PLATZBUCHUNG</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Links">OFFIZIELLE LINKS</a>
</li>
</ul>
</div>
</li>
<li>
<div id="mobilemenufirstorder">
<a href="?module=*UhlenTV">UHLEN.TV</a>
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder"> </div>
</li>
<li>
<div id="mobilemenufirstorder">
<a href="?module=profile">MEIN.HTCU</a>
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=profile_edit">PROFIL</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=start_news&cmd=list">ARTIKEL</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_meinerechnungen">Meine Rechnungen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_mitgliedsbescheinigung">Meine Mitgliedsbescheinigung</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_teilnahmebescheinigung">Meine Teilnahmebescheinigungen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_interessen">Meine Interessen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=events_meinetermine">Meine Termine</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_wunschmeine">Meine Support-Anfragen</a>
</li>
</ul>
</div>
</li>
<li>
<div id="mobilemenufirstorder">
<a href="?module=admin">ADMIN</a>
<button onclick="myFunction()">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</button>
</div>
<div class="mobilemenusecondorder">
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">KASSE <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?module=kasse">KASSE</a>
<li class="menulevel2">
<a class=" " href="?action=kasse_tasks">Startseite</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=kasse_beleg">SPESEN</a>
</li>
<li class="dropdown dropdown-submenu menulevel2">
<a href="#">Belege <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_buchung&cmd=addmulti">Belegschnellerfassung</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_angebote">Angebote</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_rechnungneu">Neue Rechnung</a>
</li>
</ul>
</li>
<li class="menulevel2">
<a class=" " href="?action=members_beitragaktuell">BEITR�GE</a>
</li>
<li class="dropdown dropdown-submenu menulevel2">
<a href="#">Rechnungen <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=0">Rechnungen unverschickt</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=1">Rechnungen offen</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=2">Rechnungen in Bezahlung</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=3">Rechnungen bezahlt</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=6">Rechnungen alle</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_faellig">�bersichten</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_einzug">SEPA-�W/Einzug</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
<a href="#">Buchf�hrung <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_journal">Journal</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_guv">Gewinn und Verlust</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_bilanzoffenk">�bersichten</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_kontenrahmen">Kontenrahmen</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
<a href="#">Barkasse <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_barkasse&konto=1000">Hauptkasse</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
<a href="#">Bankkonten <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_kontouebersicht">(�bersicht)</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_bank&bankkonto=250">Vereinskonto Sparkasse</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_overview">�BERBLICK</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_basis">BASISKONFIG</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_optionen">OPTIONEN</a>
</li>
<li class="dropdown dropdown-submenu menulevel1">
<a href="#">VORLAGEN <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?action=admin_mailtemplates">MAIL</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_pdftemplates">PDF</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_static">HTML</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_antraege">Antr�ge</a>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_wunsch">Support-Anfragen</a>
</li>
</ul>
</div>
</li>
</div>
</div>
</div>
</div>
</div>
这是一个基本示例，您可以从这里开始，并在需要时对其进行改进。
$(function () {
var $menu = $('.menu');
var $menuItems = $menu.find('.menu-item');
for (var i = 0; i < $menuItems.length; i++) {
var $menuItem = $menuItems.eq(i);
if ($menuItem.children('.children').length > 0) {
var $expandCollapseButton = $menuItem.children('.children').hasClass('hidden')?$('<i class="fa fa-plus-square-o"></i>'):$('<i class="fa fa-minus-square-o"></i>');
$expandCollapseButton.insertAfter($menuItem.find('> a')).on('click', expandCollapse);
}
}
})
function expandCollapse(e) {
var $expandCollapseButton = $(this)
var $children = $expandCollapseButton.siblings('.children');
if($children.hasClass('hidden')){
$expandCollapseButton.removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
}else {
$expandCollapseButton.removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
}
$children.toggleClass('hidden');
}
a {
text-decoration: none;
}
body {
font-family: 'Ubuntu', sans-serif;
}
.menu-item {
margin-bottom: 10px;
min-width: 150px;
}
.menu-item>i {
margin-left: 5px;
cursor: pointer;
}
.menu-item>i:hover {
color: crimson;
}
.child-item {
margin-left: 20px;
}
.children {
height: 80px;
overflow: hidden;
transition: height .4s;
}
.children.hidden {
height: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="menu-item">
<a href="#">Item 1</a>
<div class="children">
<div class="child-item menu-item">
<a href="#">Child 1 of Item 1</a>
</div>
<div class="child-item menu-item">
<a href="#">Child 2 of Item 1</a>
</div>
<div class="child-item menu-item">
<a href="#">Child 3 of Item 1</a>
</div>
</div>
</div>
<div class="menu-item">
<a href="#">Item 2</a>
<div class="children hidden">
<div class="child-item menu-item">
<a href="#">Child 1 of Item 2</a>
</div>
<div class="child-item menu-item">
<a href="#">Child 2 of Item 2</a>
</div>
<div class="child-item menu-item">
<a href="#">Child 3 of Item 2</a>
</div>
</div>
</div>
<div class="menu-item">
<a href="#">Item 3</a>
<div class="children">
<div class="child-item menu-item">
<a href="#">Child 1 of Item 3</a>
</div>
<div class="child-item menu-item">
<a href="#">Child 2 of Item 3</a>
</div>
<div class="child-item menu-item">
<a href="#">Child 3 of Item 3</a>
</div>
</div>
</div>
<div class="menu-item">
<a href="#">Item 4</a>
</div>
<div class="menu-item">
<a href="#">Item 5</a>
</div>
</div>