Advanced Search

Results 1 to 6 of 6

Thread: slide out menu from the side

  1. #1
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default slide out menu from the side

    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

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    586
    Thanks
    41
    Thanked 27 Times in 27 Posts

    Default

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

    Bud

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,882
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    HTML Code:
    <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
    Code:
    .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

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,882
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

Similar Threads

  1. Smooth Navigational Menu (v1.5) want to display as dropline side by side
    By jqdesigner in forum Dynamic Drive scripts help
    Replies: 19
    Last Post: 01-30-2013, 02:35 PM
  2. Replies: 2
    Last Post: 09-17-2011, 10:15 PM
  3. Horizontal animated slide-in menu from the right side
    By Rhinosaurus in forum Looking for such a script or service
    Replies: 6
    Last Post: 07-08-2011, 02:32 PM
  4. Resolved slide out side column. . .thingy
    By AlterPoser in forum Looking for such a script or service
    Replies: 9
    Last Post: 06-17-2010, 02:19 AM
  5. Omni Slide Right side menu with an iframe
    By chips in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-17-2007, 07:26 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •