Team:UNAM Genomics Mexico/Results/NOT

From 2012.igem.org

(Difference between revisions)

Revision as of 03:49, 16 September 2012

UNAM-Genomics_Mexico

UNAM Genomcs mexico

Circle Navigation Effect Bubble-like thumbnail preview for your navigation with CSS3

Hover over the arrows to see the effect.

@@ Line 16: / Line 16: @@
 <div class="cn-bar">
 <div class="cn-nav">
-		<a href="#" class="cn-nav-prev">
+<a href="#" class="cn-nav-prev"><span>Previous</span><div style="background-image:url(${prevSource});"></div></a>
-                <span>Previous</span>
-		<div style="background-image:url(${prevSource});"></div>
+<a href="#" class="cn-nav-next"><span>Next</span><div style="background-image:url(${nextSource});"></div></a></div><!-- cn-nav -->
-					</a>
-					<a href="#" class="cn-nav-next">
+<div class="cn-nav-content">
-                        <span>Next</span>
+<div class="cn-nav-content-prev">
-						<div style="background-image:url(${nextSource});"></div>
+<span>Previous image</span>
-					</a>
+<h3>${prevTitle}</h3>
-                </div><!-- cn-nav -->
+</div>
-                <div class="cn-nav-content">
-                    <div class="cn-nav-content-prev">
+<div class="cn-nav-content-current">
-                        <span>Previous image</span>
+<span>Currently viewing</span>
-                        <h3>${prevTitle}</h3>
+<h2>${currentTitle}</h2>
-                    </div>
+</div>
-                     <div class="cn-nav-content-current">
-                        <span>Currently viewing</span>
+<div class="cn-nav-content-next">
-                        <h2>${currentTitle}</h2>
+<span>Next image</span>
-                    </div>
+<h3>${nextTitle}</h3>
-                    <div class="cn-nav-content-next">
+</div>
-                        <span>Next image</span>
+</div><!-- cn-nav-content -->
-                        <h3>${nextTitle}</h3>
+</div><!-- cn-bar -->
-                    </div>
+</script>
-                </div><!-- cn-nav-content -->
-            </div><!-- cn-bar -->
+</head>
-		</script>
-    </head>
          <div class="container">