prashant2k15

<nav class="navbar">
	<div class="container">
		<section class="wrapper">
			<h1 class="brand"><a href="./index.html" class="brand-link">LOGO</a></h1>
			<button type="button" class="burger" id="burger">
				<span class="burger-line"></span>
				<span class="burger-line"></span>
				<span class="burger-line"></span>
				<span class="burger-line"></span>
			</button>

prashant2k15

<div id="left-flyout-nav" class="layout-left-flyout visible-sm"></div>
<div class="layout-right-content">
  <header class="the-header">
    <div class="navbar container">
      
      <!-- Trigger -->
      <a class="btn-navbar btn-navbar-navtoggle btn-flyout-trigger" href="#">
        <span class="icon-bar btn-flyout-trigger"></span>
        <span class="icon-bar btn-flyout-trigger"></span>
        <span class="icon-bar btn-flyout-trigger"></span>

prashant2k15

A simple Dropdown Menu

Just a simple html and css dropdown menu...

A Pen by Mike Rojas on CodePen.

License.

prashant2k15

E-Commerce Navigation Bar

It's a full-page nav because there's too many damn links.

A Pen by Olivia Ng on CodePen.

License.

prashant2k15

<div class="menu">
    <div class="title">MENU</div>
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

prashant2k15

Fancy menu

A Pen by Blaz Kemperle on CodePen.

License.

prashant2k15

Burger Menu - Full CSS / No JS

A Pen by Julien Lejeune on CodePen.

License.

prashant2k15

Burger menu transformation

Pure CSS Burger Menu transformation with few effects.

A Pen by Victor Belozyorov on CodePen.

License.

prashant2k15

<input type="checkbox" id="navcheck" role="button" title="menu">
<label for="navcheck" aria-hidden="true" title="menu">
	<span class="burger">
		<span class="bar">
			<span class="visuallyhidden">Menu</span>
		</span>
	</span>
</label>
<nav id="menu">
	<a href="#">Lorem.</a>

prashant2k15

// available colors: primary | secondary | white | ghost
- var navStartColor = 'ghost' 
- var navIntoColor = 'secondary'

// available sizes: xl | lg | md | sm
- var navStartSize = 'xl'
- var navIntoSize = 'md'


// the bootstrap navbar