Redesigned menu and tag-cloud.

src/GergelyPolonkai/FrontBundle/Resources/public/css/front.css

@@ -71,21 +71,28 @@ body {
 }
 
 #menu {
-    background-color: #b5b5b5;
+    background-color: #f18137;
     height: 39px;
+    margin-top: 15px;
+}
+
+#tagcloud-button {
+    float: left;
+    padding-top: 2px;
+    padding-left: 6px;
+    cursor: pointer;
 }
 
 #menu ul {
     margin: 8px;
     padding: 0;
     list-style-type: none;
-    text-align: right;
+    float: right;
-    vertical-align: middle;
 }
 
 #menu ul li {
     float: right;
-    margin-top: 10px;
+    margin-top: 1px;
     margin-bottom: 10px;
     margin-left: 1em;
     height: 30px;
@@ -186,6 +193,17 @@ dd p {
     text-align: right;
 }
 
+#tag-cloud {
+    position: absolute;
+    width: 600px;
+    padding: 8px;
+    border: 1px solid black;
+    background-color: #303030;
+    margin-left: 5px;
+    margin-top: 2px;
+    display: none;
+}
+
 #tag-cloud a {
     color: #b3b3b3;
     text-decoration: none;

src/GergelyPolonkai/FrontBundle/Resources/views/Default/front_base.html.twig

@@ -33,14 +33,8 @@
                 </div>
             </div>
             <div id="content-padding"></div>
-{% if tagCloud|length > 0 %}
-            <div id="tag-cloud">
-{% for cloudItem in tagCloud %}
-                <a href="{{ path('GergelyPolonkaiFrontBundle_blogTagList', { name: cloudItem.name }) }}" class="size{{ cloudItem.size }}">{{ cloudItem.name }}</a>{% if not loop.last %} | {% endif %}
-{% endfor %}
-            </div>
-{% endif %}
             <div id="menu">
+                <div id="tagcloud-button"><img alt="" src="{{ asset('bundles/gergelypolonkaifront/images/tagcloud.png') }}" /></div>
                 <ul>
                     <li {% if currentMenu == 'resume' %} class="active"{% endif %}><a href="{{ path('GergelyPolonkaiFrontBundle_resume', { _format: 'html' }) }}">Resume</a></li>
                     <li {% if currentMenu == 'blog' %} class="active"{% endif %}><a href="{{ path('GergelyPolonkaiFrontBundle_blogListing') }}">Blog</a></li>
@@ -48,6 +42,13 @@
                 </ul>
                 <br class="clear" />
             </div>
+{% if tagCloud|length > 0 %}
+            <div id="tag-cloud">
+{% for cloudItem in tagCloud %}
+                <a href="{{ path('GergelyPolonkaiFrontBundle_blogTagList', { name: cloudItem.name }) }}" class="size{{ cloudItem.size }}">{{ cloudItem.name }}</a>{% if not loop.last %} | {% endif %}
+{% endfor %}
+            </div>
+{% endif %}
             <div id="content">
 {% block content %}{% endblock content %}
             </div>
@@ -59,7 +60,13 @@
             </div>
         </div>
         <script type="text/javascript">
+            $(document).ready(function() {
                 $('.at-obfuscation').html('@');
+
+                $('#tagcloud-button').click(function() {
+                    $('#tag-cloud').toggle('slow');
+                });
+            });
         </script>
     </body>
 </html>