Ergebnis 1 bis 2 von 2
  1. #1
    schlegel.berlin ist offline Routinier
    registriert
    06-03-2005
    Beiträge
    281

    Question 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-Code:
    <!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&uuml;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-Code:
    <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,
    Geändert von schlegel.berlin (26-03-2017 um 17:40 Uhr) Grund: Schreibfehler

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.489

    AW: CSS eines "Hamburger Menüs" macht Probleme

    Zitat Zitat von schlegel.berlin Beitrag anzeigen
    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.

Ähnliche Themen

  1. <span style="float:right;"> in <div> Tag macht Probleme
    Von Koksnuss im Forum CSS und (X)HTML
    Antworten: 7
    Letzter Beitrag: 02-07-2006, 21:12
  2. Probleme mit dem "Status" eines Links (Eventhandler)
    Von laikabijou im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 08-03-2006, 12:26
  3. Trouble mit Einbau eines "UPDATE" Statements aus dynamischer Linkliste: "Stock im Kop
    Von Krawallfisch im Forum Serverseitige Programmierung
    Antworten: 3
    Letzter Beitrag: 09-01-2006, 15:45
  4. Antworten: 15
    Letzter Beitrag: 12-11-2005, 00:22
  5. Antworten: 6
    Letzter Beitrag: 22-05-2003, 11:20

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •