A Pen by Müller

Thumbnail
This awesome code was written by elcomportal, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright elcomportal ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/elcomportal/a-pen-by-mandxfcller-AaFCL */
	<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/elcomportal/a-pen-by-mandxfcller-AaFCL */
    <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>

Comments