<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav id="nav" data-editor="colorSettingsContent"> <div class="container"> <input id="open-menu" class="open-check" type="checkbox"> <div class="hold-toogle"> <label for="open-menu" class="toogle-menu"> Men� <span class="t"></span> <span class="c"></span> <span class="b"></span> </label> </div> <div class="menu-holder"> <label for="open-menu" class="close-menu">Men� schlie�en <i class="fa fa-close" aria-hidden="true"></i></label> <ul id="topnav" data-editor="nav"> <li><a target="_blank" href="#">Shop</a></li> <li> <input class="open-check" id="check01" type="checkbox"> <a target="_blank" href="">Damen</a> <label for="check01">Damen<i class="fa fa-angle-right" aria-hidden="true"></i></label> <div class="children-holder"> <ul class="children"> <li><label for="check01" class="back-label"><i class="fa fa-angle-left" aria-hidden="true"></i> Zur�ck</label></li> <li><a target="_blank" href="#">Damen</a></li> <li> <input class="open-check" id="check01_1" type="checkbox"> <a target="_blank" href="#">Bekleidung</a> <label for="check01_1">Bekleidung<i class="fa fa-angle-right" aria-hidden="true"></i></label> <ul class="children2"> <li><label for="check01_1" class="back-label"><i class="fa fa-angle-left" aria-hidden="true"></i> Zur�ck</label></li> <li><a target="_blank" href="#">Bekleidung</a></li> <li><a target="_blank" href="#">Kleider</a></li> <li><a target="_blank" href="#">Jeans</a></li> <li><a target="_blank" href="#">R�cke</a></li> </ul> </li> <li> <input class="open-check" id="check01_2" type="checkbox"> <a target="_blank" href="#">Schuhe</a> <label for="check01_2">Schuhe<i class="fa fa-angle-right" aria-hidden="true"></i></label> <ul class="children2"> <li><label for="check01_2" class="back-label"><i class="fa fa-angle-left" aria-hidden="true"></i> Zur�ck</label></li> <li><a target="_blank" href="#">Schuhe</a></li> <li><a target="_blank" href="#">Stiefel</a></li> <li><a target="_blank" href="#">Sneaker</a></li> <li><a target="_blank" href="#">Pumps</a></li> </ul> </li> <li> <input class="open-check" id="check01_3" type="checkbox"> <a target="_blank" href="#">Accessoires</a> <label for="check01_3">Accessoires<i class="fa fa-angle-right" aria-hidden="true"></i></label> <ul class="children2"> <li><label for="check01_3" class="back-label"><i class="fa fa-angle-left" aria-hidden="true"></i> Zur�ck</label></li> <li><a target="_blank" href="#">Accessoires</a></li> <li><a target="_blank" href="#">Taschen</a></li> <li><a target="_blank" href="#">Uhren</a></li> <li><a target="_blank" href="#">Schmuck</a></li> </ul> </li> <li class="children-img"> <img src="https://template.threendy.com/template1/template/images/gallery-main.jpg" alt="image"> </li> </ul> </div> </li> <li> <input class="open-check" id="check02" type="checkbox"> <a target="_blank" href="">Herren</a> <label for="check02">Herren<i class="fa fa-angle-right" aria-hidden="true"></i></label> <div class="children-holder"> <ul class="children"> <li><label for="check02" class="back-label"><i class="fa fa-angle-left" aria-hidden="true"></i> Zur�ck</label></li> <li><a target="_blank" href="#">Herren</a></li> <li> <input class="open-check" id="check02_1" type="checkbox"> <a target="_blank" href="#">Bekleidung</a> <label for="check02_1">Bekleidung<i class="fa fa-angle-right" aria-hidden="true"></i></label> <ul class="children2"> <li><label for="check02_1" class="back-label"><i class="fa fa-angle-left" aria-hidden="true"></i> Zur�ck</label></li> <li><a target="_blank" href="#">Bekleidung</a></li> <li><a target="_blank" href="#">Hemden</a></li> <li><a target="_blank" href="#">Jacken</a></li> <li><a target="_blank" href="#">Jeans</a></li> </ul> </li> <li> <input class="open-check" id="check02_2" type="checkbox"> <a target="_blank" href="#">Schuhe</a> <label for="check02_2">Schuhe<i class="fa fa-angle-right" aria-hidden="true"></i></label> <ul class="children2"> <li><label for="check02_2" class="back-label"><i class="fa fa-angle-left" aria-hidden="true"></i> Zur�ck</label></li> <li><a target="_blank" href="#">Schuhe</a></li> <li><a target="_blank" href="#">Sneaker</a></li> <li><a target="_blank" href="#">Halbschuhe</a></li> <li><a target="_blank" href="#">Sportschuhe</a></li> </ul> </li> <li> <input class="open-check" id="check02_3" type="checkbox"> <a target="_blank" href="#">Accessoires</a> <label for="check02_3">Accessoires<i class="fa fa-angle-right" aria-hidden="true"></i></label> <ul class="children2"> <li><label for="check02_3" class="back-label"><i class="fa fa-angle-left" aria-hidden="true"></i> Zur�ck</label></li> <li><a target="_blank" href="#">Accessoires</a></li> <li><a target="_blank" href="#">G�rtel</a></li> <li><a target="_blank" href="#">Uhren</a></li> <li><a target="_blank" href="#">Krawatten</a></li> </ul> </li> <li class="children-img"> <img src="https://template.threendy.com/template1/template/images/gallery-main-2.jpg" alt="image"> </li> </ul> </div> </li> <li> <input class="open-check" id="check03" type="checkbox"> <a target="_blank" href="">Kinder</a> <label for="check03">Kinder<i class="fa fa-angle-right" aria-hidden="true"></i></label> <div class="children-holder"> <ul class="children"> <li><label for="check03" class="back-label"><i class="fa fa-angle-left" aria-hidden="true"></i> Zur�ck</label></li> <li><a target="_blank" href="#">Kinder</a></li> <li> <input class="open-check" id="check03_1" type="checkbox"> <a target="_blank" href="#">Bekleidung</a> <label for="check03_1">Bekleidung<i class="fa fa-angle-right" aria-hidden="true"></i></label> <ul class="children2"> <li><label for="check03_1" class="back-label"><i class="fa fa-angle-left" aria-hidden="true"></i> Zur�ck</label></li> <li><a target="_blank" href="#">Bekleidung</a></li> <li><a target="_blank" href="#">Shirts</a></li> <li><a target="_blank" href="#">Hosen</a></li> <li><a target="_blank" href="#">Geschenke</a></li> </ul> </li> <li> <input class="open-check" id="check03_2" type="checkbox"> <a target="_blank" href="#">Schuhe</a> <label for="check03_2">Schuhe<i class="fa fa-angle-right" aria-hidden="true"></i></label> <ul class="children2"> <li><label for="check03_2" class="back-label"><i class="fa fa-angle-left" aria-hidden="true"></i> Zur�ck</label></li> <li><a target="_blank" href="#">Schuhe</a></li> <li><a target="_blank" href="#">Sneaker</a></li> <li><a target="_blank" href="#">Ballerinas</a></li> <li><a target="_blank" href="#">Sportschuhe</a></li> </ul> </li> <li> <input class="open-check" id="check03_3" type="checkbox"> <a target="_blank" href="#">Accessoires</a> <label for="check03_3">Accessoires<i class="fa fa-angle-right" aria-hidden="true"></i></label> <ul class="children2"> <li><label for="check03_3" class="back-label"><i class="fa fa-angle-left" aria-hidden="true"></i> Zur�ck</label></li> <li><a target="_blank" href="#">Accessoires</a></li> <li><a target="_blank" href="#">M�tzen</a></li> <li><a target="_blank" href="#">Schals</a></li> <li><a target="_blank" href="#">Baby-Zubeh�r</a></li> </ul> </li> <li class="children-img"> <img src="https://template.threendy.com/template1/template/images/gallery-main-3.jpg" alt="image"> </li> </ul> </div> </li> <li><a target="_blank" href="#">Marken</a></li> <li><a target="_blank" href="#">Sale%</a></li> </ul> </div> <label for="open-menu" class="overlay"></label> </div> </nav>

/*! CSS Used from: https://template.threendy.com/template1/template/css/all.css ; media=all */ @media all{ .wrapper input{vertical-align:middle;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:inset rgba(0, 0, 0, 0) 0 0 0;-moz-box-shadow:inset rgba(0, 0, 0, 0) 0 0 0;box-shadow:inset rgba(0, 0, 0, 0) 0 0 0;-webkit-appearance:none;} .wrapper input::-moz-focus-inner{padding:0;border:0;} .wrapper label{cursor:pointer;} .wrapper nav{display:block;} .wrapper img{border:0;border-style:none;vertical-align:top;-ms-interpolation-mode:bicubic;vertical-align:baseline;font-weight:inherit;font-family:inherit;font-style:inherit;font-size:100%;border:0 none;outline:0;padding:0;margin:0;} .wrapper a,.wrapper a:link,.wrapper a:visited{color:#000;text-decoration:none;} .wrapper a:focus,.wrapper a:hover{outline:none;outline:0;} .container{max-width:1270px;margin:0 auto;padding:0 20px;} #nav{width:100%;z-index:10;position:relative;background:#f5f5f5;} #nav:after{content:"";display:block;clear:both;} .open-check{display:none;} #topnav{list-style:none;margin:0;padding:0;text-align:center;font-size:0px;line-height:0px;position:relative;} #topnav:after{content:"";display:block;clear:both;} #topnav > li{display:inline-block;vertical-align:top;font-size:16px;line-height:18px;} #topnav > li:last-child{border:none;} #topnav > li > a{padding:24px 29px;font-weight:400;display:block;color:#000!important;text-decoration:none;position:relative;-webkit-transition:background .2s ease-in-out;-moz-transition:background .2s ease-in-out;-ms-transition:background .2s ease-in-out;-o-transition:background .2s ease-in-out;transition:background .2s ease-in-out;} #topnav > li:hover > a{background:rgba(255,255,255,0.3);} #topnav > li > .open-check + a:before{content:'';position:absolute;top:50%;right:13px;width:0;margin:-2px 0 0;height:0;border-style:solid;border-width:4px 4px 0 4px;border-color:#000 transparent transparent transparent;} .children-holder{position:absolute;top:100%;left:0;z-index:100;overflow:hidden;width:100%;} .children{text-align:left;background:#de183c;width:100%;list-style:none;display:block;padding:20px 10px 10px 20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:5;margin:-500px 0 0;-webkit-transition:margin .5s ease-in-out;-moz-transition:margin .5s ease-in-out;-ms-transition:margin .5s ease-in-out;-o-transition:margin .5s ease-in-out;transition:margin .5s ease-in-out;} #topnav > li:hover .children{margin:0;} .children > li{margin:0 0 20px;display:inline-block;vertical-align:top;width:24.5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;} .children > li.children-img{text-align:right;} .children > li.children-img img{width:250px;height:auto;} .children2{list-style:none;padding:20px 0 0;margin:0;} .children2 li{position:relative;margin:0 0 10px;padding:0 0 0 15px;} .children2 > li:before{content:'';position:absolute;top:50%;left:0;margin:-2px 0 0;height:4px;width:4px;background:#fff;} .children > li > a,.children2 > li > a{text-decoration:none;position:relative;font-size:16px;line-height:18px;color:#fff!important;} .children2 > li > a{font-size:13px;line-height:15px;} .children > li > a:before,.children2 > li > a:before{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:#fff;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transition:transform .2s ease-in-out;-moz-transition:transform .2s ease-in-out;-ms-transition:transform .2s ease-in-out;-o-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;} .children > li > a:hover:before,.children2 > li > a:hover:before{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);} #topnav > li > label,.children > li > label{display:none;} .hold-toogle{float:right;display:none;} .toogle-menu{z-index:61;height:17px;position:relative;cursor:pointer;display:none;padding:0 35px 0 0;color:#000;line-height:17px;} .toogle-menu > span{position:absolute;right:0;height:3px;width:30px;background:#000;} .toogle-menu .t{top:0;} .toogle-menu .c{top:7px;} .toogle-menu .b{top:14px;} .close-menu{display:none;} #topnav > li > .open-check ~ .children-holder .children > li:nth-child(1),#topnav > li > .open-check ~ .children-holder .children > li:nth-child(2),.children > li > .open-check ~ .children2 > li:nth-child(1),.children > li > .open-check ~ .children2 > li:nth-child(2){display:none;} .overlay{display:none;} .open-check{display:none;} .open-check{display:none;} .open-check{display:none;} @media (max-width: 1270px){ .container{width:95vw;} } @media (max-width: 1200px){ .children > li.children-img img{width:200px;} .container{width:91vw;} } @media (max-width: 1024px){ .container{width:89vw;} #nav{padding:10px 0;margin:0 0 10px;} #topnav{position:static;float:none;margin:0;padding:0;width:100%;background:none;} #topnav:after{display:none;} #topnav > li > .open-check ~ .children-holder .children > li:nth-child(1),#topnav > li > .open-check ~ .children-holder .children > li:nth-child(2),.children > li > .open-check ~ .children2 > li:nth-child(1),.children > li > .open-check ~ .children2 > li:nth-child(2){display:block;} .hold-toogle{display:block;} .toogle-menu{display:block;} .menu-holder{position:fixed;top:0;right:-300px;height:100%;overflow:hidden;overflow-y:auto;width:280px;background:#de183c;z-index:1005;-webkit-transition:right .2s ease-in-out;-moz-transition:right .2s ease-in-out;-ms-transition:right .2s ease-in-out;-o-transition:right .2s ease-in-out;transition:right .2s ease-in-out;} #nav .open-check:checked ~ .menu-holder{right:0;} #topnav > li{display:block;padding:0;position:static;margin:0;text-align:left;float:none;} #header #topnav > li:before{display:none;} #header #topnav > li > label,.children > li > a,.children > li > label,.children2 li a,.children2 li label,#header #topnav > li > a,#header #topnav > li > a:link,#header #topnav > li > a:visited{color:#fff!important;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;background:#de183c;padding:15px 30px 15px 10px;border-bottom:1px solid #dadae5;display:block;cursor:pointer;text-transform:none;font-size:14px;line-height:18px;font-weight:normal;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;} #header #topnav > li:hover > a,#header #topnav > li:hover > label,.children > li:hover > a,.children > li:hover > label,.children2 > li:hover > a,.children2 > li:hover > label{color:#fff!important;background:rgba(255,255,255,0.3);} .children > li > label.back-label,.children2 li label.back-label{padding:15px 10px 15px 30px;} .children > li > a{margin:0;font-weight:normal;} #topnav > li > label,.children > li > label,.children2 li label{position:relative;} #topnav > li > label .fa,.children > li > label .fa,.children2 li label.back-label .fa{position:absolute;right:10px;top:50%;font-size:20px;margin:-10px 0 0;} .children > li > label.back-label .fa,.children2 li label.back-label .fa{right:auto;left:10px;} #topnav > li > a:hover{color:#575757;background:#fff;} #header #topnav > li > .open-check + a,#header .children > li > .open-check + a{display:none;} .close-menu{display:block;padding:15px 10px;color:#fff;background:#000;text-transform:uppercase;font-weight:bold;cursor:pointer;font-size:14px;line-height:16px;position:relative;} .close-menu .fa{float:right;font-size:20px;margin:-2px 0 0;} .children,.children2,#topnav > li:hover .children{opacity:1;visibility:visible;display:block;position:absolute;top:46px;bottom:0;margin:0;z-index:20;background:#de183c;border:none;padding:0;width:100%;left:100%;overflow:hidden;overflow-y:auto;-webkit-transition:left .2s ease-in-out;-moz-transition:left .2s ease-in-out;-ms-transition:left .2s ease-in-out;-o-transition:left .2s ease-in-out;transition:left .2s ease-in-out;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .children2{top:0;} .children2 li{margin:0;width:100%;display:block;padding:0;} .children > li{width:100%;float:none;padding:0;margin:0;position:static;} .children > li.children-img{display:none;} .children-holder{position:static;margin:0;} #topnav > li > .open-check:checked ~ .children-holder .children,.children > li .open-check:checked ~ .children2{left:0;} .children > li > a:before,.children2 li a:before,.children2 li:before,#topnav > li > a:before{display:none;} .overlay{display:block;position:fixed;top:0;left:100%;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;-webkit-transition:left .2s ease-in-out;-moz-transition:left .2s ease-in-out;-ms-transition:left .2s ease-in-out;-o-transition:left .2s ease-in-out;transition:left .2s ease-in-out;} #nav .open-check:checked ~ .overlay{left:0;} .children > li:before{display:none;} } @media (max-width: 500px){ .container{padding:0 10px;} } } /*! CSS Used from: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css ; media=all */ @media all{ .fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .fa-close:before{content:"\f00d";} .fa-angle-left:before{content:"\f104";} .fa-angle-right:before{content:"\f105";} } /*! CSS Used from: Embedded */ #nav{background:#f5f5f5;} #topnav > li > a{color:#000000!important;} #topnav > li > .open-check + a:before{border-color:#000000 transparent transparent transparent;} .children{background:#de183c;} .children > li > a,.children2 > li > a{color:#ffffff!important;} .children2 > li::before{background:#ffffff;} /*! CSS Used fontfaces */ @font-face{font-family:'FontAwesome';src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0') format('embedded-opentype'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}