A Pen by Müller

Tutorials of (A pen by müller) by Müller

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>A Pen by  Müller</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="off-canvas-wrap">
  <div class="inner-wrap">
    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        ...
      </ul>
    </aside>
    <section class="main-section">

<!--  ENDE erster Teil linkes Menü ----------------------------------------------------------------------- -->

<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">Bighorn.de</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
    </ul>
    <section class="top-bar-section">  <!-- Right Nav Section -->
        <ul class="left">
            <li class="has-form">
                <a class="left-off-canvas-toggle button" ><span>Mehr Optionen</span></a>
            </li>
            <li class="divider"></li>
            <li class="has-form">
                <a href="#" class="button" id="katmenubox-einausblenden">Kategorien</a>
            </li>
        </ul>
        <ul class="right">
            <li class="has-form">
                <div class="row collapse">
                    <div class="large-10 small-10 columns">
                        <input type="text" class="test-form" placeholder="Wonach suchen Sie?">
                    </div>
                    <div class="large-2 small-2 columns">
                        <a href="#" class="alert button expand step fi-magnifying-glass size-60"></a>
                    </div>
                 </div>
            </li>
        </ul>
    </section>
</nav>
</div>



    <div class="row">
        <div id="katmenubox" style="position:relative; z-index:3000; display: none; " class="large-6 columns small-10 columns">
            <ul class="button-group [radius round]">
                <li><a href="#" class="button [secondary alert success]" onclick="insert_eingabe(id, 'katmenubox', 'eingabe')">Button 1</a></li>
                <li><a href="#" class="button [secondary alert success]" onclick="insert_eingabe(id, 'katmenubox', 'eingabe')">Button 2</a></li>
                <li><a href="#" class="button [secondary alert success]" onclick="insert_eingabe(id, 'katmenubox', 'eingabe')">Button 3</a></li>
                <li><a href="#" class="button [secondary alert success]" onclick="insert_eingabe(id, 'katmenubox', 'eingabe')">Button 4</a></li>
                <li><a href="#" class="button [secondary alert success]" onclick="insert_eingabe(id, 'katmenubox', 'eingabe')">Button 1</a></li>
                <li><a href="#" class="button [secondary alert success]" onclick="insert_eingabe(id, 'katmenubox', 'eingabe')">Button 2</a></li>
                <li><a href="#" class="button [secondary alert success]" onclick="insert_eingabe(id, 'katmenubox', 'eingabe')">Button 3</a></li>
                <li><a href="#" class="button [secondary alert success]" onclick="insert_eingabe(id, 'katmenubox', 'eingabe')">Button 4</a></li>
                <li><a href="#" class="button [secondary alert success]" onclick="insert_eingabe(id, 'katmenubox', 'eingabe')">Button 1</a></li>
                <li><a href="#" class="button [secondary alert success]" onclick="insert_eingabe(id, 'katmenubox', 'eingabe')">Button 2</a></li>
                <li><a href="#" class="button [secondary alert success]" onclick="insert_eingabe(id, 'katmenubox', 'eingabe')">Button 3</a></li>
                <li><a href="#" class="button [secondary alert success]" onclick="insert_eingabe(id, 'katmenubox', 'eingabe')">Button 4</a></li>
            </ul>
        </div>

        <div class="large-12 columns" style="position: relative; z-index:1;">

        </div>



    </div>




    <div class="row">
      <div class="large-12 columns">
        <h1>Welcome to Bighorn</h1>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <h1>Welcome to Bighorn</h1>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <h1>Welcome to Bighorn</h1>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <h1>Welcome to Bighorn</h1>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <h1>Welcome to Bighorn</h1>
      </div>
    </div>

<!-- Linkes Menü 2. Teil ----------------------------------------- -->

 </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>

<!-- ENDE Linkes Menü 2. Teil ------------------------------------ -->


<!--
    <script src="js/foundation.min.js"></script>

    <script>
      $(document).foundation();
    </script>
-->

  </body>

<!-- Foundation 3 for IE 8 and earlier -->
<!--[if lt IE 9]>
    <script src="/foundation3/js/foundation.min.js"></script>
    <script src="/foundation3/js/app.js"></script>
<![endif]-->

<!-- Foundation 4 for IE 9 and later -->
<!--[if gt IE 8]><!-->
    <script src="/foundation5/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
<!--<![endif]-->
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
	<link rel="stylesheet" href="bighorn.de/foundation5/css/normalize.css">
	<link rel="stylesheet" href="bighorn.de//foundation5css/foundation.css"> 
.size-12 { font-size: 12px; }
        .size-14 { font-size: 14px; }
        .size-16 { font-size: 16px; }
        .size-18 { font-size: 18px; }
        .size-21 { font-size: 21px; }
        .size-24 { font-size: 24px; }
        .size-36 { font-size: 36px; }
        .size-48 { font-size: 48px; }
        .size-60 { font-size: 60px; }
        .size-72 { font-size: 72px; }

        .top-bar input[type="text"], .top-bar .button {
            font-size: 0.77778rem;
            position: relative;
            top: 7px;
        }

        .top-bar input[type="text"] {
            height: auto;
            padding-top: 0.35rem;
            padding-bottom: 0.35rem;
            font-size: 0.75rem;

        }
        @media only screen and (min-width: 40.063em) {
          .test-form {
            min-width:186px;
          }
        }
        @media only screen and (min-width: 47.063em) {
          .test-form {
            min-width:290px;
          }
        }
        @media only screen and (min-width: 55.063em) {
          .test-form {
            min-width:370px;
          }
        }
/* Downloaded from https://www.codeseek.co/ */
    <script src="bighorn.de/foundation5/js/modernizr.js"></script>
<script src="bighorn.de/foundation5/js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            /* Hier der jQuery-Code */
            $('#katmenubox-einausblenden').click(function(){
            	$('#katmenubox').toggle('slow');
            })
        });
    </script>


    <script>
        $(window).click(function(ev) {
            if($(ev.target).attr('id') != "#katmenubox" ) {
                if($(ev.target).attr('id') != "katmenubox-einausblenden" ) {
                    $("#katmenubox").hide('slow');
                }
             }
        });
    </script>
        <script src="/foundation5/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>

This awesome code ( A Pen by Müller ) is write by Müller, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Müller