Hallo Leute kann mir einer bitte helfen?
Habe probiert ein Burger Menü zu erstellen doch irgendwas passt da nicht oder fehlt mir noch.
HTML
- <!DOCTYPE html>
- <html>
- <head>
- <title>H.b.F.</title>
- <meta charset="utf-8">
- <link href="style.css" rel="stylesheet" type="text/css">
- <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
- <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $('.icon').click(function(){
- $('.icon').toggleClass('active');
- })
- })
- </script>
- </head>
- <body>
- <div class="icon">
- <div class="hamburger"></div>
- <div id="navigation">
- <div class="wrapper">
- <div id="logo">
- <p>H.b.F.</p>
- </div>
- <ul id="menu">
- <li><a href="index.html">HOME</a></li>
- <li><a href="dienstleistungen.html">DIENSTLEISTUNGEN</a></li>
- <li><a href="gallery.html">GALLERY</a></li>
- <li><a href="https://connect.shore.com/widget/david-schramm-hair-make-up-art">ONLINE TERMIN/PREISE</a></li>
- <li><a href="uber.html">ÜBER MICH</a></li>
- </ul>
- </div>
- </div>
- <div id="banner">
- <h1><img src="bilder/Logo2.png" width=800 height=350></h1>
- </div>
- <div id="content">
- <div class="wrapper">
- <p>
- Perfekt geschnitten bis zu den Haarspitzen.
- Hier bekommen Sie die beste Behandlung für Ihr Haar.
- Egal ob eine neue Frisur oder eine neue
- Haarfarbe, bei mir werden Sie sehr gut beraten.
- Schauen Sie sich gerne meine Arbeit unter "Gallery" an.
- Gerne überzeugen Sie sich persönlich und
- machen gleich einen Termin.
- </p>
- <div>
- </div>
- </body>
- </html>
Code
- * {
- margin: 0;
- padding: 0;
- font-family: Levenim MT;
- }
- .wrapper {
- width: 960px;
- max-width: 90%;
- margin: 0 auto;
- }
- #navigation {
- position: fixed;
- top: 0;
- z-index: 10;
- width: 100%;
- height: 100px;
- background-color: rgba(250, 250, 250, 0.8)
- }
- #logo {
- width: 60px;
- height: 60px;
- float: left;
- margin: 20px;
- }
- #logo p {
- font-family: Curlz MT;
- font-size: 3em;
- line-height: 1,5;
- color: #274e71;
- }
- #menu {
- float: right;
- margin-top: 44px;
- margin-right: 30px;
- }
- #menu a {
- padding-right: 30px;
- padding-top: 35px;
- text-decoration: none;
- color: #274e71;
- font-weight: 700;
- }
- #menu a:hover {
- border-top: solid white 5px;
- }
- #banner {
- width: 100%;
- height: 700px;
- z-index: 0;
- background: url(bilder/Hintergrund2.jpg);
- background-size: cover;
- }
- #banner h1 {
- padding-top: 250px;
- text-align: center;
- color: #274e71;
- font-size: 6em;
- font-family: Curlz MT;
- }
- #content {
- margin-top: 50px;
- }
- .icon {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%);
- width: 80px;
- height: 80px;
- cursor: pointer;
- background: #000;
- }
- .hamburger {
- width: 50px;
- height: 6px;
- background: black;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%);
- box-shadow: 0 2px 5px rgba(0,0,0,.2);
- transition: .5s;
- }
- .hamburger:before,
- .hamburger:after
- {
- content: '';
- position: absolute;
- width: 50px;
- height: 6px;
- background: #000000;
- box-shadow: 0 2px 5px rgba(0,0,0,.2);
- transition: .5s;
- }
- .hamburger:before {
- top: -16px;
- }
- .hamburger:after {
- top: 16px;
- }
- .icon.active .hamburger {
- background: rgba(0,0,0,0);
- box-shadow: 0 2px 5px rgba(0,0,0,0);
- }
- .icon.active .hamburger:before {
- top: 0;
- transform: rotate(45deg);
- }
- .icon.active .hamburger:after {
- top: 0;
- transform: rotate(135deg);
- }