what2watch/scss/plugins/nav

Nav

A responsive, pure css navigation menu:

On these smaller versions it might have small glitches. Please see the top, page-wide nav to see the actual effect.

<div style="overflow: hidden;height: 250px;"> <!-- For Demo, Represents the body -->

<nav class="demo">
  <a href="#" class="brand">
    <img class="logo" src="/img/basket.png" />
    <span>Picnic CSS</span>
  </a>

  <!-- responsive-->
  <input id="bmenub" type="checkbox" class="show">
  <label for="bmenub" class="burger pseudo button">menu</label>

  <div class="menu">
    <a href="#" class="pseudo button icon-picture">Demo</a>
    <a href="#" class="button icon-puzzle">Plugins</a>
  </div>
</nav>

</div>

Responsive

The nav is responsive by default. The text inside the <label> can be changed for the following characters for a different effect (source):

• Identical to ≡ (safe on mobile): ≡
• Trigram for heaven ☰: ☰
• Any other:

Different height and big logo

Thanks to a vertical-align trick, you can set it up to any height you want:

nav.imponent {
  padding: 2em 0;
}

.imponent .logo {
  height: 3em;
}

<nav class="demo imponent">
  <a href="#" class="brand">
    <img class="logo" src="/img/basket.png" />
    <span>Picnic CSS</span>
  </a>
</nav>

Form elements

Just get anything you want inside the nav, most things should work.

<div style="overflow: hidden;height: 250px;"> <!-- For Demo, Represents the body -->

<nav class="demo">
  <a href="#" class="brand">Picnic CSS</a>

  <!-- responsive-->
  <input id="bmenug" type="checkbox" class="show">
  <label for="bmenug" class="burger pseudo button">&#8801;</label>

  <div class="menu">
    <input placeholder="Search plugins" />
  </div>
</nav>

</div>

<div style="overflow: hidden;height: 250px;"> <!-- For Demo, Represents the body -->

<nav class="demo">
  <a href="#" class="brand">Picnic CSS</a>

  <!-- responsive-->
  <input id="cmenug" type="checkbox" class="show">
  <label for="cmenug" class="burger pseudo button">&#8801;</label>

  <div class="menu">
    <select>
      <option>Choose an option</option>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</nav>

</div>

Fixed position

To set it on the top of the page instead of scrolling with the page, just do:

nav {
  position: absolute;
}

Open nav menu from left

Change sass variable $picnic-nav-open-left: false !default; to $picnic-nav-open-left: true; to open it from the left:

<div style="overflow: hidden;height: 250px;"> <!-- For Demo, Represents the body -->

<nav class="demo">
  <a href="#" class="brand">Picnic CSS</a>

  <!-- responsive-->
  <input id="cmenug" type="checkbox" class="show">
  <label for="cmenug" class="burger pseudo button">&#8801;</label>

  <div class="menu">
    <select>
      <option>Choose an option</option>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</nav>

</div>