Difference between revisions of "Team:Bielefeld-CeBiTec/Sandbox"

Line 1: Line 1:
 
{{Bielefeld-CeBiTec/Header}}
 
{{Bielefeld-CeBiTec/Header}}
  
−
<html>
+
<!DOCTYPE html>
−
 
+
<html lang="en" class="no-js">
−
<body>
+
<head>
−
 
+
<meta charset="UTF-8" />
−
<div class="container">
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
−
 
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
<div class="jumbotron">
+
<title>Off-Canvas Menu Effects - Top Side</title>
−
  <h1>Welcome!</h1>    
+
<meta name="description" content="Modern effects and styles for off-canvas navigation with CSS transitions and SVG animations using Snap.svg" />
−
  <p>This is the wiki of iGEM Bielefeld 2015</p>
+
<meta name="keywords" content="sidebar, off-canvas, menu, navigation, effect, inspiration, css transition, SVG, morphing, animation" />
−
</div>
+
<meta name="author" content="Codrops" />
−
 
+
<link rel="shortcut icon" href="../favicon.ico">
−
  <div class="row">
+
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
−
  <div class="col-md-3">
+
<link rel="stylesheet" type="text/css" href="css/demo.css" />
−
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
−
    incididunt ut labore et dolore magna aliqua.</p>
+
<link rel="stylesheet" type="text/css" href="css/menu_topside.css" />
−
  </div>
+
<!--[if IE]>
−
  <div class="col-md-3">
+
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
−
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+
<![endif]-->
−
    aliquip ex ea commodo consequat.</p>
+
</head>
−
  </div>
+
<body>
−
  <div class="col-md-3">
+
<div class="container">
−
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+
<div class="menu-wrap">
−
    doloremque laudantium, totam rem aperiam.</p>
+
<nav class="menu-top">
−
  </div>
+
<div class="profile"><img src="img/user1.png" alt="Matthew Greenberg"/><span>Matthew Greenberg</span></div>
−
  <div class="col-md-3">
+
<div class="icon-list">
−
    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
+
<a href="#"><i class="fa fa-fw fa-star-o"></i></a>
−
    dicta sunt explicabo.</p>
+
<a href="#"><i class="fa fa-fw fa-bell-o"></i></a>
−
  </div>
+
<a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
−
</div>
+
<a href="#"><i class="fa fa-fw fa-comment-o"></i></a>
−
</div>
+
</div>
 +
</nav>
 +
<nav class="menu-side">
 +
<a href="#">Recent Stories</a>
 +
<a href="#">Reading List</a>
 +
<a href="#">My Stories</a>
 +
<a href="#">Categories</a>
 +
</nav>
 +
</div>
 +
<button class="menu-button" id="open-button">Open Menu</button>
 +
<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 class="current-demo" 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 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>
 +
<p>Based on the <a href="https://dribbble.com/shots/1663008-Old-Designspiration-Menu-Concept">Dribble shot by Michael Martinho</a></p>
 +
</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>
  
 
</body>
 
</body>

Revision as of 19:11, 10 September 2015

iGEM Bielefeld 2015


<!DOCTYPE html> Off-Canvas Menu Effects - Top Side

Previous Demo Back to the Codrops Article

Off-Canvas Menu Effects Showing (off-canvas) menus stylishly

Based on the Dribble shot by Michael Martinho

If you enjoyed this demo you might also like:

Transitions for Off-Canvas Navigations

Perspective Page View Navigation