Erledigt - Meine fahrbare Navi - geht bestimmt noch besser?

Sargas · 26.01.2016

Moin Leute,

hab mir gerade eine ausfahrbare Navigation zusammengebastelt auf Basis eines Beispiels auf codepen (Link im title-tag). Von dem, was sie tut bin ich zufrieden, aber wie ich mich kenne kann man das noch besser lösen. Hier mal der "Code":

HTML:

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

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>http://codepen.io/Shven/pen/chKqD</title>
</head>

<body>

    <style>
        /* reset */
       
        * {
            margin: 0;
            padding: 0;
        }
       
        #wrapper {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
       
        label {
            cursor: pointer;
        }
       
        label:focus {
            outline: none;
        }
       
        .menu {
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;
            width: 100%;
            transform: translate3d(0, -300px, 0);
            transition: transform 0.35s;
        }
       
        .menu label.menu-toggle {
            width: auto;
            height: 60px;
            line-height: 0px;
            display: block;
            padding: 0;
            text-indent: -9999px;
            background: #ff0 url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50%/25px 25px no-repeat;
        }
       
       
        .menu ul li > label {
            background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50%/16px 16px no-repeat;
        }
       
        .menu ul li a,
        .menu ul li label {
            display: block;
            text-align: center;
            padding: 0 20px;
            line-height: 60px;
            text-decoration: none;
            color: #000;
        }
       
        .menu ul li a:hover,
        .menu ul li label:hover {
            color: #666;
        }
        /* hide inputs */
       
        .menu-checkbox {
            display: none;
        }
        /* hide navigation icon for sublabels */
       
        .menu .menu label.menu-toggle {
            background: none;
        }
        /* fade in checked menu */
       
        .menu-checkbox:checked ~ .menu {
            transform: translate3d(0, 0, 0);
        }
       
         .menu-checkbox:checked ~ .rest {
            margin-top: 375px;
        }
        /* for show */
       
        html,
        body {
            height: 100%;
            background-color: black
        }
       
        .rest   {
            margin-top: 75px;
            transition: margin-top 0.35s;
        }
       
       
    </style>

    <div id="wrapper">

        <input type="checkbox" id="menu" name="menu" class="menu-checkbox">
        <div class="menu">
            <ul>
                <li>
                    <a href="#">Menu-1</a>
                </li>
                <li>
                    <a href="#">Menu-2</a>
                </li>
                <li>
                   <a href="#">Menu-3</a>
                </li>
                <li>
                    <a href="#">Menu-4</a>
                </li>
                <li>
                 <a href="#">Menu-5</a>
                </li>
            </ul>
            <label class="menu-toggle" for="menu"><span>Toggle</span></label>
        </div>
       
       
       
        <div class="rest">
             <style>p{margin: auto; width: 200px;color:aliceblue;}</style>
        <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. 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>
        </div>
       
      
    </div>
    <!-- #wrapper -->


</body>

</html>

Auf Javascript/jQuery habe ich bewusst verzichtet. Bin für jeden Tipp dankbar.

Grüße

sargas

afr0kalypse · 28.01.2016

Hi.
Ich hab mir den Code jetzt nicht im Detail angesehen aber mir ist gleich folgendes aufgefallen: Wenn ich eine Ebene tief bin, sehe ich nicht wie ich zurück komme.
Ändere doch das Burger Icon sobald du eine Ebene tief bist. Dann weiß der User wo er hin klicken muss.

Sargas · 28.01.2016

Danke dir, das hat mich bei der Vorlage auch schon gestört, ist schon auf der To-Do Liste.

Bitace · 25.05.2016

Besteht das Problem dennoch? Würde mich sonst zur Hilfe anbieten!
Liebe Grüße
Lukas

Sargas · 25.05.2016

Ich arbeite damit aktuell nicht weiter, aber wenn du eine Idee dafür hast oder dich damit befassen willst, ist es sicher interessant, nicht nur für mich.