|
|||
Menu Button läßt sich nicht fixen
Hallo zusammen!
Vielleicht kann mir ja jemand einen Tipp geben. Ich bastel gerade an einer Seite, die einen fixierten Header haben soll. Soweit so gut. Mein Problem ist der Menubutton. Da er nicht im Header liegt, scrollt er immer mit dem Seiteninhalt mit. Wenn ich ihn auf "fixed" setze, wandert er ganz nach links (wo er nicht hin soll). Bei "absolute" ist er zwar in der richtigen Position, läßt sich aber nicht mehr klicken. Wenn ich ihn innerhalb des Headers platziere, habe ich das gleiche Problem wie bei "position: absolute". Vielleicht kann mir ja jemand aufs Pferd helfen. Lieben Dank. Code:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Unbenanntes Dokument</title> <script src="js/respond.min.js"></script> <style type="text/css"> * { padding: 0; margin: 0;} body { font-family: sans-serif; background: rgba(237,237,237,1); background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(240,240,240,1) 23%, rgba(254,254,254,1) 82%, rgba(254,254,254,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237,237,237,1)), color-stop(23%, rgba(240,240,240,1)), color-stop(82%, rgba(254,254,254,1)), color-stop(100%, rgba(254,254,254,1))); background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(240,240,240,1) 23%, rgba(254,254,254,1) 82%, rgba(254,254,254,1) 100%); background: -o-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(240,240,240,1) 23%, rgba(254,254,254,1) 82%, rgba(254,254,254,1) 100%); background: -ms-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(240,240,240,1) 23%, rgba(254,254,254,1) 82%, rgba(254,254,254,1) 100%); background: linear-gradient(to bottom, rgba(237,237,237,1) 0%, rgba(240,240,240,1) 23%, rgba(254,254,254,1) 82%, rgba(254,254,254,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#fefefe', GradientType=0 ); background-size:100% 100%; background-attachment:fixed; } a { text-decoration: none; color: #88A5CC;} li { list-style-type:none;} h1 { text-align:left; font-size:24px; font-weight: 200; margin-bottom:30px; color:#333; } h2 { text-align:center; font-size:17px; font-weight: 200; margin-bottom:10px; color:#666; } p{ text-align:justify; font-size:16px; font-weight: 300; line-height:24px; margin-bottom:24px; color:#333; } header { width:100%; height: 170px; position:fixed; margin: 0 auto; padding-top:5px; background:#fff; border-bottom:1px solid #EEE; -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.3); box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.3); z-index:100; } #brand{ float: left; width:50%; margin-left:25%; line-height:170px; color:E5DAC0; font-size:25px; font-weight:bolder; } nav {width: 100%; text-align: center;} nav a { display:block; padding:15px 0; border-bottom: 1px solid #fff; color:#fff; } nav li:last-child a {border-bottom: none;} nav a:hover { background: url(img/black.png); color: C5AD74; -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.3); box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.3); } /*--------------------------------------------*/ .menu { width:200px; margin-top:250px; height:auto; position: absolute; z-index: 998; background: url(img/black.png); left:-210px; transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; border-top:2px solid #fff; border-bottom:2px solid #fff; border-right:2px solid #fff; border-bottom-right-radius: 10px; border-top-right-radius:10px; -webkit-box-shadow: 5px 3px 5px -1px rgba(0,0,0,0.5); -moz-box-shadow: 5px 3px 5px -1px rgba(0,0,0,0.5); box-shadow: 5px 3px 5px -1px rgba(0,0,0,0.5); } .menu-icon { padding: 10px 20px; background:url(img/black.png); color:#fff; cursor: pointer; float: right; position:relative; z-index:999; margin-top: 30px; margin-right:40px; border-radius: 5px; -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); } .menu-icon:hover { background:#2E2E2E; -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.8); -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.8); box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.8); } #menuToggle{display:none;} #menuToggle:checked ~ .menu {position: absolute; left: 0;} main { width: 50%; height:100%; margin:0 20%; padding:0; background: none; float:left; color:#fff; clear:both; border-radius: 0; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } section{ width: 100%; margin:0 0 50px 0; padding:0; } .bild { width:100%; margin:0 0 20px 0; opacity: 1.0; border-radius: 10px; border:2px solid #fff; -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); } #column { width:100%; float:left; min-height:120px; padding:20px; background:url(img/bg_column.fw.png) no-repeat; background-size: cover; } #column1{ width:30%; height:100%; margin:50px 5% 50px 0; float:left; border-radius: 10px; border:2px solid #fff; -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); } #column2{ width:30%; height:100%; margin:50px 0 50px 0; float:left; border-radius: 10px; border:2px solid #fff; -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); } #column3{ width:30%; height:100%; margin:50px 0 50px 0; float:right; border-radius: 10px; border:2px solid #fff; -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5); } </style> </head> <body> <header> <div id="brand"><img src="img/logo.png" width="100%"></div> </header> <input type="checkbox" id="menuToggle"> <label for="menuToggle" class="menu-icon">☰ Menu</label> <nav class="menu"> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">work</a></li> <li><a href="#">impressum</a></li> <li><a href="#">contact</a></li> </ul> </nav> <main> <section> <img class="bild" src="img/2-2.jpg"> <h1>Herzlich willkommen bei Houllich's Entrümplungsdienst</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est </p> </section> <section> <div id="column"> <div id="column1"> <h2>Wohnungsauflösung</h2> <img src="img/fotolia_98092901.png" width="100%"> </div> <div id="column2"> <h2>Entrümplung</h2> <img src="img/fotolia_98092901.png" width="100%"> </div> <div id="column3"> <h2>Umzüge</h2> <img src="img/fotolia_21261513.png" width="100%"> </div> </div> </section> </main> </body> </html> |
Sponsored Links |
Sponsored Links |
|
|||
Zitat:
Danke erst mal für deinen Kommentar. Hättest Du es vielleicht bitte ein wenig detaillierter? Ich komm nämlich nicht wirklich weiter mit deiner Antwort. |
|
||||
(erste Antwort gelöscht - ich hab's verstanden)
Nachtrag: Ich hatte heute morgen nur den klick Event überprüft und nicht gesehen, dass da noch ein CSS "Event" eingebaut war, da er ja nicht funktioniert (Deine Fehlerbeschreibung ist nicht sonderlich hilfreich für jemanden der nicht neben dir sitzt und weiss wovon du sprichst). damit der Event funktioniert muss du das Menu auch in den header einbauen. Geändert von protonenbeschleuniger (04.04.2016 um 19:36 Uhr) |
|
|||
Zitat:
Danke. Ich probier das mal aus mit dem Menu. |
|
||||
Ein wenig OffTopic:
Warum viele für das Verstecken / Zeigen der Navigation extra zwei „frei schwimmenden“ Elementen nehmen, ist mir nicht bekannt – vielleicht mögen manche einfach Hacks nutzen (Advanced Checkbox Hack). Eine nutzerfreundliche Navigation könnte (sollte) ein titel-Attribut oder eine Überschrift haben. https://www.w3.org/wiki/HTML/Elements/nav Semantic navigation with the nav element | HTML5 Doctor Bei einer Überschrift hat man auch gleich das „extra“ Element, was zu einem Button umgestylt werden kann. Möglich wäre dann so ziemlich alles: pure CSS-Nav, JavaScript Effekte, Buttons Gestaltung mit Hintergrundgrafiken oder rein mit CSS gebastelte Icons, etc. Kleines Beispiel (nur die Grundfunktionen) : tests.emil-webdesign.net/ResponsiveNav/ . |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit PullDown Menu auf ipad/iphone | smisonline2 | CSS | 1 | 13.05.2013 18:13 |
Hilfe css Menu center | xXcyberXx | CSS | 5 | 28.11.2010 20:51 |
Linkverhalten im IE6 | ChOpSueY! | CSS | 19 | 19.05.2008 23:48 |
Drop Down Menu Positionsproblem | Schky | CSS | 4 | 21.04.2008 14:09 |
Problem mit vertikaler Navigation | Krissie | CSS | 0 | 15.08.2007 13:51 |