css mobile menu

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

cyclestores

Neues Mitglied
30 Mai 2018
9
0
1
55
Hallo liebe Leute,

ich bin mit meinem Latein am Ende.
Ich bin von naturaus faul und nutze gerne Code der schon bei mir irgendwo funktioniert. So auch jetzt.
es geht um die pseudo klasse :target in css
egal wo und wie ich a:target einbinde diese Seite reagiert nicht.
hier mal ein paar Auschnitte.

Navogation:
<!--Navigation der Homepage-->
<nav>
<a href="#nav-m" id="nav-m">
<label for="hamburg" class="hamburg">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</label>
</a>
<a href="#" class="close">
<label for="hamburg" class="hamburg">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</label>
</a>
<ul class="menu" id="menu">
<li><a href="<?php echo PROJECT_HTTP_ROOT."/index.php";?>">Home</a></li>
<li><a href="<?php echo PROJECT_HTTP_ROOT."/sites/termine.php";?>">Termine</a></li>
<li><a href="<?php echo PROJECT_HTTP_ROOT."/sites/technic.php";?>">Technik</a></li>
<li><a href="<?php echo PROJECT_HTTP_ROOT."/sites/veranstalter.php";?>">Veranstalterbereich</a></li>
<li><a href="<?php echo PROJECT_HTTP_ROOT."/sites/reference.php";?>">ergebnisse</a></li>
</ul>
</nav><!-- end of nav -->
und hier die scss

@media screen and (max-width: 960px) {
/*Icon*/
label.icon {
display: block;
background: #555;
width: 55px;
height: 40px;
position: relative;
margin-left: auto;
margin-right: auto;
border-radius: 4px;
}
.line {
position: absolute;
left: 3px;
height: 3px;
width: 49px;
background: #fff;
border-radius: 2px;
display: block;
transition: 0.5s;
transform-origin: center;
}
.line:nth-child(1) {
top: 6px;
}
.line:nth-child(2) {
top: 16px;
}
.line:nth-child(3) {
top: 26px;
}
/** ende icon*/
/*Formatierung Mobiles Menue*/
nav {
background-color: transparent;
margin-right: 1em;
}
nav ul {
top: 5em;
position: absolute;
background: #ccc;
width: 80%;
left: -145%;
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: block;
text-align: left;
padding: 0em 0.5em;
border-bottom: 2.5px solid #fff;
}
nav ul li a {
height: 100%;
width: 100%;
padding: 1em 0;
border-left: $navbarbackground;
}
nav ul.menu li a:hover {
border-bottom: 0;
}
nav a#nav-m,
nav a.close {
height: auto;
}
nav>.close,
nav a#nav-m:target {
display: none;
}
nav a#nav-m:target~ul,
nav a#nav-m:target~.close {
display: inline-block;
}
nav a#nav-m:target~.close {
position: absolute;
left: -10%;
}
nav a#nav-m:target~ul {
left: 0;
}
}

als Versuch habe ich auch mal in der index einfachen Code eingefügt mit :target und nichts.
ich habe keine Ahnung was target blockt
Ich wäre für einen Tipp dankbar.
 
Werbung:

Latest posts