On hover, hide text and display options

Recently I learned HTML+CSS and a bit of jQuery and am building various web-things to stretch my skills and learn more about how to do things the right way. I was a bit surprised at just how many different ways there are to do the same thing using just CSS and JavaScript.

Currently I am building a bit of a "landing page" style website bit by bit, and the component I am working on right now is an interactive discovery menu type thing. Essentially there is an initial text, which incites the user to hover over it, and once hovering, various options appear, which are links. My current code is below and functional, however I am not confident that I am executing this efficiently or properly.

A couple of specifics I want to learn are:

• What HTML element should I use for the initial text?

• Is the structure of my hover-menu proper? Or is there a better way that is more standard for this sort of thing?

• Would this be better done in CSS transitions rather than JS? NOTE: I want to add a context box below the menu (or somewhere not directly attached to the individual links) which fills with contextual information about the currently hovered link, so I assume JS is the solution in the long run.

• Not that important but: I had trouble attempting to classify what to call this sort of thing (so as to google it). Is there a standard name for this sort of set-up?

Final Note:

I don't really know any general JavaScript outside of the jQuery I have learned. I do however have programming experience, so I am not opposed to using any other external JS libraries which would be more suited to my goals. I have simply not had much time to explore JavaScript and the many extensions it has. Basically I'd love some directing from anyone who knows what I don't!



`$(document).ready(function() {
$('#menu').hover(
function() { // mouseenter
// hide & compress initial text
$('#menu span').stop().animate({
width: '0px',
opacity: 0
}, $(

One thing you could do is create functions to call instead of writing each sub function out every time you want to animate something.

var hideText = function(element) {

    $('#menu ' + element).stop().animate({
      width: '0px',
      opacity: 0
    }, $('#menu ' + element).hide);
}

var showText = function(element, elementWidth) {

    $('#menu ' + element).stop().show().animate({
      width: elementWidth,
      opacity: 1
    });
}

Now you can call this like this, with less repeated code:

$('#menu').hover(
    function() { // mouseenter

      hideText('span');
      showText('a', '100px');
    },
    function() { //mouseleave

      hideText('a');
      showText('span', '250px');
    });
});

$(document).ready(function() {

var hideText = function(element) {

$('#menu ' + element).stop().animate({
width: '0px',
opacity: 0
}, $('#menu ' + element).hide);
}

var showText = function(element, elementWidth) {

$('#menu ' + element).stop().show().animate({
width: elementWidth,
opacity: 1
});
}

$('#menu').hover(
function() { // mouseenter

hideText('span');
showText('a', '100px');
},
function() { //mouseleave

hideText('a');
showText('span', '250px');
});
});
#menu {
width: auto;
}
#menu * {
overflow: hidden;
white-space: nowrap;
font-size: 30px;
text-align: center;
}
#menu a {
display: none;
width: 0px;
opacity: 0;
}
#menu span {
display: inline-block;
width: 250px;
}



Hover for items!
Item 1
Item 2
Item 3



StackExchange Code Review Q#91229, answer score: 5