A vertical navigation bar that switches from an icon to text with a cool animation. HTML5 and CSS3.
A Pen by Arjan Jassal on CodePen.
Ashar20
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="toggle"> | |
| <input id="light-mode" type="checkbox"/> | |
| <svg class="toggle-scene" xmlns="http://www.w3.org/2000/svg" preserveaspectratio="xMinYMin" viewBox="0 0 197.451 581.081"> | |
| <defs> | |
| <marker id="e" orient="auto" overflow="visible" refx="0" refy="0"> | |
| <path class="toggle-scene__cord-end" fill-rule="evenodd" stroke-width=".2666" d="M.98 0a1 1 0 11-2 0 1 1 0 012 0z"></path> | |
| </marker> | |
| <marker id="d" orient="auto" overflow="visible" refx="0" refy="0"> | |
| <path class="toggle-scene__cord-end" fill-rule="evenodd" stroke-width=".2666" d="M.98 0a1 1 0 11-2 0 1 1 0 012 0z"></path> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
| viewBox="0 0 1186.4 662.8" style="enable-background:new 0 0 1186.4 662.8;" xml:space="preserve"> | |
| <g id="background"> | |
| <rect x="-9.7" y="0" fill="#2c3e50" width="1197.1" height="662.8"/> | |
| </g> | |
| <g id="table_legs"> | |
| <g> | |
| <defs> | |
| <rect id="SVGID_1_" x="-9.7" y="0" width="1197.1" height="662.8"/> | |
| </defs> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header> | |
| <div class="container"> | |
| <h1 class="logo"></h1> | |
| <nav> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Pricing</a></li> | |
| <li><a href="#">Contact</a></li> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="intro"> | |
| <p class="scroll-text">Scroll down</p> | |
| </section> | |
| <section class="anim"> | |
| <h1 data-lax-preset="rightToLeft-.1 fadeInOut">Animation</h1> | |
| <p class="desc" data-lax-preset="blurInOut fadeInOut">Check out this nifty little scroll based animation with laxxx.js</p> | |
| <div class="box1" data-lax-preset="spin"></div> | |
| <div class="box2" data-lax-scale="700 0, 500 1, 100 1, 0 0" data-lax-anchor="self"></div> | |
| </section> | |
| <section></section> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="intro"> | |
| <p class="scroll-text">Scroll down</p> | |
| </section> | |
| <section class="anim"> | |
| <h1 data-lax-preset="rightToLeft-.1 fadeInOut">Animation</h1> | |
| <p class="desc" data-lax-preset="blurInOut fadeInOut">Check out this nifty little scroll based animation with laxxx.js</p> | |
| <div class="box1" data-lax-preset="spin"></div> | |
| <div class="box2" data-lax-scale="700 0, 500 1, 100 1, 0 0" data-lax-anchor="self"></div> | |
| </section> | |
| <section></section> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aside class="cta"> | |
| <header class="cta__hed"> | |
| <h1 class="cta--hed">Love outlasts death.</h1> | |
| </header> | |
| <div class="cta__top-layer cta--top-lightblue"></div> | |
| <div class="cta__top-layer cta--top-medblue"></div> | |
| <div class="cta__top-layer cta--top-darkblue"></div> | |
| <div class="cta__layer cta--medblue"></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body id="page-top" class="index" data-pinterest-extension-installed="cr1.3.4"> | |
| <!-- Navigation --> | |
| <nav class="navbar navbar-default navbar-fixed-top navbar-shrink"> | |
| <div class="container"> | |
| <!-- Brand and toggle get grouped for better mobile display --> | |
| <div class="navbar-header page-scroll"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body id="page-top" class="index" data-pinterest-extension-installed="cr1.3.4"> | |
| <!-- Navigation --> | |
| <nav class="navbar navbar-default navbar-fixed-top navbar-shrink"> | |
| <div class="container"> | |
| <!-- Brand and toggle get grouped for better mobile display --> | |
| <div class="navbar-header page-scroll"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body id="page-top" class="index" data-pinterest-extension-installed="cr1.3.4"> | |
| <!-- Navigation --> | |
| <nav class="navbar navbar-default navbar-fixed-top navbar-shrink"> | |
| <div class="container"> | |
| <!-- Brand and toggle get grouped for better mobile display --> | |
| <div class="navbar-header page-scroll"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> |
OlderNewer