slide out menu from the side

[juzbeingme1]

So for my site im trying to mod this menu: http://tympanus.net/codrops/2010/03/...u-with-jquery/ (all the codes used are on there so that might be easy )

The only thing is, this is a slide menu that comes from the bottom which has the title of the menu item above the description of the menu item so basically <span class="title"></span>
<span class="description></span>
(im juz using the codes to show what i mean)
now... i managed to modify the javascript so that the menu slides out from the left side of the page, but the problem i have is that they slide out the same as from the bottom on, so the title above the description

now what i want to achieve is that the description is on the leftside of the title and so the description follows the title when it slides from left to right
in html code it would be <span class="description"></span> <span class="title"></span>

I just cant seem to get the description and the title placed next to eachother and still have it working with the javascript...already tried float and all that but apparently that doesnt work with spans...

can anyone tell me how to achieve this?

tnx in advance

[ajfmrf]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[Beverleyh]

Go back to the floats idea for a mo but set the spans to display:inline-block; too. The CSS in the demo had them set as display:block; which means that theyve been told to behave like block level elements that won't occupy the same line - inline-blocks will. You might also need to define specific widths for each span and make sure that their combined total widths (plus any paddings and margins) do not exceed the width of their parent element/container.

If you need more help please provide a link to your page.

[juzbeingme1]

I tried the inline block but still to no succes
right now this is my code...can any1 help me out cuz im not seeing it

<div class="container">
    	<ul id="menu">
        	<li>
            	<a>
            	<i class="icon_about"></i>
                <span class="title">About</span>
                <span class="description">Info about me</span>
                </a>
            </li>
        </ul>
    </div>
</div>

The CSS

.container{
    width:400px;
    height:900px;
    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;
}

ul#menu{
    list-style:none;
    position:absolute;
    top:0px;
    font-size:36px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    color:#999;
    letter-spacing:-2px;
}

ul#menu li{
    margin:0px 20px 0px 0px;
}
ul#menu a{
    cursor:pointer;
    position:relative;
	top:10px;
    line-height:20px;
    width:300px;
}

ul#menu span.title{
    display:inline-block;
    height:26px;
	float:left;
    text-shadow:1px 1px 1px #000;
    color:#B7B7B6;
    text-indent:10px;
}
ul#menu span.description{
    width:300px;
	height:20px;
	display:inline-block;
    background-color:#B7B7B6;
    border:3px solid #fff;
	float:left;
	top:0px;
    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;
	z-index:9000;
}

I really have no idea what I'm doing wrong =x
but i need to get the title span on the right side of the description span

[Beverleyh]

You have display:inline-block; AND display:block; defined against the description. 'block' comes after 'inline-block' so you're resetting it (inline-block is being overridden)

Also, the width of the <a> is 300px, and the width of the description is also 300px plus 10px extra on each side form padding, so its already wider than its parent element. As I previously advised, the total combined widths of the title and description, plus any paddings/margins, need to be smaller than the parent - if you want them to sit side-by-side, there needs to be room to accommodate them both. This will be more predictable if you set widths on BOTH the title and description - so far there is only a width defined on the description - and set the <a> extra wide for the sake of troubleshooting.

Moderator's Note - If you need more help, please post a link to your actual web page. If you do not wish to post the link to your actual website, you should set up a demo elsewhere on a temporary page that can be deleted afterwards.

[juzbeingme1]

mhm sorry i pressed undo a few times too much after i adjusted it and it didnt work lol i originally had adjusted the width to cover the whole width of both elements. but thanks i completely read over the double display command that i gave

i should still work with float: left and float: right, isnt it?