I want to only show the menu phrases "music, newsletter, contact" fixed at the bottom of the screen. On hover I want them to slide up and reveal hidden content. here's exactly what I mean:

/

See the bottom of the screen. Anyone know how this would be acplished? Thank you.

P.S. also, would anyone know what type of MP3 player that is?

I want to only show the menu phrases "music, newsletter, contact" fixed at the bottom of the screen. On hover I want them to slide up and reveal hidden content. here's exactly what I mean:

http://sorendahljeppesen.dk/

See the bottom of the screen. Anyone know how this would be acplished? Thank you.

P.S. also, would anyone know what type of MP3 player that is?

• javascript
• jquery
• css

• is there any specific question you have? this isn't a place where you have full pieces of code written for you. – AndyL Commented Jun 30, 2011 at 19:21
• scratch that, maybe this is a place where people write code for you. unfortunate, as i'm sure you could've done it yourself. – AndyL Commented Jun 30, 2011 at 19:43

3 Answers 3

Put your hidden content into a div such as;

<div class="hiddenContent">...</div>

Then give your links at the bottom of the page a class such as;

<a href="#" class="bottomLink">Music</a>

Then tell the Jquery to show the hidden content when you hover over the link;

$('.bottomLink').hover(
    function () {
        // Show hidden content IF it is not already showing
        if($('.hiddenContent').css('display') == 'none') {
            $('.hiddenContent').slideUp('slow');
        }
    },
    function () {
        // Do nothing when mouse leaves the link
        $.noop(); // Do Nothing
    }
);

// Close menu when mouse leaves Hidden Content
$('.hiddenContent').mouseleave(function () {
        $('.hiddenContent').slideDown('slow');
});

Try this code:

ASPX section,

           <div id="categories-menu" class="hover-menu">
             <h2>Categories</h2>
                <ul class="actions no-style" style="display: none">
                   <li>//Place your content here that should show up on mouse over</li>                       
               </ul>
            </div>

JQuery section,

            <script type="text/javascript">
           $(document).ready(function() {

            function show() {
              var menu = $(this);
               menu.children(".actions").slideUp();
            }

            function hide() { 
                 var menu = $(this);
                 menu.children(".actions").slideDown();
           }

           $(".hover-menu").hoverIntent({
              sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
               interval: 50,   // number = milliseconds for onMouseOver polling       interval
                over: show,     // function = onMouseOver callback (required)
                 timeout: 300,   // number = milliseconds delay before onMouseOut
                    out: hide       // function = onMouseOut callback (required)
             });

       });
    </script>

Hope this helps...

I have found this great article with live demo and source code to download, the article show how to make a slide out menu from bottom.