Hallöchen zusammen!
Wie die Überschrift schon sagt, prügel ich mcih grade mit nem Fehler bei den rekursiven Menü in der Mobile-Ansicht rum und finde meinen Fehler nicht...
Folgende Problematik:
Das Menü is auf dem Handy als Hamburger-Menü zu sehen (übrigens ist die Seite noch nicht öffentlich, daher nicht gleich rumschimpfen wegen den diversen Fehlern *lach*). Das Menü klappt beim betätigen des BurgerIcons auf, wie es soll, es erscheinen auch die Links und innerhalb der Links hab ich ein paar für angemeldete User und welche für den Admin als Üntermenü.
Das ganze hab ich auch 1x öffentlich drin unter 'Rechtliches'.
Jetzt funktioniert das ganze mit dem Slide-In der UnterLinks ( <ul><ul> ) allerdings nur, wenn über besagtem 'Überlink' ein
<li>.</li>
oder
<li><br></li>
oder Ähnliches steht.... und sobald ich das da raus nehme, klappt das Slide-In der 'Unterlinks' nicht mehr. Naja, und ich versteh beim besten Willen nciht ganz warum
Zum Verständnis hier mal der HTML-Code uund der Mobile CSS-Code:
HTML
<div class="Mobile">
<nav class="nav">
<input class="menu-btn" type="checkbox" id="menu-btn">
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
<ul class="menu">
<li><br></li>
{if ($s_rang == 4)} <!-- If Admin -->
<li tabindex="0"><a>ACP</a>
<ul>
<li><a href="tpl_edit.php?rank={$s_rank}">TPL edit</a></li>
<li><a target=_blank href="tpl_edit2.php?seite=0&rank={$s_rank}" tabindex="0">TPL neu</a></li>
</ul>
</li>
{/if}
<li tabindex="0"><a href="index.php">Home</a></li>
<li tabindex="0"><a target=_blank href="https://example.com/">Shopping</a></li>
{if ($s_rang != "")} <!-- If Member -->
<li>.</li>
<li tabindex="0"><a>Member</a>
<ul>
<li><a href="u_cp.php" tabindex="0">User CP</a></li>
<li><a href="#" tabindex="0">Kalender</a></li>
</ul>
</li>
{/if}
<li tabindex="0"><a href="events.php">Nina's Events</a></li>
<li tabindex="0"><a href="kontakt.php">Kontakt</a></li>
<li tabindex="0"><a>Rechtliches</a>
<ul>
<li><a href="impressum.php" tabindex="0">Impressum</a></li>
<li><a href="#" tabindex="0">AGBs</a></li>
<li><a href="credits.php" tabindex="0">Credits</a></li>
</ul>
</li>
<li>.</li>
<li tabindex="0"><a>Rechtliches2</a>
<ul>
<li><a href="impressum.php" tabindex="0">Impressum</a></li>
<li><a href="#" tabindex="0">AGBs</a></li>
<li><a href="credits.php" tabindex="0">Credits</a></li>
</ul>
</li>
</ul>
</nav>
</div>
Alles anzeigen
Nicht wundern, das hier 'Rechtliches" 2x existiert, das dient zur Veranschaulichung der Problematik...
CSS:
...
/*NAV*/
nav {
z-index: 999;
}
nav a {
color: #000;
}
.nav ul {
margin: 0;
padding: 0;
text-align: left;
list-style: none;
overflow: hidden;
background: transparent;
}
.nav li a {
display: block;
padding: 5px 20px;
/*border-right: 1px solid #f4f4f4;*/
text-decoration: none;
list-style: none;
}
.nav li a:hover,
/*.header .menu-btn:hover*/ {
background-color: #f4f4f4;
}
nav ul ul{
position: absolute;
top: 10em;
left: 8em;
font: 0/0 serif;
/* Unternavigation ausblenden */
z-index: -1;
transition: font 0.5s;
}
nav ul li:hover ul,
nav ul a:focus ~ ul {
/* Unternavigation einblenden */
font: inherit;
z-index: auto;
}
.nav .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
z-index: 999;
}
/* menu icon */
.nav .menu-icon {
cursor: pointer;
display: inline-block;
float: left;
padding: 5px 20px;
position: relative;
user-select: none;
z-index: 999;
}
.nav .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.nav .menu-icon .navicon:before,
.nav .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.nav .menu-icon .navicon:before {
top: 5px;
}
.nav .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.nav .menu-btn {
display: none;
}
.nav .menu-btn:checked ~ .menu {
max-height: 100%;
}
.nav .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.nav .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.nav .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/*NAV Ende*/
...
Alles anzeigen
Für alle, die den Effekt in Natura sehen wollen:
Nina's Glamourlounge
(wie gesagt, Mobile-Ansicht... also Handy, Tablet oder kleiner Browser (max-Breite 768px) )
Bei "Rechtlichts" wird beim Betätigen blöderweise der Link darüber (Kontakt) geladen. Bei "Rechtliches2" (mit dem <li>.</li>darüber im HTML-Code) passiert das, was passieren soll, das Slide-In der Unterlinks kommt.
Nun ist das mit dem " . " in der Ansicht allerdings nicht so gewollt, darum die Frage, wo ist der Fehler und wie behebe ich ihn?
Ich hoffe, iwer kann mir hier helfen, ich verzweifel nämlich langsam da dran...
Übrigens arbeite ich bei der WebSite mit der SmartyEngine, aber glaube das sollte eig kein Problem sein, oder?
Besten Dank schonmal^^