A Fresh Bottom Slide Out Menu with jQuery

In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out […]

From our sponsor: Sign up for Mailchimp today.

In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

The Luna Grey iconset can be downloaded at DryIcons: http://dryicons.com/free-icons/preview/luna-grey-icons/

In the downloadable ZIP I will not be able to provide them, but I kept the naming, so that you can easily integrate it.

Ok, let’s start with the Markup.

The Markup

The menu will be placed inside of a container. The menu itself will be an unordered list with link elements inside. The link elements will contain two spans: one for the title and one for the description. We will also have an i element for the icon:

<div class="container">
	<ul id="menu">
		<li>
			<a>
				<i class="icon_about"></i>
				<span class="title">About</span>
				<span class="description">
					Learn about us and our services
				</span>
			</a>
		</li>
		 <li>
			<a>
				<i class="icon_work"></i>
				<span class="title">Work</span>
				<span class="description">
					See our work and portfolio
				</span>
			</a>
		</li>
		<li>
			<a>
				<i class="icon_help"></i>
				<span class="title">Help</span>
				<span class="description">
					Talk to our support
				</span>
			</a>
		</li>
		 <li>
			<a>
				<i class="icon_search"></i>
				<span class="title">Search</span>
				<span class="description">
					Search our website
				</span>
			</a>
		</li>
	</ul>
</div>

Don’t forget to adapt the link element and to add your destination into an href if you need to.

The CSS

Let’s start with the style of the surrounding container. The container will be of relative position since we will make the menu absolute. We will have to hide the description part of the menu items and so we will hide any overflow of the container. If you place this menu absolutely to the page, i.e. at the bottom, the description part will simply disappear outside of you window. This container allows you to see how to implement this menu relatively to some other element:

.container{
    width:900px;
    height:130px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    border:3px solid #fff;
	background-color:#fff;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    -moz-border-radius:0px 0px 20px 20px;
    -webkit-border-bottom-left-radius:20px;
    -webkit-border-bottom-right-radius:20px;
    border-radius:0px 0px 20px 20px;
}

We create some fancy shadowing and rounded borders with the CSS3 properties. Keep in mind that they will only work in modern browsers (so, basically all except marvelous IE).
The list will have the following style:

ul#menu{
    list-style:none;
    position:absolute;
    bottom:0px;
    left:20px;
    font-size:36px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    color:#999;
    letter-spacing:-2px;
}
ul#menu li{
    float:left;
    margin:0px 10px 0px 0px;
}
ul#menu a{
    cursor:pointer;
    position:relative;
    float:left;
    bottom:-95px;
    line-height:20px;
    width:210px;
}

As you can see, we hide the push the link element down in order to almost hide the description span. We do that by giving a negative bottom position. You can adapt this value to make the span appear a little bit more or not at all.
Now, let’s take a look at the classes for the icons:

.icon_about,
.icon_work,
.icon_help,
.icon_search{
    width:64px;
    height:64px;
    display:block;
    left:140px;
    top:50px;
    position:absolute;
}
.icon_about{
    background:transparent url(../images/id_card.png) no-repeat top left;
}
.icon_work{
    background:transparent url(../images/globe.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_search{
    background:transparent url(../images/find.png) no-repeat top left;
}

The CSS of the title and description spans will look as follows:

ul#menu span.title{
    display:block;
    height:26px;
    text-shadow:1px 1px 1px #000;
    color:#B7B7B6;
    text-indent:10px;
}
ul#menu span.description{
    width:140px;
    height:80px;
    background-color:#B7B7B6;
    border:3px solid #fff;
    color:#fff;
    display:block;
    font-size:24px;
    padding:10px;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    box-shadow:1px 1px 6px #000;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

We also want the two spans to change text and background color, so we define the style for the hover of the parent link element:

ul#menu a:hover span.description{
    background-color:#54504F;
}
ul#menu a:hover span.title{
    color:#54504F;
}

And that’s all the style. Now, let’s add some nice interaction effects with jQuery.

The Javascript

The JavaScript will be pretty straightforward since we will only do two things: slide out the link element and the icon. The following function makes that happen (and the opposite when we move the mouse out):

$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-15px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-95px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
});

In order to slide out the link element, we change the bottom position and animate that. For the icon we change the top value and give the effect more time, since we want to create a little delay.

And that’s it! Enjoy it!

Message from TestkingWhether you want to get itil certification or interested in cisco certification, using ccna prep resources you pass your certification exam on first attempt.

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 38

Comments are closed.
  1. This is VERY cool! I will defiantly be using it on http://theeasyapi.com absolutely! I just sent that over to my designer and we will be finding ways to incorporate that great idea.

    Nice work and it’s wonderful!

  2. Maybe cool at first glance, but seriously — who uses this overkill of an effect orgasm? It’s more a proof of concept and we that develop sites got plenty of ’em (and they’re all mostly useless :))

    • Hello Tommie,
      thanks for your feedback, I get your point. And yes, it is a proof of concept and a tutorial that shows how to do it. I am sure some developers and web designers would even use this in their sites (some nutjobs like me, for example) πŸ™‚ For me it is a joy to create things like these and I understand that they don’t suit everybody’s taste. If you like more “practical” menus maybe you will enjoy these ones: http://tympanus.net/codrops/2010/01/31/fresh-set-of-css-only-menus/
      Cheers, ML

  3. Tommie, perhaps you can show some useful ones?You that develop sites surely have a nice collection…
    Very nice effect, and keep up the good work!cheers,Pankaj

  4. Noticed a bug with this, when you hover outside the icons on slideUp, there’s a weird flickering of the slide. (Minefield 3.7a3pre)

  5. Hello Aaron,
    thanks a lot! It happened because the link element did not have enough width. It needs to be as wide as the icon goes. The flickering was caused by actually hovering outside of the a, but when the whole element slided down, one was hovering again! I fixed it now and updated it, thanks again!
    Cheers, ML

  6. Super slick. Thanks for sharing the CSS3 goodness. I will definitely be experiment with this tut.

  7. @ Mary Lou, It does work in IE8 but the shadows and the rounded corners don’t.

  8. Great Work! Question..where do you adapt the link element and to add your destination into an href ? Is there a way to remove the link border?

  9. Hi Tom, the href has to be put into the link element: <a href=”…
    You probably mean the underline. That you remove by specifying in the CSS under ul#menu a outline and text-decoration:none. Hope it helps, ML

  10. Is there a way to have shadows and rounded corners to work in IE8 too?

    Great tut thx a lot πŸ™‚

  11. Great effects you got there. I have a question, is it possible to add several links inside each slideout menu?

  12. Hi..
    Nice work, can you give an example where i should put the <a href=”
    I am not an expert. Just give an example.

    Thanks

  13. MAN! i have been looking for this exact thing for days! all the others werent hiding what was under the slide which is how i needed it. Thank you!

  14. hi,
    it’s nice work. but i want to know how can i put this menu type on drupal?

  15. Hi, absolutely LOVE this menu. However, I am having trouble getting it to work in WordPress…the hover functions work, but it doesn’t slide. Any thoughts? Hope you can help.

  16. This is very nice it helps me a lot for a self studying novice…but i have one question when i pud a link nofollow in the menu all the box gets scattered and had some flickering movement….how can i pud a link of each box?

  17. hehehe…nice your great i already get how “to put the link in each box but only one thing can i put delayed or animated loading bar in the “work menu” so its gonna look like its loading or generating if you click the link….Hope you can help

  18. I’ve just want to ask how to add some link list in the box, but looks like there’s quite people already asking for it πŸ˜€

    Anyway, the code really simple in good way. even newbie as myself can figure out how to edit it to match my needs.

    Big hug and thanks for this.

  19. iam newbie here, so there is a problem comes up. I don’t see my icon appear, surely i put them in image folder and link to this but the result still the same..any suggest will be helpful..thanks

  20. Brilliant idea, looks really slick, too bad CSS3 isn’t the standard at the moment, but I would like to ask if there is any way to make each menu item to open a unique animated separate information box or image all while staying on the same page? I think (and have tested) that adding a <a href=” … link would navigate to another page and cannot trigger another function within jquery?

    If this is at all possible it would be amazing, since I can’t get my head around this and jquery is new to me, your idea would be perfect for portfolios or small information websites.

    -Thanks in advance