Navbar Toggler

CuzImCloud · 8. April 2018

Hey,

Ich habe da eine Frage, undzwar kann mir jemand sagen wie ich so einen Toggler mache wie bei "https://www.griefergames.de/"

Halt wenn die Seite kleiner wird, dieser Toggler um die Navigation zu sehen?

Geht auf die Seite und macht euren Browser kleiner dann wisst ihr was ich meine :))

Hoffe mir kann da jemand sagen wie ich das mache.

Meiner sieht so aus:

Code

<div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div class="bg collapse navbar-collapse" id="myNavbar">
      <ul class="seiten navbar-nav">
      
            <div class="dropdown">
              <button class="dropbtn">DROPDOWN</button>
              <div class="dropdown-content">
                <a style="text-decoration: none; color: white;" href="#">Link 1</a>
                <a style="text-decoration: none; color: white;" href="#">Link 2</a>
                <a style="text-decoration: none; color: white;" href="#">Link 3</a>
              </div>
            </div>

        <li><a style="text-decoration: none;" href="#">FORUM</a></li>
        <li><a href="#">SHOP</a></li>
        <li><a href="#">SUPPORT</a></li>        
        <li><a href="#">TEAM</a></li>
      </ul>
    </div>

Alles anzeigen

Dieser gefällt mir jedoch nicht.

Auf Antworten würde ich mich freuen.

Sempervivum · 8. April 2018

Diese Frage wird immer wieder gestellt und ich habe vor einiger Zeit mal jemand anders die Lösung gezeigt. Aus diesem Code kannst Du ersehen, wie es funktioniert:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        input#cb-slim-menu {
            display: none;
        }

        #slim-menu {
            display: none;
        }
        #main-menu ul {
            display: flex;
            flex-direction: row;
            list-style: none;
        }

        @media screen and (max-width: 460px) {
            #main-menu ul {
                display: none;
                flex-direction: column;
            }
            input#cb-slim-menu:checked  ~ ul {
                display: flex;
            }
            #slim-menu {
                display: inline-block;
            }
        }
    </style>
</head>
<body>
    <!-- |||||||||||||||  NAVIGATION BAR  |||||||||||||||  -->
    <div class="nav-menu" id="main-menu">
        <input id="cb-slim-menu" type="checkbox" />
        <label for="cb-slim-menu"><span id="slim-menu"><i class="fa fa-fw fa-bars"></i></span></label>
        <ul>
            <li>
            <a href="http://domain.com/"><i class="fa fa-fw fa-home"></i><span class="main-menu-text"> Home</span></a>
            </li>
            <li>
                <a href="http://domain.com/about.html#testimonials"><i class="fa fa-fw fa-thumbs-o-up"></i><span class="main-menu-text"> Testimonials</span></a>
            </li>
            <li>
                <a href="http://domain.com/about.html"><i class="fa fa-fw fa-info-circle"></i><span class="main-menu-text"> About</span></a>
            </li>
            <li>
                <a href="http://domain.com/faq.html"><i class="fa fa-fw fa-question-circle"></i><span class="main-menu-text"> FAQ</span></a>
            </li>
            <li>
                <a href="http://domain.com/contact.html"><i class="fa fa-fw fa-paper-plane-o"></i><span class="main-menu-text"> Contact</span></a>
            </li>
        </ul>
    </div>

</body>
</html>

Alles anzeigen

CuzImCloud · 8. April 2018

Ich würds aber gerne so haben wie bei Griefergames, aufgrund des Dropdown Menüs

CuzImCloud · 8. April 2018

Und ehrlich gesagt verstehe ich deinen Code nicht.

Und ich möchte es gerne ohne Media Queries machen.

Sempervivum · 8. April 2018

Das sollte auch nur demonstrieren, wie man die Umschaltung zwischen dem horizontalen Menü und dem Hamburger-Menü macht. Und das geht am besten und am einfachsten mit Mediaqueries.

Wenn es dir dagegen um die Dropdown-Funktion geht, findest Du sicher Beispiele im Netz, wie man das macht.

CuzImCloud · 8. April 2018

Eben nicht. Habe bereits gesucht Deswegen frage ich hier :))

Sempervivum · 8. April 2018

Hier z. B.:

https://codepen.io/andornagy/pen/xhiJH

Brauchst Du nur die Farben anzupassen.

CuzImCloud · 8. April 2018

Da ist aber kein Navbar Toggler mit drin?

xDD

Sempervivum · 8. April 2018

Nein, das musst Du dann selber zusammen fügen.

CuzImCloud · 8. April 2018

Genau das bekomme ich ja nicht hin...

Möchte es genau wie bei Griefergames.de

Sempervivum · 8. April 2018

Ich habe mal das Codepen und die Umschaltung auf das Hamburger-Menü zusammen geführt. Fehlt noch die Formatierung des vertikalen Menüs, wenn es durch Klick auf das Hamburger-Symbol aufgeklappt wird.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        input#cb-slim-menu {
            display: none;
        }

        #slim-menu {
            display: none;
        }

        /* #main-menu ul {
            display: flex;
            flex-direction: row;
            list-style: none;
        } */

        @media screen and (max-width: 460px) {
            #main-menu ul {
                display: none;
                flex-direction: column;
            }
            input#cb-slim-menu:checked~ul {
                display: flex;
            }
            #slim-menu {
                display: inline-block;
            }
        }
    </style>
    <style>
        /* Formatierung aus Codepen */

        nav ul {
            padding: 0;
            margin: 0;
            list-style: none;
            position: relative;
            display:flex;
            flex-wrap: wrap;
        }

        nav ul li {
            display: inline-block;
            background-color: #E64A19;
        }

        nav a {
            display: block;
            padding: 0 10px;
            color: #FFF;
            font-size: 20px;
            line-height: 60px;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #000000;
        }

        /* Hide Dropdowns by Default */

        nav ul ul {
            display: none;
            position: absolute;
            top: 60px;
            /* the height of the main nav */
        }

        /* Display Dropdowns on Hover */

        nav ul li:hover>ul {
            display: inherit;
        }

        /* Fisrt Tier Dropdown */

        nav ul ul li {
            width: 170px;
            float: none;
            display: list-item;
            position: relative;
        }

        /* Second, Third and more Tiers    */

        nav ul ul ul li {
            position: relative;
            top: -60px;
            left: 170px;
        }


        /* Change this in order to change the Dropdown symbol */

        li>a:after {
            content: ' +';
        }

        li>a:only-child:after {
            content: '';
        }
    </style>
</head>

<body>
    <!-- |||||||||||||||  NAVIGATION BAR  |||||||||||||||  -->
    <nav class="nav-menu" id="main-menu">
        <input id="cb-slim-menu" type="checkbox" />
        <label for="cb-slim-menu">
            <span id="slim-menu">
                <i class="fa fa-fw fa-bars"></i>
            </span>
        </label>
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">WordPress</a>
                <!-- First Tier Drop Down -->
                <ul>
                    <li>
                        <a href="#">Themes</a>
                    </li>
                    <li>
                        <a href="#">Plugins</a>
                    </li>
                    <li>
                        <a href="#">Tutorials</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Web Design</a>
                <!-- First Tier Drop Down -->
                <ul>
                    <li>
                        <a href="#">Resources</a>
                    </li>
                    <li>
                        <a href="#">Links</a>
                    </li>
                    <li>
                        <a href="#">Tutorials</a>
                        <!-- Second Tier Drop Down -->
                        <ul>
                            <li>
                                <a href="#">HTML/CSS</a>
                            </li>
                            <li>
                                <a href="#">jQuery</a>
                            </li>
                            <li>
                                <a href="#">Other</a>
                                <!-- Third Tier Drop Down -->
                                <ul>
                                    <li>
                                        <a href="#">Stuff</a>
                                    </li>
                                    <li>
                                        <a href="#">Things</a>
                                    </li>
                                    <li>
                                        <a href="#">Other Stuff</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Graphic Design</a>
            </li>
            <li>
                <a href="#">Inspiration</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
        </ul>
    </nav>

</body>

</html>

Alles anzeigen

m.scatello · 8. April 2018

Siehe https://codepen.io/gcampfield/pen/OPvBEj

Navbar Toggler

Jetzt mitmachen!

Teilen