Menu looks better now.

diff --git a/app/components/menu/menu.html b/app/components/menu/menu.html
index 6a335b9..4a4e2a8 100644 (file)
--- a/app/components/menu/menu.html
+++ b/app/components/menu/menu.html
@@ -1,11 +1,51 @@
 <img id="floater" src="images/Arrow_Floating.gif" />
-<h1>DivinElegy</h1>
+<h1 style="text-align:center;">DivinElegy</h1>
 <ul class="menu">
-    <li><a href="#/">Home</a></li>
-    <li><a href="#/simfiles">Simfiles</a></li>
-    <li><a href="#/packs">Packs</a></li>
+    <li>
+        <a href="#/simfiles">
+            <img ng-mouseover  = "archiveImg='simfiles_hover.png'; page='Simfile Archive (Individual Files)'"
+                 ng-mouseleave = "archiveImg='simfiles.png'"
+                 ng-init       = "archiveImg='simfiles.png'"
+                 ng-src="images/{{archiveImg}}"/>
+        </a>
+    </li>
+    <li>
+        <a href="#/packs">
+            <img ng-mouseover  = "fImg='simfiles_hover.png'; page='Simfile Archive (Packs)'"
+                 ng-mouseleave = "fImg='simfiles.png'"
+                 ng-init       = "fImg='simfiles.png'"
+                 ng-src="images/{{fImg}}"/>
+        </a>
+    </li>
+    <li>
+        <a href="http://facebook.com/Divinelegy" target="_blank">
+            <img ng-mouseover  = "fbImg='facebook_hover.png'; page='Facebook'"
+                 ng-mouseleave = "fbImg='facebook.png'"
+                 ng-init       = "fbImg='facebook.png'"
+                 ng-src="images/{{fbImg}}"/>
+        </a>
+    </li>
+    <li>
+        <a href="http://youtube.com/use/divinelegy" target="_blank">
+            <img ng-mouseover  = "ytImg='youtube_hover.png'; page='YouTube'"
+                 ng-mouseleave = "ytImg='youtube.png'"
+                 ng-init       = "ytImg='youtube.png'"
+                 ng-src="images/{{ytImg}}"/>
+        </a>
+    </li>
+    <li>
+        <a href="http://peekingboo.spreadshirt.com" target="_blank">
+            <img ng-mouseover  = "ssImg='merch_hover.png'; page='Merchandise'"
+                 ng-mouseleave = "ssImg='merch.png'"
+                 ng-init       = "ssImg='merch.png'"
+                 ng-src="images/{{ssImg}}"/>
+        </a>
+    </li>
 </ul>
-<hr />
+<div class="clearfix"></div>
+<hr style="margin-top: 5px;"/>
+<div class='page-title'>{{page}}</div>
+<hr style="margin-top: 5px;" />
 <div latest-simfile></div>
 <div latest-pack></div>
 <hr />

diff --git a/app/css/divinelegy.css b/app/css/divinelegy.css
index 3167203..951c0ba 100644 (file)
--- a/app/css/divinelegy.css
+++ b/app/css/divinelegy.css
@@ -86,6 +86,32 @@ td {
     margin-top: 18px;
     border-color: black;
 }
+#navigation .page-title {
+    min-height: 12px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align:center;
+}
+
+.menu li {
+    display:inline;
+}
+
+.menu li a {
+    text-decoration: none;
+}
+
+.menu img {
+    width:23px;
+}
+
+.menu {
+    margin-top: 5px;
+}
+
+.menu ul {
+    text-align: center;
+}
 
 .panel h1, .panel h2 {
     color: white;

diff --git a/app/images/facebook.png b/app/images/facebook.png
new file mode 100644 (file)
index 0000000..e8d8782
Binary files /dev/null and b/app/images/facebook.png differ

diff --git a/app/images/facebook_hover.png b/app/images/facebook_hover.png
new file mode 100644 (file)
index 0000000..a526ae4
Binary files /dev/null and b/app/images/facebook_hover.png differ

diff --git a/app/images/merch.png b/app/images/merch.png
new file mode 100644 (file)
index 0000000..5d14b0e
Binary files /dev/null and b/app/images/merch.png differ

diff --git a/app/images/merch_hover.png b/app/images/merch_hover.png
new file mode 100644 (file)
index 0000000..21b5714
Binary files /dev/null and b/app/images/merch_hover.png differ

diff --git a/app/images/simfiles.png b/app/images/simfiles.png
new file mode 100644 (file)
index 0000000..e387fab
Binary files /dev/null and b/app/images/simfiles.png differ

diff --git a/app/images/simfiles_hover.png b/app/images/simfiles_hover.png
new file mode 100644 (file)
index 0000000..afb49ad
Binary files /dev/null and b/app/images/simfiles_hover.png differ

diff --git a/app/images/youtube.png b/app/images/youtube.png
new file mode 100644 (file)
index 0000000..84041ff
Binary files /dev/null and b/app/images/youtube.png differ

diff --git a/app/images/youtube_hover.png b/app/images/youtube_hover.png
new file mode 100644 (file)
index 0000000..85d154d
Binary files /dev/null and b/app/images/youtube_hover.png differ