[FRAGE] CSS eines "Hamburger Menüs" macht Probleme

schlegel.berlin · 26. März 2017

CSS eines "Hamburger Menüs" macht Probleme

Liebe Freunde,

lange war ich nicht mehr hier im Forum, weil ich viel anderes zu tun hatte und dazu noch längere Zeit gar nicht in Deutschland war.

Nun bin ich seit einiger Zeit wieder da und habe promt wieder ein Problem, das ich offenbar nicht alleine gelöst bekomme...

In die Mobilversion (PHP) der Webseite eines guten Freundes versuche ich ein "Hamburger Menü" einzubinden.
Das ist ansich ja auch kein Problem, aber:

Sobald ich das CSS zu diesem "Hamburger" einbinde, funktionieren die Links (<a herf...) im Seitencontent nicht mehr.
Die Links lassen sich nicht mehr anklicken.

Lasse ich das CSS weg, sieht der "Hamburger" logischerweise zwar nicht mehr aus wie er soll, es erscheinen nur noch die Menü-Links (<ul><li>...</li></ul>, aber die Links im Seitencontent (<a href...) funktionieren...

Das ist der "Hamburger":

HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no"/>


    <script src="menu_mobil/jquery-2.1.1.min.js"></script>
    <script src="menu_mobil/jquery-ui.min.js"></script>

    <script src="menu_mobil/hamburger.js"></script>

    <!-- Sobald ich das CSS importiere, sind die Probleme mit den Lnks auf der Seite da -->
    <link rel="stylesheet" type="text/css" media="all" href="menu_mobil/hamburger.css">

</head>

<body>
<div align="left">
<!--This wrapping container is used to get the width of the whole content-->
<div id="container">
	<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr><td>
	<div align="right">
    <!--The Hamburger Button in the Header-->
    <header>
        <div id="hamburger">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </header>

    <!--The mobile navigation Markup hidden via css-->
    <nav>
        <ul>
        <li><a href="m-home.php">Home</a></li>
		<li><a href="m-info.php" style="cursor:pointer">Wer wir sind & Unser Konzept</a></li>
		<li><a href="m-kuenstler.php" style="cursor:pointer">Links zu unseren Künstlern</a></li>
		<li><a href="m-impressum.php" style="cursor:pointer">Impressum & Kontakt</a></li>
		<li><a href="m-disclaimer.php" style="cursor:pointer">Disclaimer & Datenschutz</a></li>
        </ul>
    </nav>
	</td></tr>
	</table>

</div>
</div>
</div>
</body>
</html>

Und hier ist das CSS:

Code:

@import url(htt://fonts.googleapis.com/css?family=PT+Sans+Narrow);

html {
overflow-y:scroll;
}

body {
    margin: 0;
    padding: 0;
overflow-x: hidden;
    font-family: 'PT sans Narrow', sans-serif;
    font-size: 32px;
}


header {
    background:tansparent;
    padding: 10px;
    text-decoration: none;
    position: relative;
    width: 75px;
    z-index: 1;
    -webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.9);
}

#hamburger {
    border: 4px solid #FFFFFF;
    border-radius: 3px 3px 3px 3px;
    cursor: pointer;
    display: block;
    height: 41px;
    padding: 3px;

    position: relative;
    width: 61px;
    background: #202020;
    background: -moz-linear-gradient(top, #202020 0%, #202020 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #202020), color-stop(100%, #202020));
    background: -webkit-linear-gradient(top, #202020 0%, #202020 100%);
    background: -o-linear-gradient(top, #202020 0%, #202020 100%);
    background: -ms-linear-gradient(top, #202020 0%, #202020 100%);
    background: linear-gradient(to bottom, #202020 0%, #202020 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#202020', endColorstr='#202020', GradientType=0);
}

#hamburger div {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 3px 3px 3px 3px;
    height: 4px;
    margin-top: 6px;
    width: 59px;
}


nav {
padding-right:20px;
    opacity: 0;
    left: 0px;
    top: 0px;
    position: fixed;
    z-index: 0;
    width: 430px;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    background: #3e3c3d;
    background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3c3d), color-stop(100%, #2d2c2d));
    background: -webkit-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
    background: -o-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
    background: -ms-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
    background: linear-gradient(to bottom, #3e3c3d 0%, #2d2c2d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e3c3d', endColorstr='#2d2c2d', GradientType=0);
}


nav ul {
    list-style: none;
    margin: 0;
    width: 100%;
    padding: 0;
}

nav li {
    position: relative;
	font-family: 'PT sans Narrow', sans-serif;
    font-size: 32px;
    font-weight: bold;
    border-bottom: 4px solid #222222;
    border-top: 4px solid #999999;
    padding: 15px;
}

nav li a {
    color: #fff;
    text-decoration: none;
}

#contentLayer {
    display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
}

Und so sieht die Seite (vereinfacht) mit dem icludierten "Hamburger" aus:

HTML:

<html>
<head>
</head>
<body>

<img src="images_layout/bg_navigation.jpg" style="width:100%;height:100px;border-bottom:solid 1px #FE8E28;position:fixed">
<div align="right" style="border:none;width:98%;margin-top:14px;position:fixed;z-index:99999;">
<? 
include 'navigation_mobil.php';
?>
</div>

<!-- Dieser Link lässtsich nicht mehr anklicken -->
<a href = "seite.php">Seite</a>

</body>
</html>

Hat jemand von Euch eine Idee, woran der Fehler liegen könnte?
Ich habe nicht den geringsten Schimmer, wo die Ursache des Problems liegt, weil ich schlicht nicht verstehe,wie das CSS auf die Funktion der Links im Seitencontent Eindluss nimmt ...

Für Eure Hilfe wäre ich Euch seher dankbar...

LG, Karin

- - - Aktualisiert - - -

ERLEDIGT!

Hab den Fehler gefunden, durch Versuch und Irrtum.
Verstehen tue ich es aber nicht, weshalb das die Ursache war...

Im CSS für den Hamburger ist die Breite die linksbündige Navigation (width: 430px) definiert.
Alle Links die innerhalb dieses Breichs liegen, funktionieren nicht, auch wenn der Navigationslayer ausgeblendet ist.
Also muss vermutlich der z-index des Layers, wen er "unschtbar" ist, dennoch unterhalb dessen sein, der den content definiert...
Icwerde das mal versuchen...
Vielen Dank im Voraus und noch einen schönen Rest vom Sonntag,

kkapsner · 26. März 2017

schlegel.berlin schrieb:
Alle Links die innerhalb dieses Breichs liegen, funktionieren nicht, auch wenn der Navigationslayer ausgeblendet ist.

Wahrscheinlich wird da nicht alles ausgeblendet und es liegt noch etwas "über" den Links. Ich würde da nicht am z-index rumbasteln, sondern das einfach komplett auf display: none setzen.

[FRAGE] CSS eines "Hamburger Menüs" macht Probleme

schlegel.berlin

New member

kkapsner

Super Moderator