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 the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and […]

bottomSlideOut

View demoDownload source

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!

View demoDownload source

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.
Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 38

Comments are closed.
  1. 3

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

  2. 5

    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

  3. 6

    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!

  4. 7

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

  5. 8

    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.

  6. 10

    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?

  7. 11

    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

  8. 12

    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 :D

    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.

  9. 13

    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

  10. 14

    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

Comments are closed.