hover

static/css/home.collectivecinema.css

@@ -84,3 +84,20 @@
 #home .text.es {
     text-align: right;
 }
+
+
+#home .submenu {
+    overflow: hidden;
+    margin: 10px 0 5px;
+}
+#home .submenu .sub {
+    font-family: "helvetica-neue-bold", Helvetica, Arial, sans-serif;
+    font-size: 15px;
+    margin: 5px 0;
+    margin-bottom: 7px;
+    cursor: pointer;
+}
+
+#home .submenu .sub:hover {
+    opacity: 0.5 !important;
+}

static/js/home.collectivecinema.js

@@ -43,7 +43,7 @@ pandora.ui.home = function() {
             left: '32px',
             position: 'absolute',
             top: '32px',
-            width: '128px'
+            width: '148px'
         },
 
         $menu = $('<div>')
@@ -165,17 +165,12 @@ pandora.ui.home = function() {
             .html('<div class="en">Enter the archive</div><div class="es">Entra al archivo</div>')
             .bind({
                 click: function() {
-                    var page = pandora.user.ui.page == 'home' ? '' : pandora.user.ui.page;
+                    if ($siteSelection.css('height') == '0px') {
-                    /*
+                        $siteSelection.animate({height: '125px'}, 800, function() {
-                    if (pandora.user.level == 'guest') {
+                        })
-                        page = 'signup'
+                    } else {
+                        $siteSelection.animate({height: '0px'}, 800)
                     }
-                    */
-                    pandora.UI.set({
-                        page: page,
-                        section: 'items'
-                    });
-                    that.fadeOutScreen();
                 },
                 mouseenter: function() {
                     $enterButton.css({opacity: 0.5});
@@ -186,6 +181,44 @@ pandora.ui.home = function() {
             })
             .appendTo($menu),
 
+        $siteSelection =  Ox.Element()
+            .addClass('submenu')
+            .html(`
+                <div class="sub">Capital</div>
+                <div class="sub">Orestiada/Oresteia</div>
+                <div class="sub">Sleepers</div>
+                <div class="sub">Decolonial</div>
+            `)
+            .css({height: 0})
+            .bind({
+                click: function(event) {
+                    var sub = event.target.innerText
+                    var target
+                    if (sub == 'Capital') {
+                        target = 'https://collective-cinema.net/grid'
+                    } else if (sub == 'Orestiada/Oresteia') {
+                        target = 'https://orestiada.collective-cinema.net/grid'
+                    } else if (sub == 'Sleepers') {
+                        target = 'https://sleepers.collective-cinema.net/grid'
+                    } else if (sub == 'Decolonial') {
+                        target = 'https://decolonial.collective-cinema.net/grid'
+                    } else {
+                        target = 'https://collective-cinema.net/grid'
+                    }
+                    if (document.location.href.split('/')[2] == target.split('/')[2]) {
+                        var page = pandora.user.ui.page == 'home' ? '' : pandora.user.ui.page;
+                        pandora.UI.set({
+                            page: page,
+                            section: 'items'
+                        });
+                        that.fadeOutScreen();
+                    } else {
+                        document.location.href = target
+                    }
+                }
+            })
+            .appendTo($menu),
+
         $aboutButton = Ox.Element()
             .addClass('menu')
             .html('<div class="en">About</div><div class="es">Acerca de</div>')