w3tweaks

Checklist animation - Only CSS

Simple checklist animation

A Pen by Milan Raring on CodePen.

License.

w3tweaks

Animated Slider

Based on https://dribbble.com/shots/4895590-Nav-Interaction-Idea. Best viewed in fullscreen.

A Pen by Kasper De Bruyne on CodePen.

License.

w3tweaks

<form>
	<div id="unicycle1" class="unicycle">
		<input type="range" class="unicycle__wheel" name="unicycle" min="0" max="100" value="0">
		<div class="unicycle__marker">
			<div class="unicycle__rider-head"></div>
			<div class="unicycle__rider-body">
				<div class="unicycle__left-arm">
					<div class="unicycle__left-lower-arm"></div>
				</div>
				<div class="unicycle__right-arm">

w3tweaks

Frontend Community Banner Animation

A Pen by LawrieCape on CodePen.

License.

w3tweaks

header.main-header
	ul.menu
		li.menu__item(data-sub="product"): a(href="#") Product
		li.menu__item(data-sub="developer"): a(href="#") Developer
		li.menu__item(data-sub="company"): a(href="#") Company
	.dropdown-holder
	
		.dropdown__arrow
		
		.dropdown__bg

w3tweaks

<header class="header">
    <hgroup>
        <h1>Makisu</h1>
        <h2>CSS 3D Dropdown Concept</h2>
    </hgroup>
</header>

<section class="demo">

    <dl class="list nigiri">

w3tweaks

CSS3/Javascript Pure Dropdown Menu

A Pen by Pedro Nauck on CodePen.

License.

w3tweaks

<nav>
    <ul class="desktop-menu" id="desktopMenu">

      <li>
        <a id="home" href="#">
        <img src="https://eliya33.github.io/church/images/yonsei-logo-100x100.png" class="yonsei-logo" alt="Yonsei University Logo">LOGO NAME</a>
      </li>

      <li class="desktop-link">
        <a href="#">Link One</a>

w3tweaks

<div id="sse1">
  <div id="sses1">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Potofolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

w3tweaks

CSS Drop Down Multi-column Menu with Search Field

The menu made by swimbi app (swimbi.com). You can use it as is. If you want to modify the code I recommend to download the app and edit the navigation in user friendly interface. Easily select other icons. To get the same menu design you need to select Skin: "Adobe", and Config: "Blue" in top drop down lists.

A Pen by swimbi on CodePen.

License.