MoveUp Menu

Mouse / keyboard menu scroll

by secretgspot

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    
    <title>The MoveUp Menu</title>
    
    <link rel='stylesheet' href='css/style.css'>
    
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>

</head>

<body>

    <div id="page-wrap">
    
        <div id="title">

            <h1>The MoveUp Menu</h1>
            <p>As inspired by <a href="http://theflowmarket.com/site.php">FLOWmarket</a></p>
            <p>Use mouse and/or UP and DOWN arrows. </p>
            <p>Original: <a href="http://css-tricks.com/the-moveup-menu/">http://css-tricks.com/the-moveup-menu/</a></p>
        </div>
    
        <div id="menu">
        
            <ul>
        
                <li><a href="#">Nature                    </a></li>
                <li><a href="#">Receivability             </a></li>
                <li><a href="#">Alone time                </a></li>
                <li><a href="#">Togetherness              </a></li>
                <li><a href="#">Imperfection              </a></li>
                <li><a href="#">Exercise                  </a></li>
                <li><a href="#">Rest                      </a></li>
                <li><a href="#">God                       </a></li>
                <li><a href="#">Thankfulness              </a></li>
                <li><a href="#">Forgiveness               </a></li>
                <li><a href="#">Inner peace               </a></li>
                <li><a href="#">Silence                   </a></li>
                <li><a href="#">Trust                     </a></li>
                <li><a href="#">Contentness               </a></li>
                <li><a href="#">Sustainable visions       </a></li>
                <li><a href="#">Reflection                </a></li>
                <li><a href="#">Prayer+meditation         </a></li>
                <li><a href="#">Compassion                </a></li>
                <li><a href="#">Quality                  ...

CSS

/*
     CSS-Tricks Example
     by Chris Coyier
     http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 11px/1.4 Helvetica, Arial, Sans-Serif; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap { width: 960px; margin: 80px auto; position: relative; }

#title { position: absolute; top: 100px; left: 0; z-index: 3; }

#menu { width: 400px; padding-left: 250px; overflow: auto; height: 360px; position: relative; z-index: 1; }
#menu:before { content: " "; position: absolute; top: 0; left: 0; height: 50px; width: 100%; z-index: 2; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,100)),color-stop(1, rgba(255,255,255,0))); }
#menu:after { content: " "; position: absolute; bottom: 0; left: 0; height: 50px; width: 100%; z-index: 2; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0)),color-stop(1, rgba(255,255,255,100))); }
#menu ul { list-style: none; }
#menu a { text-decoration: none; display: block; color: black; }
#mover { position: absolute; width: 100%; padding-top: 40px; height: 360px; }
#mover div { padding: 0 30px; }

#menu .hover { font-weight: bold; font-size: 18px; color: #FF8400; margin-left: -5px;  }

JavaScript

// DOM Ready
        $(function() {                
            
            $("#menu").css("overflow", "hidden").wrapInner("<div id='mover' />");
            
            var $el,
                speed = 13.5,
                cur = -1,
                items = $("#menu a"),
                max = items.length - 1;
                                
            items
            .each(function(i) {
                $(this).attr("data-pos", i);
            })
            .hover(function() {
            
                $el = $(this);
                $el.addClass("hover");    
                
                $("#mover").css("top", -($el.data("pos") * speed - 40));
                // 40 is the top padding for the fadeout
                
                cur = $el.data("pos");
                                
            }, function() {
                $(this).removeClass("hover");
            });
            
            $(document).keydown(function(event) {
            
                cur = $(".hover").attr("data-pos");
                            
                // Down arrow
                if (event.keyCode == 40) {
                                                
                    $("[data-pos=" + cur + "]").trigger("mouseleave");
                    if (cur != max) { cur++; }
                    $("[data-pos=" + cur + "]").trigger("mouseenter");
                    
                }
                
                // Up arrow
                if (event.keyCode == 38) {
                
                    $("[data-pos=" + cur + "]").trigger("mouseleave");
                    if (cur > 0) { cur--; }
                    $("[data-pos=" + cur + "]").trigger("mouseenter");
                    
                }
                
            });
        
        });